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

Question

我有这个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();    
  }); 
});

<div>
  <p id="one"> this is the first paragraph</p>
....   
  <p id="four"> this is the fourth paragraph</p> 
....   
</div>

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

Answer 1

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

<audio id='myAudio' autoplay='autoplay'></audio>

您有两种选择:

• 音频播放/停止时禁用/启用按钮/链接(首选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();
   }

});