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>에 더 익숙해 볼륨 페이더를 썼다.

통화 yourAudioNode.fadeOut()을 페이드 아웃 후, enableFader(yourAudioNode)하여 <audio>에 그것을 사용하려면, 또는 전화 yourAudioNode.fadeIn()에 페이드.
timeupdate에 대한 수신을 기반으로하므로 더 느린 속도를 지정하지 않으면 주파수가 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에서 devadmin을 사용하여 this page에서 테스트했습니다.

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