How can i stop all audio playing using Jquery
Solution 1
Ihad to rewrite the code but, I got this working in the end by loading the animation in its entirety when you click on the next button rather than just updating a single div.
It's a workaround but at least its working now.
Thanks to Omar who helped a lot with this problem.
Solution 2
You can do something like this:
$('audio').each(function(){
this.pause(); // Stop playing
this.currentTime = 0; // Reset time
});
David Folksman
Updated on July 09, 2022Comments
-
David Folksman almost 2 years
I'm updating a div in a page using jquery mobile in order to play some animations.
The animations also play sound through use of
document.createElement('audio');
My problem is, when I update the page to another animation, the old sound keeps playing.
Sorry, this is my first question and if it seems like im not phrasing it properly I apologise.
Here is my code..
Here is the code of the animation to be loaded into the #animation div
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <div id="container"></div> <script src="scripts/kinetic-v4.3.2.min.js"></script> <script src="scripts/jquery-1.9.1.js"></script> <script> /*BABY SCENE*/ var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 400 }); var babyLayer = new Kinetic.Layer(); var backLayer = new Kinetic.Layer(); var imageObj = new Image(); var backObj = new Image(); imageObj.onload = function() { var baby = new Kinetic.Image({ x: stage.getWidth() / 2 -100 , y: stage.getHeight() / 2 -100, image: imageObj, width: 200, height: 200, opacity: 0.0 }); var background = new Kinetic.Image({ x: 0, y: 0, image: backObj, width: 578, height: 400, opacity: 0.0 }); // add the shape to the layer babyLayer.add(baby); backLayer.add(background); // add the layer to the stage stage.add(babyLayer); stage.add(backLayer); babyLayer.moveToTop(); babyLayer.draw(); /*ANIMATION TIMELINE * * FIRST EVENT: FADE IN BABY * SECOND EVENT: BABY TRANSITION * THIRD EVENT: FADE IN BACKGROUND */ /*1) Fade in Baby*/ setTimeout(function() { baby.transitionTo({ opacity: 1, duration: 1 }); }, 200); setTimeout(function() { /*JQuery Baby Speech*/ $(document).ready(function() { var babySpeech = document.createElement('audio'); babySpeech.setAttribute('src', '../Animations/sounds/babyspeech.mp3'); babySpeech.setAttribute('autoplay', 'autoplay'); //audioElement.load() $.get(); babySpeech.addEventListener("load", function() { babySpeech.play(); }, true); }); }, 800); /*2) Baby Transition*/ setTimeout(function() { baby.transitionTo({ x: 140, y: stage.getHeight() / 2 + 59, width: 106, height: 118, opacity: 1, duration: 3 }); }, 3000); setTimeout(function() { /*JQuery Baby Giggle*/ $(document).ready(function() { var baby = document.createElement('audio'); baby.setAttribute('src', '../Animations/sounds/baby.mp3'); baby.setAttribute('autoplay', 'autoplay'); //audioElement.load() $.get(); baby.addEventListener("load", function() { baby.play(); }, true); }); }, 3000); /*3) Fade in Background*/ setTimeout(function() { background.transitionTo({ opacity: 1, duration: 3 }); }, 3200); setTimeout(function() { /*Second JQuery Baby Speech*/ $(document).ready(function() { var babySpeech = document.createElement('audio'); babySpeech.setAttribute('src', '../Animations/sounds/babyspeech.mp3'); babySpeech.setAttribute('autoplay', 'autoplay'); //audioElement.load() $.get(); babySpeech.addEventListener("load", function() { babySpeech.play(); }, true); }); }, 8700); }; imageObj.src = '../Animations/images/baby.png'; backObj.src = '../Animations/images/background/babyroom.jpg'; </script>
Here is the main page code. It gets the filename of the animation page to be loaded into #animation from an array when you click the next button.
<div id="nav" data-role="content" style="width: 600px; margin: 0 auto; text-align: center; position: relative; top:450px"> <a href="#animation" data-role="button" data-inline="true" id ="back">Back</a> <a href="#animation" data-role="button" data-inline="true" data-theme="b" id="next">Next</a> <script> var count=0; var link_array = ['baby', 'bed', 'book', 'cat', 'chair', 'daddy', 'dog', 'mummy', 'shoe', 'teddy']; $("#next").click(function(e) { if(count!==9) { $('audio').stop(); count+=1; } $('#animation1wl').load('../Animations/' + link_array[count] + '.html'); $('#animation1wl').trigger('create'); }); $("#back").click(function(e) { if(count !==0) { count-=1; } $('#animation1wl').load('../Animations/' + link_array[count] + '.html'); $('#animation1wl').trigger('create'); }); </script> </div> <div id="animation" data-role="content" style="width: 600px; margin: 0 auto; text-align: left">Problem Loading Resource LNW</div>
When I click the forward or back buttons, I want the audio from the previous animation loaded into #animation to stop playing..
Here is the code rendered inside #animation
<div id="animation1wl" data-role="content" style="width: 600px; margin: 0 auto; text-align: left" class="ui-content" role="main"> <style> body { margin: 0px; padding: 0px; } </style> <div id="container"><div style="position: relative; display: inline-block; width: 578px; height: 400px;" class="kineticjs-content"><canvas width="578" style="width: 578px; height: 400px; position: absolute;" height="400"></canvas><canvas width="578" style="width: 578px; height: 400px; position: absolute;" height="400"></canvas></div></div> <script src="scripts/kinetic-v4.3.2.min.js"></script> <script src="scripts/jquery-1.9.1.js"></script> <script> /*BABY SCENE*/ var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 400 }); var babyLayer = new Kinetic.Layer(); var backLayer = new Kinetic.Layer(); var imageObj = new Image(); var backObj = new Image(); imageObj.onload = function() { var baby = new Kinetic.Image({ x: stage.getWidth() / 2 -100 , y: stage.getHeight() / 2 -100, image: imageObj, width: 200, height: 200, opacity: 0.0 }); var background = new Kinetic.Image({ x: 0, y: 0, image: backObj, width: 578, height: 400, opacity: 0.0 }); // add the shape to the layer babyLayer.add(baby); backLayer.add(background); // add the layer to the stage stage.add(babyLayer); stage.add(backLayer); babyLayer.moveToTop(); babyLayer.draw(); /*ANIMATION TIMELINE * * FIRST EVENT: FADE IN BABY * SECOND EVENT: BABY TRANSITION * THIRD EVENT: FADE IN BACKGROUND */ /*1) Fade in Baby*/ setTimeout(function() { baby.transitionTo({ opacity: 1, duration: 1 }); }, 200); setTimeout(function() { /*JQuery Baby Speech*/ $(document).ready(function() { var babySpeech = document.createElement('audio'); babySpeech.setAttribute('src', '../Animations/sounds/babyspeech.mp3'); babySpeech.setAttribute('autoplay', 'autoplay'); //audioElement.load() $.get(); babySpeech.addEventListener("load", function() { babySpeech.play(); }, true); }); }, 800); /*2) Baby Transition*/ setTimeout(function() { baby.transitionTo({ x: 140, y: stage.getHeight() / 2 + 59, width: 106, height: 118, opacity: 1, duration: 3 }); }, 3000); setTimeout(function() { /*JQuery Baby Giggle*/ $(document).ready(function() { var baby = document.createElement('audio'); baby.setAttribute('src', '../Animations/sounds/baby.mp3'); baby.setAttribute('autoplay', 'autoplay'); //audioElement.load() $.get(); baby.addEventListener("load", function() { baby.play(); }, true); }); }, 3000); /*3) Fade in Background*/ setTimeout(function() { background.transitionTo({ opacity: 1, duration: 3 }); }, 3200); setTimeout(function() { /*Second JQuery Baby Speech*/ $(document).ready(function() { var babySpeech = document.createElement('audio'); babySpeech.setAttribute('src', '../Animations/sounds/babyspeech.mp3'); babySpeech.setAttribute('autoplay', 'autoplay'); //audioElement.load() $.get(); babySpeech.addEventListener("load", function() { babySpeech.play(); }, true); }); }, 8700); console.log($('animation1wl').find('audio')[0]); }; imageObj.src = '../Animations/images/baby.png'; backObj.src = '../Animations/images/background/babyroom.jpg'; </script> </div>
Any help would be great..
Thanks very much.
-
Niels about 11 yearsI was changing my answer in the meanwhile. So it was not up to date yet.
-
David Folksman about 11 yearsThanks for the reply but I still can't get it to work. Where do I insert this code? I put it into the #next block but still the audio plays when I click the next animation.
-
m90 about 11 yearsBe aware that this might throw an error if the the audio element wasn't initialized yet (i.e. no playhead due to mobile preloading policies). Wrap it in a try cath and you should be fine.
-
David Folksman about 11 yearsHow do you add code to comments? >-<! I've tried inserting this code after $("#next").click(function(e) { but it doesnt do anything. The audio from the previous animation still plays.
-
David Folksman about 11 yearsNo I mean how to I make code in these comments appear as you do in the grey styled blocks.
-
Virgiliu about 9 yearsIt would be nice if you'd edit the initial question to include the implementation of your solution.
-
anoldermark about 8 yearsIf you only have one initialised audio you can do: $('audio')[0].pause();