JavaScript медленно уменьшает громкость аудиоэлемента

Question

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

audio.setVolume(.20)

В определенный момент я хочу уменьшить громкость, а не резко ее обрезать, поэтому по сути я хочу

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

но между этими изменениями должна быть небольшая задержка, чтобы они были слышны, и я получил эффект затухания.Как правильно это сделать?

спасибо!

Answer 1

Вы можете использовать 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);

Answer 2

Я бы обернул 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');
});

После завершения затухания будет запущен обратный вызов, который вы можете использоватьпроиграть следующую песню.

Answer 3

Вы также можете использовать это событие мыши.

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

Пока просматривается, его jQuery!Вы можете использовать его для своей работы.Кроме того, аудио-тег предназначен для div, который содержит аудио-тег!