Geek Answers Handbook

How can I stop playing sound using jQuery

I am updating the div on the page using jQuery mobile to play some animations.

Animations also play sound using document.createElement('audio');

My problem is that when I refresh the page to another animation, the old sound continues to play.

Sorry, this is my first question, and if it seems to me that I am not formulating it correctly, I apologize.

Here is my code ..

Here is the animation code loaded in 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 code for the main page. It gets the name of the animation page file to load into #animation from the array when the next button is clicked.

 <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 press the buttons forward or backward, I want the sound from the previous animation to load into #animation to stop playback.

Here is the code displayed 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.

Thank you very much.

+6
source share
2 answers

I had to rewrite the code, but I got it at the end, fully loading the animation when you click on the next button, and not just refresh one div.

This is a workaround, but at least its work now.

Thanks to Omar, who helped a lot with this problem.

+2
source

You can do something like this:

 $('audio').each(function(){ this.pause(); // Stop playing this.currentTime = 0; // Reset time });
+15
source

More articles:


All Articles