javascript - 如何顺序播放多个音频文件

Question

我有几个长篇故事，其源音频是逐句音频文件。我想创建一个网页，人们可以在其中多次收听特定故事的单个句子，或者从头到尾收听整个故事。

首先，我的网页有很多 <audio>元素，每个元素都在 <p> 中与相应的文本。这些中的每一个<audio>元素对应故事的单个句子。

我正要开始编写一个 javascript 对象，该对象将允许某种“全部播放”功能，您可以单击该按钮，它将播放音频 [0]，完成后，音频 [1]等等。它还会有一个“暂停”按钮并跟踪您所在的位置等。这样仍然可以播放或欣赏各个句子，因为它们每个都有一个 audio。元素。或者，可以使用顶部的“全部播放”按钮来处理 audio 的序列。元素就好像它们是一个大元素。

然后我开始问自己这里是否有更好/更简单/更规范的解决方案。我想做的一件事是将所有这些单独的音频文件整合到一个大音频文件中，也许可以创建“章节”<track>。元素。这是更可取的吗？

每种方法的优缺点是什么？是否已经为我准备了一些开箱即用的解决方案，但我只是没有使用过？

Answer 1

您可以使用 ended 事件在前一个声音完成时播放下一个声音 ( Playing HTML 5 Audio sequentially via Javascript ):

var sounds = new Array(new Audio("1.mp3"), new Audio("2.mp3"));
var i = -1;
playSnd();

function playSnd() {
    i++;
    if (i == sounds.length) return;
    sounds[i].addEventListener('ended', playSnd);
    sounds[i].play();
}