如何巧妙地从声音数组中排除最后播放的声音？

vue.js

2024-03-24 08:59:30

如何从声音数组中排除最后播放的声音

前言

在开发过程中，如果你想要随机播放声音，同时避免连续播放同一声音，本文将探讨如何使用 Vue.js 实现这一目标。排除最后播放的声音可以确保自然流畅的音频体验。

问题陈述

假设你有一个包含 5 个声音的数组，希望随机播放这些声音，但避免连续播放同一声音。例如，如果 "Sfx4" 连续播放四次，听起来就不太自然。你的目标是始终播放一个新声音（当然，在这些 5 个声音之内）。

解决方法

1. 跟踪最后播放的声音

使用响应式变量来跟踪最近播放的声音索引。

2. 创建可播放的声音列表

从原始声音数组中创建一个新数组，该数组排除了最后播放的声音。

3. 随机选择一个索引

使用 JavaScript 的 Math.random() 函数从可播放声音列表中随机选择一个索引。

4. 播放声音

根据所选索引播放声音。

代码示例

以下代码示例展示了如何使用 Vue.js 实现上述步骤：

<template>
    <button class="book__nav-btn" @click="playTurnSfx">
        <slot> </slot>
    </button>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import Sfx1 from '@/assets/sounds/page-turn-1.mp3?url';
import Sfx2 from '@/assets/sounds/page-turn-2.mp3?url';
import Sfx3 from '@/assets/sounds/page-turn-3.mp3?url';
import Sfx4 from '@/assets/sounds/page-turn-4.mp3?url';
import Sfx5 from '@/assets/sounds/page-turn-5.mp3?url';

const sounds = [Sfx1, Sfx2, Sfx3, Sfx4, Sfx5];
const lastPlayedIndex = ref(null);
const playableSounds = computed(() => {
    return sounds.slice(lastPlayedIndex.value, -1); // 排除最后播放的声音
});
const randomIndex = computed(() => {
    return Math.floor(Math.random() * playableSounds.length);
});

const playTurnSfx = () => {
    const sound = new Audio(sounds[randomIndex.value]);
    sound.volume = 0.1;
    sound.play();
    lastPlayedIndex.value = randomIndex.value; // 更新最后播放的声音索引
};
</script>