如何使用jquery和html5检测音频文件的结尾

我有这个jquery代码和html工作正常的英语培训网站。

$(document).ready(function() { $("p").hover( function() { $(this).css({"color": "purple", "font-weight" : "bolder"}); }, function() { $(this).css({"color": "black", "font-weight" : ""}); } ); $("p").click(function (event) { var element = $(this); var elementID = event.target.id; var oggVar = (elementID +".ogg"); var audioElement = document.createElement('audio'); audioElement.setAttribute('src', oggVar); audioElement.load(); audioElement.addEventListener("load", function() { audioElement.play(); }, true); audioElement.play(); }); }); 
 
 this is the first paragraph
 .... 
 this is the fourth paragraph
 ....  

问题是如果在播放（或双击）音频文件时单击文本，则第二个文件（或同一文件）开始播放。 所以我最终同时播放了两个文件。 我需要防止这种情况。 我认为’结束’事件是相关的，但是，尽管看了一些例子，我看不出如何检测文件是否正在播放并等到它完成之后再允许第二个文件启动（或者甚至阻止它播放在所有）。 任何帮助将非常感激 ：）

Answer 1

您可以为已结束和播放事件添加事件侦听器。 另外，为什么要通过javascript创建音频标签？ 我只想创建一个空的隐藏音频标签：

你有两个选择：

• 音频播放/停止时禁用/启用按钮/链接（首选imho）
• 在播放时忽略点击

然后为它添加两个eventlisteners：

 var playing = false; $('#myAudio').on('playing', function() { playing = true; // disable button/link }); $('#myAudio').on('ended', function() { playing = false; // enable button/link }); $("p").click(function (event) { if(!playing) { var element = $(this); var elementID = event.target.id; var oggVar = (elementID +".ogg"); var audioElement = $('#myAudio')[0]; audioElement.setAttribute('src', oggVar); audioElement.play(); } }); 

Answer 2

  ***var audioElement = null;*** $("p").click(function (event) { ***if (audioElement) { audioElement.pause(); }*** var element = $(this); var elementID = event.target.id; var oggVar = (elementID +".ogg"); audioElement = document.createElement('audio'); audioElement.setAttribute('src', oggVar); audioElement.load(); audioElement.addEventListener("load", function() { audioElement.play(); }, true); audioElement.play(); });