如何找到 HTMLAudioElement 音频结束播放

Posted 2023-02-25

【中文标题】如何找到 HTMLAudioElement 音频结束播放

【英文标题】：How to find HTMLAudioElement audio ended playing

【发布时间】：2017-07-25 09:34:46

【问题描述】：

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

mySound = new Audio([URLString]);

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

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

【问题讨论】：

不只是onended像mySound.onended = function() ... ;

【参考方案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
)