时间戳

首页 > 解决方案 > 如何在 html 5 中一一播放多个音频文件？

html5-audio - 如何在 html 5 中一一播放多个音频文件？

问题描述

我想一个一个地播放多个音频文件。我读过同样的问题，但我发现原始答案的链接不起作用并且问题没有得到解答。

原始答案

<audio id="mySound" controls><source src="http://www.hvalur.org/audio/uploaded_files/ds_umkomuleysi_0_0.mp3" type="audio/mpeg"></audio>

<audio id="mySound1" ><source src="http://www.hvalur.org/audio/uploaded_files/ds_ljosmyndavel_0_0.mp3" type="audio/mpeg"></audio>

我想要由用户操作（按下播放按钮）开始的第一个声音，然后一个一个播放以下声音。这个例子的用法将练习理解母语者阅读的电话号码。

标签： html5-audio

解决方案

我会做这样的事情：

var mySound = document.getElementById("mySound");
var mySound1 = document.getElementById("mySound1");
var mySound2 = document.getElementById("mySound2");
var mySound3 = document.getElementById("mySound3");

var mySoundArray = [mySound, mySound1, mySound2, mySound3];
var mySoundArrayPos = 0;

var myButton = document.getElementById("myButton");
myButton.addEventListener("click", function(event) {
    mySound.play();
    mySoundArrayPos = 0;
    startSoundTimer();
});

const startSoundTimer = () => {
    var mySoundTimer = setInterval(() => {
        if (mySoundArray[mySoundArrayPos].currentTime >= mySoundArray[mySoundArrayPos].duration) {
            if (mySoundArrayPos < mySoundArray.length -1) {
                mySoundArrayPos += 1;
                mySoundArray[mySoundArrayPos].play();
            } else {
                clearInterval(mySoundTimer);
            }
        }
    }, 10);
};

我不知道 10 毫秒是否有点太快，但我认为，这是合法的。

推荐阅读