Question

我想让声音播放3次，然后在我的html页面中停止播放，如果我启用loop为true，它会一直循环播放；如果为false，它会播放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元素不提供任何属性来确定应播放音频的次数。

解决此问题的一种方法是使用计数器，并将事件侦听器附加到html ended元素的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" />

在我的HTML页面中使用JS播放器播放声音一定次数

1 个答案: