如何找到 HTMLAudioElement 音频结束播放答案

【问题标题】：How to find HTMLAudioElement audio ended playing如何找到 HTMLAudioElement 音频结束播放
【发布时间】：2017-07-25 09:34:46
【问题描述】：

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

mySound = new Audio([URLString]);

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

有什么方法可以找到 HTMLAudioElement 音频何时完成？我尝试了“结束”属性，但在音频播放完毕后没有调用该函数。

【问题讨论】：

【解决方案1】：

正如@Djave 在他们的评论中指出的那样，以及here 中提到的，您可以将onended 事件用于使用 JS 创建的音频对象（而不是ended，如果您使用的是 DOM 元素则有效):

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

【讨论】：

【解决方案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

【讨论】：

我们不使用音频标签在我们的例子中音频元素不会。 E 在 dom 中可用
DOM 中是否有可用的元素？
我们将音频元素创建为“新音频（URL）”，此音频元素在 dom 中不可用
您可以将音频元素创建为var myAudioClip = document.createElement('audio'); document.body.appendChild('myAudioClip'); 吗？

【解决方案3】：

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

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

【讨论】：