Javascript 如何使用Jquery停止所有音频播放
我正在使用jquery mobile更新页面中的一个div，以便播放一些动画 动画还通过使用Javascript 如何使用Jquery停止所有音频播放,javascript,jquery,dom,jquery-mobile,kineticjs,Javascript,Jquery,Dom,Jquery Mobile,Kineticjs,我正在使用jquery mobile更新页面中的一个div，以便播放一些动画 动画还通过使用document.createElement（“音频”）播放声音 我的问题是，当我将页面更新为另一个动画时，旧的声音会继续播放 对不起，这是我的第一个问题，如果我的措辞不恰当，我道歉 这是我的密码 下面是要加载到#animation div中的动画代码 <!DOCTYPE HTML> <html> <head> <style> bod
document.createElement（“音频”）播放声音
我的问题是，当我将页面更新为另一个动画时，旧的声音会继续播放
对不起，这是我的第一个问题，如果我的措辞不恰当，我道歉
这是我的密码
下面是要加载到#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>
身体{
边际：0px；
填充：0px；
}
/*婴儿场景*/
var阶段=新的动力学阶段({
容器：'容器'，
宽度：578，
身高：400
});
var babyLayer=新的动能层（）；
var backLayer=新的dynamic.Layer（）；
var imageObj=新图像（）；
var backObj=新图像（）；
imageObj.onload=函数（）{
var baby=新的动能图({
x:stage.getWidth（）/2-100，
y:stage.getHeight（）/2-100，
图片：imageObj，
宽度：200，
身高：200，
不透明度：0.0
});
var background=新的动能图像({
x:0,，
y:0，
图片：backObj，
宽度：578，
身高：400，
不透明度：0.0
});
//将形状添加到层中
babyLayer.add（baby）；
添加（背景）；
//将层添加到舞台
阶段。添加（babyLayer）；
添加（后台）；
babyLayer.moveToTop（）；
babyLayer.draw（）；
/*动画时间轴
*
*第一件事：淡入婴儿
*第二个事件：婴儿过渡
*第三个事件：背景淡入
*/
/*1） 淡入婴儿*/
setTimeout（函数（）{
宝贝，过渡到({
不透明度：1，
持续时间：1
});
}, 200);
setTimeout（函数（）{
/*JQuery婴儿语音*/
$（文档）.ready（函数（）{
var babySpeech=document.createElement（'audio'）；
setAttribute（'src'，'../Animations/sounds/babySpeech.mp3'）；
setAttribute（'autoplay'，'autoplay'）；
//audioElement.load（）
$.get（）；
babySpeech.addEventListener（“加载”，函数（）{
babySpeech.play（）；
}，对）；
});
}, 800);
/*2） 婴儿过渡期*/
setTimeout（函数（）{
宝贝，过渡到({
x:140，
y:stage.getHeight（）/2+59，
宽度：106，
身高：118，
不透明度：1，
持续时间：3
});
}, 3000);
setTimeout（函数（）{
/*JQuery婴儿咯咯笑*/
$（文档）.ready（函数（）{
var baby=document.createElement（'audio'）；
setAttribute（'src'，'../Animations/sounds/baby.mp3'）；
setAttribute（'autoplay'，'autoplay'）；
//audioElement.load（）
$.get（）；
addEventListener（“加载”，函数（）{
宝贝，玩吧；
}，对）；
});
}, 3000);
/*3） 淡入背景*/
setTimeout（函数（）{
背景。过渡到({
不透明度：1，
持续时间：3
});
}, 3200);
setTimeout（函数（）{
/*第二次JQuery婴儿演讲*/
$（文档）.ready（函数（）{
var babySpeech=document.createElement（'audio'）；
setAttribute（'src'，'../Animations/sounds/babySpeech.mp3'）；
setAttribute（'autoplay'，'autoplay'）；
//audioElement.load（）
$.get（）；
babySpeech.addEventListener（“加载”，函数（）{
babySpeech.play（）；
}，对）；
});
}, 8700);
};
imageObj.src='../Animations/images/baby.png'；
backObj.src='../Animations/images/background/babyrom.jpg'；
这是主页代码。单击“下一步”按钮时，它将从数组中获取要加载到#动画中的动画页面的文件名
<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>
var计数=0；
var link_数组=['baby'，'bed'，'book'，'cat'，'chair'，'daddy'，'dog'，'mummy'，'shoe'，'teddy']；
$（“#下一步”）。单击（函数（e）{
如果（计数！==9）
{
$（'audio'）.stop（）；
计数+=1；
}
$（'#animation1wl'）.load（'../Animations/'+link_数组[count]+'.html'）；
$（'#animation1wl'）。触发器（'create'）；
});
$（“#返回”）。单击（函数（e）{
如果（计数！==0）
{
计数-=1；
}
$（'#animation1wl'）.load（'../Animations/'+link_数组[count]+'.html'）；
$（'#animation1wl'）。触发器（'create'）；
});
加载资源LNW时出现问题
单击“前进”或“后退”按钮时，我希望加载到#动画中的上一个动画中的音频停止播放
下面是动画中呈现的代码
<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>
身体{
边际：0px；
填充：0px；
}
/*婴儿场景*/
var阶段=新的动力学阶段({
容器：'容器'，
宽度：578，
身高：400
});
var babyLayer=新的动能层（）；
var backLayer=新的dynamic.Layer（）；
var imageObj=新图像（）；
var backObj=新图像（）；
imageObj.onload=函数（）{
var baby=新的动能图({
x:stage.getWidth（）/2-100，
y:stage.getHeight（）/2-100，
图片：imageObj，
宽度：200，
身高：200，
不透明度：0.0
});
var background=新的动能图像({
x:0,，
y:0，
图片：backObj，
宽度：578，
身高：400，
不透明度：0.0
});
//将形状添加到层中
babyLayer.add（baby）；
添加（背景）；
//将层添加到舞台
阶段。添加（babyLayer）；
添加（后台）；
babyLayer.moveToTop（）；
babyLayer.draw（）；
/*动画时间轴
*
*第一件事：淡入婴儿
*第二件事
$('audio').each(function(){
this.pause(); // Stop playing
this.currentTime = 0; // Reset time
});