CODEWITHSUNDEEP
javascriptjqueryaudiojquery-animatefadein
user6515939
user6515939

Reputation: 63

Play/pause music with fade in/fade out with javascript

I want to have two divs for play and pause of the mp3 file, so when you click "play" the sound fades in and when you click "pause" the sound fades out. Audio must be looped, but without autoplay (music shouldn't play until user clicks "play" button (div).

Tried .animate({volume: 0.0}, 1000); but couldn't make it work altogether with loop. I've searched for solution a lot, but haven't find anything that fits my goal...

Upvotes: 2

Views: 3084

Answers (1)

user6515939
user6515939

Reputation: 63

I finally made it this way:

$(document).ready(function() {

  $('#tone').prop("volume", 0.0);

  $('.play').click(function() {   
    $('#tone').animate({volume: 1.0}, 1500);
  });

  $('.pause').click(function() {   
    $('#tone').animate({volume: 0.1}, 1500);
  });

});

and

<audio id="tone" preload="auto" src="tone-2.mp3" autoplay loop></audio>

So I actually have the song playing from the start, but muted until "play" is clicked.

Upvotes: 3

Related Questions