Menu
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.
873
js | stop() Function. The stop() function is an inbuilt function in p5. js library. This function is used to stop the audio on the web which is playing or gonna played.
The jQuery stop() method is used to stop an animation or effect before it is finished. The stop() method works for all jQuery effect functions, including sliding, fading and custom animations.
The pause() method halts (pauses) the currently playing audio. Tip: This method is often used together with the play() method.
play() to Play Audio Files in JavaScript. We can load an audio file in JavaScript simply by creating an audio object instance, i.e. using new Audio() . After an audio file is loaded, we can play it using the . play() function.
You can do something like this:
$('audio').each(function(){
this.pause(); // Stop playing
this.currentTime = 0; // Reset time
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
