jQuery: fadeIn and fadeOut html audio with setInterval()

Question

i'm trying to play an audio and get fadeIn and FadeOut volume when user click into respective buttons. This is my code:

HTML:


<div class="rain-play">
Click to fadeIn sound
</div>

<div class="rain-pause">
Click to fadeOut Sound
</div>

<audio id="dv-rain" preload="auto">
    <source src="http://peterewendy.com.br/Genero/Mp3/ROCK/ACDC_-_Back_In_Black_-_P&W.mp3" type="audio/mpeg" />
</audio>

CSS:

.rain-play {
  display: block;
  background-color: #000;
  color: #fff;
  margin: 2vh;
  padding: 2vh;
  cursor: pointer;
  font-size: calc(14px + 0.5vw);
}

.rain-pause {
  display: block;
  background-color: #000;
  color: #fff;
  margin: 2vh;
  padding: 2vh;
  cursor: pointer;
  font-size: calc(14px + 0.5vw);
}

javascript:

  /* control interval variables */
  var pauseInterval;
  var playInterval;
  
 /* audio variable */
  var audio = $('#dv-rain').get(0);
  

/* Play on Click */
$('.rain-play').unbind().click(function() {
    playInterval = setInterval(fadeInSound, 10); 
    audio.play();
});
/* fadeOut on Click */
$('.rain-pause').unbind().click(function() {
  var pauseInterval = setInterval(fadeOutSound, 10);

});

/* fadeIn function */
function fadeInSound() {
  var volumeControl =  Math.min(audio.volume + 0.01, 1);
  if (volumeControl <= 1.0) {
      audio.volume = volumeControl;
      volumeControl++;
       console.log(volumeControl);
  } else {
    clearInterval(playInterval);
    clearInterval(pauseInterval);
  }
}
/* fadeOut function */
function fadeOutSound() {
  var volumeControl =  Math.min(audio.volume - 0.01, 1);
  if ((volumeControl >= 0.0) && (volumeControl <= 1.0))   {
      audio.volume = volumeControl;
      volumeControl--;
      console.log(volumeControl);
  } else {
    clearInterval(playInterval);
    clearInterval(pauseInterval);
  }
}

But things are not working out the way I would like. The music plays normally but fadeOut and fadeIn effects are disastrous: On click into "fadeIn button" then music plays and on Click into "fadeOut" button (two times?) the fadeOut is executed wrongly.

I would like it to work as well as this example:example fiddle link. But i'm don't need fade scroll function like showed in above example. I need fadeOut and fadeIn audio when user click into buttons.

Can anyone help me fadeOut and fadeIn the music correctly? Here is a example jsFiddle.

Does this one answer your question? https://stackoverflow.com/questions/7451508/html5-audio-playback-with-fade-in-and-fade-out — raddevus, Jun 13 '21 at 20:52
@raddevus Unfortunately not. With this code I receive: "$audio is not defined". I'm using jquery 2.2.4. — V.Salles, Jun 13 '21 at 20:56
Removing '$' from the 'audio' variable and clicking on buttons nothing happens. — V.Salles, Jun 13 '21 at 21:35
thanks @raddevus, your answer helped me to solve the problem. Changed " var audio = $('#dv-rain').get(0);" to "var audio = $('#dv-rain');" — V.Salles, Jun 13 '21 at 21:58

score 0 · Accepted Answer · answered Jun 13 '21 at 22:00

Complete solution:

$(document).ready(function(){
  var audio = $('#dv-rain');
  $('.rain-play').click(function() {
    audio.animate({volume: 1}, 1000, 'swing', function() {
        audio[0].play();
      });
  });
  $('.rain-pause').click(function() {
      audio.animate({volume: 0}, 1000, 'swing', function() {
        // really stop music
        audio[0].pause();
      })
  });
})

jQuery: fadeIn and fadeOut html audio with setInterval()

1 Answers1