如何使用 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>

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

原文由 RoyS 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

你有两个选择：

• 播放/停止音频时禁用/启用按钮/链接（首选恕我直言）
• 已经播放时忽略点击

然后向其中添加两个事件监听器：

 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();
   }

});

原文由 asgoth 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

var myAudio = new Audio('someSound.ogg');
myAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
myAudio.play();

这适用于 jquery 音频。

原文由 HK Technical 发布，翻译遵循 CC BY-SA 4.0 许可协议