Javascript缓慢减少音频元素的音量

javascript slowly decrease volume of audio element

本文关键字：元素 音频 缓慢 Javascript      更新时间：2023-09-26

audio元素播放音量:

audio.setVolume(.20)

在某一点上，我想要淡出音量，而不是让它突然被切断，所以本质上我想要

audio.setVolume(.15)
audio.setVolume(.10)
audio.setVolume(.05)
audio.setVolume(.03)
audio.setVolume(.01)

但是在这些变化之间需要一些非常短暂的延迟，这样它们是可听到的，我得到了我的淡出效果。正确的做法是什么?

谢谢!

你可以使用setInterval():

// Initial volume of 0.20
// Make sure it's a multiple of 0.05
var vol = 0.20;
var interval = 200; // 200ms interval
var fadeout = setInterval(
  function() {
    // Reduce volume by 0.05 as long as it is above 0
    // This works as long as you start with a multiple of 0.05!
    if (vol > 0) {
      vol -= 0.05;
      audio.setVolume(vol);
    }
    else {
      // Stop the setInterval when 0 is reached
      clearInterval(fadeout);
    }
  }, interval);

我会将setTimeout包装在函数内部，以及选项。对于这个因子，0.01将是一个安全的值，您不必知道或调整初始值。

function fadeVolume(volume, callback)
{
    var factor  = 0.01,
        speed   = 50;
    if (volume > factor)
    {
        setTimeout(function(){
            fadeVolume((audio.volume -= factor), callback);         
        }, speed);
    } else {
        (typeof(callback) !== 'function') || callback();
    }
}
fadeVolume(audio.volume, function(){
    console.log('fade complete');
});

一旦淡出完成，它将触发一个回调，您可以使用它来播放下一首歌曲。

你也可以使用这个鼠标键事件。

audio.on('keydown', function() {
// and here keep increasing or decreasing the volume, untill keyUp
})

作为查看，它是jQuery!你可以在工作中使用它。此外，音频标签是为div，其中包含音频标签!

相关文章：