如何判断HTML5音频元素何时播放结束?

在Web开发中,嵌入音频是常见的需求,HTML5提供了<audio>元素来实现这个功能。但是如何判断音频何时播放结束呢?本文将介绍三种方法。

方法一:ended事件

ended事件在音频播放结束时触发,因此可以使用该事件来检测音频是否已经播放完毕。

------ ------------ -----------------------
--------
  --- ----- - -----------------------------------
  ------------------------------- ---------- -
    ----------------
  ---
---------

上面的代码创建了一个<audio>元素,然后使用JavaScript添加了一个ended事件监听器。当音频播放完毕时,就会弹出提示框。

方法二:timeupdate事件

timeupdate事件在音频播放位置改变时触发,可以通过比较当前时间和总时间是否相等来判断音频是否已经播放完毕。

------ ------------ -----------------------
--------
  --- ----- - -----------------------------------
  ------------------------------------ ---------- -
    -- ------------------ -- --------------- -
      ----------------
    -
  ---
---------

上面的代码创建了一个<audio>元素,并添加了一个timeupdate事件监听器。在每次事件触发时,将当前时间与总时间进行比较,如果相等,则说明音频已经播放完毕。

方法三:Promise

在ES6中,<audio>元素具有Promise支持,可以使用play()方法返回的Promise来判断音频是否已经播放完毕。

------ ------------ -----------------------
--------
  --- ----- - -----------------------------------
  ---------------------------- -
    ----------------
  ---
---------

上面的代码创建了一个<audio>元素,并调用了play()方法。当音频播放完毕时,Promise对象将被fulfilled,然后弹出提示框。

总结一下,上述三种方法都可以用来判断HTML5音频元素何时播放结束。如果您正在开发Web应用并需要使用嵌入式音频,希望本文能够给您带来帮助。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/30371