如何使用 Jquery 停止所有音频播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15930328/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i stop all audio playing using Jquery
提问by David Folksman
I'm updating a div in a page using jquery mobile in order to play some animations.
我正在使用 jquery mobile 更新页面中的 div 以播放一些动画。
The animations also play sound through use of document.createElement('audio');
动画还通过使用 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
这是要加载到#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.
这是主页面代码。当您单击下一步按钮时，它会从数组中获取要加载到#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>
When I click the forward or back buttons, I want the audio from the previous animation loaded into #animation to stop playing..
当我单击前进或后退按钮时，我希望上一个动画中的音频加载到 #animation 中以停止播放..
Here is the code rendered inside #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>
Any help would be great..
任何帮助都会很棒..
Thanks very much.
非常感谢。
采纳答案by David Folksman
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.
我不得不重写代码，但是，当您单击下一个按钮而不是仅更新单个 div 时，我最终通过加载整个动画来完成这项工作。
It's a workaround but at least its working now.
这是一种解决方法，但至少现在可以正常工作。
Thanks to Omar who helped a lot with this problem.
感谢 Omar 在这个问题上提供了很多帮助。
回答by Niels
You can do something like this:
你可以这样做：
$('audio').each(function(){
this.pause(); // Stop playing
this.currentTime = 0; // Reset time
});
