Question

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

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

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

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

Answer 1

当前一个声音完成时，您可以使用ended事件播放下一个声音：

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事件，看看内部的点您认为声音实际结束的音频，在该点停止播放并开始播放下一个。

以下是切断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是一个“尽力而为”的事件，它不会超精确。

如何使用JavaScript依次播放多个声音？

1 个答案: