如何查找HTMLAudioElement音频结束播放

Question

一个应用程序正在使用JavaScript中的HTMLAudioElement播放音频剪辑，如下所示：

mySound = new Audio([URLString]);

URL字符串会根据用户点击而不断变化。

如何找到HTMLAudioElement音频何时完成？我尝试了“ended”属性，但是该函数在音频播放完后并没有被调用。

- CodeMan

---

不就是像这样的 mySound.onended = function(){ ... }; 的 onended 吗？ - Djave

Answer 1

正如@Djave在评论中指出的那样，并且正如这里提到的，您可以使用onended事件处理JS创建的Audio对象（相反，如果您正在使用DOM元素，则有效的是ended）：

mySound = new Audio(audioFile);
mySound.onended = function() {
    // Whatever you want to do when the audio ends.
}

- Tomty

Answer 2

有什么方法可以找到HTMLAudioElement音频何时完成

您可以使用ended事件监听器：

HTML：

<audio>
  <source src="/my-audio-clip.mp3" type="audio/mpeg">
</audio>

Javascript：

var myAudioClip = document.querySelector('[src="/my-audio-clip.mp3"]');
myAudioClip.addEventListener('ended', myFunction, false);

---

进一步阅读： https://developer.mozilla.org/en-US/docs/Web/Events/ended

- Rounin

---

我们在这种情况下不使用音频标签，因此音频元素将不会在DOM中可用。 - CodeMan

DOM中是否有任何元素可用？ - Rounin

我们可以使用"new audio(URL)"来创建音频元素，但是这个音频元素在DOM中不可用。 - CodeMan

你能否创建音频元素，如 var myAudioClip = document.createElement('audio'); document.body.appendChild('myAudioClip');？ - Rounin

Answer 3

你可以使用 addEventListener 并监听 ended 事件，就像当 HTMLAudioElement 在 DOM 中一样，例如：

mySound = new Audio([URLString]);
mySound.addEventListener("ended", function(e) {
    // do whatever
})

- Mendy