html - Fade out of a Mp3 song using javascript -

i'm trying create html file javascript embedded allows me press button , begin fade out of song. i've managed working play song (which start). i've been playing around second function try , reduce volume , setting delay on function can please ?!

<audio id="myaudio"  <source src="1.mp3"          type='audio/mp4'> </audio> <button type="button" onclick="aud_play()">play</button> <button type="button" onclick="aud_fade()">fade</button>  <script> var vol = myaudio.volume; var timer; function aud_play() {   var myaudio = document.getelementbyid("myaudio");     myaudio.play();  }  function aud_fade(){  var myaudio = document.getelementbyid("myaudio");  if (vol > 0) {     vol = vol - 0.2 ; } timer = settimeout(aud_fade,2); } </script> 

a couple things seem need addressing ;)

first off, in example provided, have not closed audio tag.

second, setting global vol var , not volume of audio object itself.

what try keeping things scoped function , use actual audio object volume rather 'global' vol var:

<script>     function aud_play() {         var myaudio = document.getelementbyid("myaudio");         myaudio.play();     }      function aud_fade(){         var timer,             myaudio = document.getelementbyid("myaudio");         if (myaudio.volume > 0) {             myaudio.volume -= 0.005;             timer = settimeout(aud_fade,5);         }     } </script>  <audio id="myaudio">     <source src="1.mp3" type='audio/mp4'> </audio> <button type="button" onclick="aud_play()">play</button> <button type="button" onclick="aud_fade()">fade</button> 

i have adjusted timeout , volume amount decrease, volume 0 1. reducing 0.2 (20 percent) every 2 thousands of second 'fade out' in 0.1 of second!

here above in fiddle.

you may want consider resetting audio currenttime , volume when fade completes or when click play again (note: there no stop method, pause , currenttime can achieve same thing):

<script>      var fadetimer = false;      var aud_play = function() {         cleartimeout(fadetimer);         var myaudio = document.getelementbyid("myaudio");         myaudio.volume = 1;         myaudio.currenttime = 0;         myaudio.play();     }      var aud_fade = function() {         var myaudio = document.getelementbyid("myaudio");         if (myaudio.volume > 0.005) {             myaudio.volume -= 0.005;             fadetimer = settimeout(aud_fade,5);         } else {             myaudio.volume = 0;             myaudio.pause();             myaudio.currenttime = 0;         }     } </script>  <audio id="myaudio">     <source src="1.mp3" type='audio/mp4'> </audio> <button type="button" onclick="aud_play()">play</button> <button type="button" onclick="aud_fade()">fade</button> 

here above example in fiddle.

hope helps!

edit:

regarding fade in, replicate 'aud_fade' method increase volume when less 1 rather decrease when greater 0, call fade in method on start method:

var aud_play = function() {     cleartimeout(fadetimer);     var myaudio = document.getelementbyid("myaudio");     myaudio.volume = 0; // 0 not 1, can fade in     myaudio.currenttime = 0; // set mp3 play positon begining     myaudio.play(); // start mp3     aud_fade_in(); // call fade in method };  var aud_fade_in = function() {     cleartimeout(fadetimer);     var myaudio = document.getelementbyid("myaudio");     if (myaudio.volume < 9.995) {         myaudio.volume += 0.005;         fadetimer = settimeout(aud_fade_in,10);     } else {         myaudio.volume = 1;     } };  var aud_fade_out = function() {     cleartimeout(fadetimer);     var myaudio = document.getelementbyid("myaudio");     if (myaudio.volume > 0.005) {         myaudio.volume -= 0.005;         fadetimer = settimeout(aud_fade_out,5);     } else {         myaudio.volume = 0;         myaudio.pause();         myaudio.currenttime = 0;     } }; 

here above in fiddle.