javascript - 如何使用 JavaScript 按顺序播放多个声音？

Question

我有许多 mp3 声音( i 、 y 、 e 等)。当用户根据用户在文本字段中给出的单词(例如，eye)按下按钮时，我想按顺序播放它们(即它们之间没有任何停顿)。

我知道可以使用以下 HTML 来播放音频:

<source type="audio/mpeg" id="mp3"></source>

但看起来这与我需要的不同。

Answer 1

您可以使用 ending 事件在上一个声音完成时播放下一个声音:

var i = document.getElementById("i"),
    y = document.getElementById("y"),
    e = document.getElementById("e");
i.addEventListener("ended", function() {
  y.play();
}, false);
y.addEventListener("ended", function() {
  e.play();
}, false);
i.play();

<audio id="i" src="http://www.internationalphoneticalphabet.org/ipa-sounds-folder/mp3/Close_front_unrounded_vowel.mp3"  controls></audio>

<audio id="y" src="http://www.internationalphoneticalphabet.org/ipa-sounds-folder/mp3/Close_front_rounded_vowel.mp3" controls></audio>

<audio id="e" src="http://www.internationalphoneticalphabet.org/ipa-sounds-folder/mp3/Close-mid_front_unrounded_vowel.mp3" controls></audio>

...但请注意，这些音频文件在音频数据中有暂停。因此，您要么必须编辑文件，要么必须 set the audio position on them ，可能是每个声音的自定义值，您必须响应 timeupdate 事件，观察音频中您认为声音实际结束的点，在该点停止播放并开始下一篇。

以下是 chop i 声音的前半部分和后半部分的示例:

var i = document.getElementById("i"),
    y = document.getElementById("y"),
    e = document.getElementById("e");
var istarted = false, istop;
i.addEventListener("canplay", function() {
  this.currentTime = 0.02;
  istop = this.duration - 0.6;
  if (!istarted) {
    this.play();
    istarted = true;
  }
});
i.addEventListener("timeupdate", function() {
  if (this.currentTime > istop) {
    this.pause();
    y.play();
  }
}, false);
y.addEventListener("ended", function() {
  e.play();
}, false);

<audio id="i" src="http://www.internationalphoneticalphabet.org/ipa-sounds-folder/mp3/Close_front_unrounded_vowel.mp3"  controls></audio>

<audio id="y" src="http://www.internationalphoneticalphabet.org/ipa-sounds-folder/mp3/Close_front_rounded_vowel.mp3" controls></audio>

<audio id="e" src="http://www.internationalphoneticalphabet.org/ipa-sounds-folder/mp3/Close-mid_front_unrounded_vowel.mp3" controls></audio>

以上两者都不是非常强大，可能应该等待以确保媒体加载等。它们只是指出要做的相关事情。

另请注意，timeupdate 是一个“尽力而为”的事件，它不会非常精确。