如何检测音频已在网页中播放完毕？答案

【问题标题】：How to detect an audio has finished playing in a web page?如何检测音频已在网页中播放完毕？
【发布时间】：2011-06-04 22:19:45
【问题描述】：

在我的项目中，我需要将音频（例如：mp3 等）嵌入到网页中。当用户访问该页面时，音频将开始播放。音频结束后，会出现问卷（表单域）供用户回答。

有没有办法使用jquery检查音频是否播放完毕，以便在用户听完整个音频后出现问卷？

我知道一种检查方法是确定音频长度，然后我可以设置一个计时器来显示调查问卷，但我希望 jquery 有某种事件处理程序可以让我完成这项工作。

我看到 jquery 有很多音频插件，在这里我不能确定哪个会做我想要的：http://plugins.jquery.com/plugin-tags/audio

非常感谢任何想法。

谢谢。

【问题讨论】：

【解决方案1】：

如果您使用的是 html5 音频标签，则有“onended”事件处理程序。我不知道浏览器是否支持它。

类似：

<audio src="xpto.mp3" onended="DoSomething();"></audio>

在最后一种情况下，您可以使用可以播放声音的 swf，并在播放结束时提醒您的 javascript。

【讨论】：

不幸的是，我在一家公司工作，IE 7 目前是“首选”浏览器，而且似乎只有 IE 9 及更高版本才有 HTML5。
所以你应该使用 Flash 播放器。试试 XSPF
我不能在这个项目中使用 Flash。虽然这个网络应用程序将使用 IE 运行，但我将来需要将此网络应用程序移植到 iPad 设备上，并且 iPad 不支持 Flash。
使用 jquery 我使用 bind $("player").bind("ended", function(){window.location = '/nextpage';});
我发现如果您使用 Tizen Web api，则此方法比使用 addEventListener 效果更好，就好像您使用函数调用中的代码仍然会影响正在播放的音频一样。但这样它实际上确实会等待媒体先完成播放。

【解决方案2】：

你也可以像这样添加一个 jQuery 事件监听器：

$("audio").on("ended", function() {
    console.log("All Done!");
});

【讨论】：

【解决方案3】：

使用 JavaScript 事件监听器。

var myAudio = document.getElementById("myAudioId");

myAudio.addEventListener("ended", function() {
    alert("The audio has ended.");
};

【讨论】：