Vuejs：从声音数组中排除最后播放的声音

Question

我试图随机化单击按钮时播放的声音，但我也想跳过最后播放的声音。例如，如果连续播放

Sfx4

四次，听起来就不自然。我想始终播放新的声音（当然在这 5 种声音之内）。我做错了什么？如果可能的话，给我一些关于如何实现它的想法。

<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);
let playableSounds = sounds.toSpliced(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();
};
</script>

Answer 1

您可以维护播放声音索引的历史记录。这将确保新选择的声音索引与上一个不同。

这是实现此功能的代码的修改版本：

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

<script setup>
import { ref, computed } 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 playedIndices = ref([]);
const lastPlayedIndex = computed(() => playedIndices.value[playedIndices.value.length - 1]);

const getRandomIndex = () => {
  let newIndex;
  do {
    newIndex = Math.floor(Math.random() * sounds.length);
  } while (newIndex === lastPlayedIndex.value);
  return newIndex;
};

const playTurnSfx = () => {
  const newIndex = getRandomIndex();
  const sound = new Audio(sounds[newIndex]);
  sound.volume = 0.1;
  sound.play();
  playedIndices.value.push(newIndex);
};
</script>

此代码执行以下操作/进行以下修改：

1. 它维护一个

   playedIndices

   引用，以便跟踪已播放的声音的索引。

2. getRandomIndex

   函数生成随机索引。它还使用 do-while 循环确保新的随机索引与上次播放的索引不同。
3. 单击按钮时，将调用

   getRandomIndex

   函数以获取新的随机索引，播放相应的声音并将索引添加到

   playedIndices

   数组中。