Jquery - 淡入淡出後的音頻

Question

在我的程序中，我在開始屏幕上有背景音樂。此功能用於在點擊開始按鈕後淡出我的背景聲音。

$(bgMusic).on('timeupdate', function() { 
    var vol = 1, 
     interval = 250; 
    if (bgMusic.volume == 1) { 
     var intervalID = setInterval(function() { 
      if (vol > 0) { 
       vol -= 0.05; 
       bgMusic.volume = vol.toFixed(2); 
      } else { 
       clearInterval(intervalID); 
      } 
     }, interval); 
    } 
}); 

我現在已經添加了一個重啓按鈕，帶您回到開始界面，所以我需要以相同的速度淡出音樂回去。我已經嘗試了幾件事，但他們不工作，有人可以幫助我嗎？

我需要的東西沿着這些路線：

$(bgMusic).off('timeupdate', function() { 
    var vol = 0, 
     interval = 250; 
    if (bgMusic.volume == 0) { 
     var intervalID = setInterval(function() { 
      if (vol < 0) { 
       vol += 0.05; 
       bgMusic.volume = vol.toFixed(2); 
      } else { 
       clearInterval(intervalID); 
      } 
     }, interval); 
    } 
}); 

Answer 1

可能有更好的方法來做到這一點，但我只是寫了一個音量推子，以獲得更習慣於<audio>。

要通過enableFader(yourAudioNode)啓用它在你的<audio>，然後淡出呼叫yourAudioNode.fadeOut()，或在通話yourAudioNode.fadeIn()褪色。
它基於監聽時間更新所以除非您指定較慢的速率，否則它將以頻率explained here更改音量。

function enableFader(node, per_step, min_interval) { 
    'use strict'; 
    var fadeOut, fadeIn; 
    node.fadeSettings = { 
     dir : 0, 
     step : per_step || 0.05, 
     interval : min_interval || 0.150, 
     lastTime : -Infinity 
    }; 
    fadeOut = function fadeOut() { 
     var vol = this.volume, 
      settings = this.fadeSettings, 
      ctime = this.currentTime, 
      dtime = Math.abs(ctime - settings.lastTime); 
     if (settings.dir === -1 && dtime >= settings.interval && vol > 0) { 
      settings.lastTime = ctime; 
      this.volume = (vol - settings.step).toFixed(2); 
     } else if (vol <= 0 || settings.dir !== -1) { 
      this.removeEventListener('timeupdate', fadeOut); 
      settings.dir = 0; 
     } 
    }; 
    fadeIn = function fadeIn() { 
     var vol = this.volume, 
      settings = this.fadeSettings, 
      ctime = this.currentTime, 
      dtime = Math.abs(ctime - settings.lastTime); 
     if (settings.dir === 1 && dtime >= settings.interval && vol < 1) { 
      settings.lastTime = ctime; 
      this.volume = (vol + settings.step).toFixed(2); 
     } else if (vol >= 1 || settings.dir !== 1) { 
      this.removeEventListener('timeupdate', fadeIn); 
      settings.dir = 0; 
     } 
    }; 
    node.fadeOut = function() { 
     this.fadeSettings.dir = -1; 
     this.addEventListener('timeupdate', fadeOut, false); 
    }; 
    node.fadeIn = function() { 
     this.fadeSettings.dir = 1; 
     this.addEventListener('timeupdate', fadeIn, false); 
    }; 
} 

我使用Google Chrome中的我的開發控制檯在this page上測試了它。

var a = document.getElementById('song'); 
enableFader(a); 
a.fadeOut(); 
// a.fadeIn();