View Full Version : Unable to stop/reset audio when there are multiple instances

03-05-2013, 03:15 AM
I've got multiple instances of the html5 audio player on my page, and I use the jQuery fadeIn() fadeOut() to determine which song to play. When clicking a link to a different page, I have the current playing sound fade out volume, then stop, then reset progress to 0 seconds, then the page (along with the audio player) fades out and the new page fades in. I'm able to fade out the volume, but I can't reset the timer to 0 seconds for some reason:

$('.link').on('click', function(e){
$('audio').currentTime = 0; /*reset timer*/
displayNone(); /*fade out current page*/
$(this.getAttribute("href")).fadeIn(); /*fade in target page*/

function displayNone() {

function stopAudio() { //fade out any current audio
$('audio').animate({volume: 0}, 1000);
setTimeout(function(){('audio').pause()},1000) /*stop audio after fading out volume*/

$('.sound').on('play', function () {
$('audio').animate({volume: 1}, 100); /*reset volume to 100% after clicking play button on player*/


<a href="page1" class="link">page 1</a>
<a href="page2" class="link">page 2</a>
<a href="page3" class="link">page 3</a>

<div class="pagecontainer">

<div id="page1">
<audio controls class="sound">
<source src="music1.mp3"/>
<source src="music1.ogg"/>

<div id="page2">
<audio controls class="sound">
<source src="music2.mp3"/>
<source src="music2.ogg"/>

<div id="page3">
<audio controls class="sound">
<source src="music3.mp3"/>
<source src="music3.ogg"/>


For example:

- I'm currently on page1, with music1.mp3 playing for 10 seconds
- I click the link to page2 without stopping music1.mp3, and music1.mp3 volume fades out along with with page1, and page2 fades in successfully along with the music player for music2.mp3
- After let's say 10 seconds I click link for page1 to go back to page1
- The player for music1.mp3 is still playing (progress is 20 seconds) and haven't stopped, but now with zero volume

I don't get why music1.mp3 is not resetting its timer to 0 seconds and stopping fully. Is it because ('audio').currentTime=0 is not working? Maybe ('audio').pause() is not working? I can't really tell.