如何在JS中随机单独播放音频文件

Question

我创建了一个小型 Kanye West 报价生成器，连同用于获取随机 Kanye 报价的按钮，我放入了一些音频文件来播放（只有三个 Kanye 说话的音频片段）。

我想做的是：当单击按钮以显示新报价时，应该播放音频（来自 3）。目前，我知道它会播放，但是所有 3 个音频文件一次播放或一次播放两个，并且在下次单击时单独播放一个。

这是我的音频代码：

const kanyeBush = document.getElementById('bush');
const kanyeOpinion = document.getElementById('opinion');
const kanyeRobot = document.getElementById('robot');
let kanyeQuoteArray = [kanyeBush, kanyeOpinion, kanyeRobot];

const kanyeSounds = () => {
        let kanyeSoundbite = kanyeQuoteArray.forEach( sound => {
            sound.play();
        });
        let audio = new Audio(kanyeSoundbite);
        audio.play();
}

然后我在我的获取代码中运行了这个：

const kanyeQuote = async () => {
    const kanyeResponse = await fetch(kanyeApi);
    const quoteJson = await kanyeResponse.json();
    const randomQuote = document.createElement('h3');
    quoteBox.innerHTML = "";
    randomQuote.innerHTML = quoteJson.quote;
    quoteBox.appendChild(randomQuote);
    kanyeBtn.classList.toggle('hidden');
    newQuoteBtn.classList.toggle('hidden');
    kanyeSounds();
}


newQuoteBtn.addEventListener('click',kanyeQuote);
kanyeBtn.addEventListener('click', kanyeQuote)

有什么建议吗？

Answer 1

你在 forEach 中为他们所有人设置了 sound.play……所以他们一起玩。你必须指定一个你希望玩的。例如，您可以使用随机索引

  const kanyeSounds = () => {
            let bitIndex = Math.floor((Math.random() * kanyeQuoteArray.length))
            let kanyeSoundbite = kanyeQuoteArray.forEach( (sound, index) => {
                sound.pause(); // reset previous 
                sound.currentTime = 0; // reset position
                if(index === bitIndex) sound.play();
            });
            
            let audio = new Audio(kanyeSoundbite);
            audio.play();
    }