Воспроизведение звука определенное количество раз с помощью проигрывателя JS на моей HTML-странице

Question

Я хочу, чтобы звук воспроизводился 3 раза, а затем останавливался на моей html-странице, он продолжает циклически повторяться, если я включаю loop в true, или воспроизводит 1x, если он ложный.

Мой код выглядит сейчас так, может кто-нибудь посоветовать?

var popupAudioPlayer = document.getElementById('popup_sound');
scene.on("enter", function (event) {
    popupAudioPlayer.currentTime = 0;
    popupAudioPlayer.loop = true;
    popupAudioPlayer.playthroughs = 3;
    popupAudioPlayer.play()
});

Answer 1

Элемент html audio не предоставляет какого-либо атрибута для определения количества раз, которое он должен воспроизводить аудио.

Один из способов решить эту проблему - использовать счетчик и подключить прослушиватель событий к ended событие элемента html audio.Каждый раз, когда воспроизведение заканчивается, слушатель события будет выполняться, где вы можете уменьшить счетчик и снова воспроизвести аудио.

Как только счетчик достигнет 0, вы удаляете прослушиватель событий.

Как это:

var popupAudioPlayer = document.getElementById('popup_sound');
var scene = document.getElementById('scene');

scene.addEventListener("click", function (event) {
    let counter = 3;
    
    const customPlay = function() {      
      popupAudioPlayer.play();
      counter--;
      
      if (counter === 0) {
        popupAudioPlayer.removeEventListener('ended', customPlay);
      }
    };
    
    popupAudioPlayer.addEventListener('ended', customPlay);
    
    popupAudioPlayer.currentTime = 0;
    popupAudioPlayer.loop = false;    
    customPlay();
});

<button id="scene">
  Play me 3 times
</button>

<audio 
  id="popup_sound"
  src="https://www.soundeffectsplus.com/uploads/prod_audio/41802331_bow-arrow-hit-target-01.mp3" />