Howler.js

Question

如何在声音衰减完成（衰减目标音量 = 0.3）时自动触发事件 sound.stop() 并在音量达到时立即显示警报弹出窗口 window 0.6？

<!DOCTYPE html>
<script src="https://rawgit.com/goldfire/howler.js/master/src/howler.core.js"></script>
<button onclick="Play()">Play</button>
<button onclick="StartFade()">Fade</button>

<script>
var sound = new Howl({
src: ['https://howlerjs.com/assets/howler.js/examples/player/audio/rave_digger.webm']});

function Play() sound.play();
function StartFade() sound.fade(1, 0.3, 2000);
</script>

Answer 1

.fade() 方法在完成时触发 "fade" 事件。您可以将侦听器附加到声音对象

sound.on('fade', function(){
  console.log('#Faded!!');
});

或者，您可以在创建新的 Howl 时设置 onFade() 方法。

var sound = new Howl({
  src: ['https://howlerjs.com/assets/howler.js/examples/player/audio/rave_digger.webm'],
  onFade: function(){
    //stuff goes here!
  }

});

为了在音量达到 0.6 时显示警报，您可以链接回调，因此第一个淡入淡出方法实际上只是从 1 到 0.6，然后在事件侦听器中，弹出警报，然后从0.6 到 0.3

使用 onFade() 和 onVolume() 方法，您也可以这样写，尽管它会在音量设置为 0.6 时发出此警报，无论是否淡入淡出。

onVolume: function(){
  if (this.volume == 0.6)
    alert("Volume is currently 0.6!");
}

Howler.js - 当声音结束衰减或音量改变时触发事件

Howler.js - Fire events when sound finishes fading or volume has changed

javascript