Как остановить воспроизведение звука с помощью Jquery
Я обновляю div на странице с помощью jQuery mobile, чтобы воспроизвести некоторые анимации.
анимация также воспроизводит звук с помощью document.createElement('audio');
моя проблема в том, что когда я обновляю страницу до другой анимации, старый звук продолжает играть.
извините, это мой первый вопрос, и если кажется, что я не формулирую его должным образом, я извиняюсь.
вот мой код..
вот код анимации для загрузки в #анимация див
<!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>
вот код главной страницы. Он получает имя файла страницы анимации для загрузки в #animation из массива при нажатии кнопки Далее.
<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>
когда я нажимаю кнопки вперед или назад, я хочу, чтобы звук из предыдущей анимации, загруженной в #animation, прекратил воспроизведение..
вот код, отображаемый внутри #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>
любая помощь будет отличный..
большое спасибо.
2 ответов
вы можете сделать что-то вроде этого:
$('audio').each(function(){
this.pause(); // Stop playing
this.currentTime = 0; // Reset time
});
Ihad переписать код, но, я получил это работает в конце концов, загрузив анимацию в полном объеме, когда вы нажимаете на кнопку Далее, а не просто обновление одного div.
это обходной путь, но, по крайней мере, его работа сейчас.
спасибо Омару, который очень помог с этой проблемой.