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

Question

我创建了一个小型 Kanye West 引述生成器，连同获取运行dom 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();
    }

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

How to play audio files randomly and separately in JS

javascript

dom-events

html5-audio