音频播放完 HTML5 后如何触发 JQuery 事件答案

【问题标题】：How to trigger a JQuery event when Audio has finished playing HTML5音频播放完 HTML5 后如何触发 JQuery 事件
【发布时间】：2013-10-21 21:16:29
【问题描述】：

我试图弄清楚当我的音频停止播放时如何触发事件。我正在使用 HTML5 <audio> 标签。到目前为止，我可以使用duration 属性获取音频以提供其持续时间，但目前我对此无能为力。我要做的就是将“播放”字符串传递给 html() 方法，这样当我的音频播放完毕时它就不会一直显示“暂停”。

切换功能：

$("#toggleButton").on("click", function(evt) {
    if(audio.paused) {
        audio.play();
        $(this).html("Pause");
    }
    else {
        audio.pause();
        $(this).html("Play");
    }
});

我也在努力寻找有关音频方法和属性的文档。我尝试在 JQuery 和 Mozilla 网络上搜索“音频”，但它们没有返回任何内容。

【问题讨论】：

那么你想要在音频结束时触发一个函数？捕捉那个事件？
没错，是的。一旦音轨播放完毕，我就可以启动一些东西。如果在 JQuery 的上下文中可能的话，它不一定是一个事件。如果音轨的持续时间已播放完毕，则可以解决问题。

标签： jquery html5-audio

【解决方案1】：

试试这个：

audio.addEventListener('ended', function(){
    $("#toggleButton").html("Play");
});

【讨论】：

太棒了！效果很好。如果可以的话，我使用on('ended', function()...) 方法编写的内容略有不同？也会检查你的链接:-)
@user1574598，就像你使用 jQuery 一样。我的版本是纯 JavaScript。随意使用。
很棒的提示。我真的研究过这个

【解决方案2】：

当声音完成时，您的音频标签应触发“onended”事件。连接到该事件，并根据需要更新您的按钮图形。与往常一样，浏览器支持可能会有所不同。

【讨论】：