Question

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

首先，我的网页上有许多<audio>个元素，每个元素都在<p>中，并带有相应的文字。这些<audio>元素中的每一个都对应于故事中的一个句子。

我准备开始编写一个javascript对象，这个对象允许某些＆＃34;播放所有＆＃34;功能，你点击按钮，它会播放音频[0]，完成后，音频[1]，等等。它也会有一个＆＃39;暂停＆＃39;按钮并跟踪你在哪里，等等。这样，单个句子仍然可以播放或享受，因为它们每个都有一个audio元素。或者，可以使用我的＆＃34;全部播放＆＃34;顶部的按钮将audio元素的序列视为一个大元素。

然后我开始问自己这里是否有更好/更容易/更规范的解决方案。我想做的一件事就是将所有这些单独的音频文件拼凑成一个大的音频文件，并且可能会创建一个章节＆＃39; <track>元素。这更可取吗？

每种方法的优缺点是什么？是否已经为我制作了一些现成的解决方案，我根本没有出现？

Answer 1

您可以使用end事件在上一个声音结束时播放下一个声音（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();
}

Answer 2

我使用javascript来解决问题，使用Audio对象和setInterval。下面是一个例子：

  var sndLetItSnow = new Audio("audio/letItSnow.m4a");
  var sndSanta = new Audio("audio/snow.m4a");

  var playlist = [sndLetItSnow, sndSanta];

  var current = null;
  var idx = 0;

  function playSound() {
      if (current === null || current.ended) {
          // go to next
          current = playlist[idx++];

          // check if is the last of playlist and return to first
          if (idx >= playlist.length)
              idx = 0;

           // return to begin
           current.currentTime=0;

           // play
           current.play();
      }

  }

  setInterval(playSound, 1000);

有关Audio对象的更多文档，您可以访问此页面：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

我希望这有帮助！

如何按顺序播放许多音频文件

2 个答案: