Различайте начало звука и воспроизведение звука (после паузы) в HTML5 <audio>

Question

Как добавить слушателя при запуске аудио / видео?

Я могу сделать это следующим образом:

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

, где $ audio - это jQuery объект, представляющий отдельный аудио элемент DOM .

но он также запустится, когда мы возобновим видео. Я хочу, чтобы он запускался только при запуске.

Один из способов, которым я могу это сделать, это:

$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, если мы сделаем это за доли секунды. Но после прочтения комментариев @reedn-m, @ roko- c -buljan, @ rory-mccrossan я понял, что никогда не будет возможным, чтобы 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);
});