使用 jQuery 实现音频淡入淡出

Question

I'm trying to fade in and fade out but I don't know what's wrong in my code. Fade in works but fade out does not.

Below the code:

        var mPlayer = document.getElementById("pad-c");
        $(mPlayer).prop("volume", 0.0);

        var isPlaying = false;

        function playAudio() { 
            mPlayer.play(); 
            isPlaying = true;
        } 

        function pauseAudio() { 
            mPlayer.pause();
            isPlaying = false;
        } 
        function playPauseC() {
          if (isPlaying == true) {
            $(mPlayer).animate({volume: 0.1}, 5000);
            pauseAudio();
          } else {
            $(mPlayer).animate({volume: 1.0}, 5000);
            playAudio();
          }
        }

Answer 1

Right now you are pausing the audio at the same time as the fadeout. Use the complete parameter on .animate() to pause the audio after the fadeout is complete.

function playPauseC(){
  if(isPlaying == true) {
    $(mPlayer).animate({volume: 0.1}, 5000, function() {
      pauseAudio();
    });
  } else {
    $(mPlayer).animate({volume: 1.0}, 5000);
    playAudio();
  }
}