区分 HTML5 <audio> 中的音频开始和音频播放（暂停后）

Question

如何在音频/视频开始时添加监听器？

我可以这样做：

$audio.on("play", function() {
    console.log("audio played");
});

其中 $audio 是代表单个 DOM 音频元素的 jQuery 对象。

但是当我们恢复视频时它也会运行。我希望它只在启动时运行。

我可以做到的一种方法是：

$audio.on("play", function() {
  if(this.currentTime === 0) {
      console.log("audio started);
  }
});

但是当我们开始播放/暂停音频时，它会运行多次。

有没有更好的方法来做到这一点？侦听器应仅在音频开始和音频重放时工作，不当用户手动将搜索栏拖到源的开头时。

Answer 1

将标志存储到目标元素的data-* 属性中：

const $audio = $('.audio');
$audio.on("play", function() {
  
  if ($(this).data('once-played')) return; // Do nothing if data exists.
  
  // Your code here
  console.log("Audio started for the first time");

  // Finally, add a flag.
  $(this).data('once-played', true);
});

<audio class="audio" src="http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg" autoplay controls loop></audio>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

实际上，这听起来可能令人困惑，因为我的印象是，如果我们在几秒钟内完成，currentTime 仍有可能返回 0。但是在阅读了@freedomn-m、@roko-c-buljan、@rory-mccrossan cmets 之后，我知道当我们立即播放-暂停-播放视频时，currentTime 永远不可能返回 0。

现在，假设我想跟踪用户观看视频的次数。这些要求可能听起来很奇怪，但通过观看我只意味着开始/重播。如果用户手动将搜索栏拖到源的开头，则不算数。

这是我最终使用您的所有观点实现它的方式：

const $audio = $('.audio');
$audio.on("play", function() {

  if ($(this).data('once-played')) return; // Do nothing if data exists.

  // Your code here
  console.log("Audio started/replayed");

  // Finally, add a flag.
  $(this).data('once-played', true);
});

$audio.on("ended", function() {
  $(this).data('once-played', false);
});