本文介绍了我如何停止使用Jquery的所有音频播放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
动画也可以通过使用 document.createElement（'audio'）;
我的问题是，当我将页面更新为另一个动画时，旧的声音继续播放
对不起，这是我的第一个问题，如果它似乎没有正确地表达我的道歉。
这是我的代码..
这里是要加载到#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
}）;
//将形状添加到图层
babyLayer.add（宝贝）;
backLayer.add（background）;
//将图层添加到舞台
stage.add（babyLayer）;
stage.add（backLayer）;
babyLayer.moveToTop（）;
babyLayer.draw（）;
/ *动画时间线
*
*第一件事：宝贝淡定
*第二件事：BABY TRANSITION
*第三件事：FADE IN BACKGROUND
* /
/ * 1）淡入宝贝* /
setTimeout（function（）{
baby.transitionTo（{
opacity：1，
持续时间：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）婴儿过渡* /
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）淡入背景* /
setTimeout（function（）{
background.transitionTo（{
opacity：1，
duration： 3
}）;
}，3200）;
setTimeout（function（）{
/ * Second JQuery Baby Speech * /
$（document）.ready（function（）{
var babySpeech = 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>
主页代码。当您点击下一个按钮时，它将从数组中获取动画页面的文件名。
div id =navdata-role =contentstyle =width：600px; margin：0 auto; text-align：center; position：relative; top：450px>
< a href =＃animationdata-role =buttondata-inline =trueid =back>返回< / a>
< a href =＃animationdata-role =buttondata-inline =truedata-theme =bid =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'）。 ）;
}）;
< / script>
< / div>
< div id =animationdata-role =contentstyle =width：600px; margin：0 auto; text-align：left>问题加载资源LNW< / div> ;
当我点击前进或后退按钮时，我希望将上一个动画的音频加载到#animation停止播放..
这里是#animation中提供的代码
< div id =animation1wldata-role =contentstyle =width：600px; margin：0 auto; text-align：leftclass =ui-contentrole =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 =578style =width：578px; height：400px; position：absolute; height =400>< / canvas>< canvas width =578style =width：578px; height：400px; position：absolute;高度= 400 >< /画布>< / 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
}）;
//将形状添加到图层
babyLayer.add（宝贝）;
backLayer.add（background）;
//将图层添加到舞台
stage.add（babyLayer）;
stage.add（backLayer）;
babyLayer.moveToTop（）;
babyLayer.draw（）;
/ *动画时间线
*
*第一件事：宝贝淡定
*第二件事：BABY TRANSITION
*第三件事：FADE IN BACKGROUND
* /
/ * 1）淡入宝贝* /
setTimeout（function（）{
baby.transitionTo（{
opacity：1，
持续时间：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）婴儿过渡* /
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）淡入背景* /
setTimeout（function（）{
background.transitionTo（{
opacity：1，
duration： 3
}）;
}，3200）;
setTimeout（function（）{
/ * Second JQuery Baby Speech * /
$（document）.ready（function（）{
var babySpeech = 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>
任何帮助都会很好..
非常感谢
解决方案
我要重写代码，但是我最后通过将动画加载到当您点击下一个按钮而不是仅更新一个div时，您的整体。
这是一个解决方法，但至少现在工作。
感谢奥马尔谁帮助了很多这个问题。
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.
解决方案
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.
It's a workaround but at least its working now.
Thanks to Omar who helped a lot with this problem.
这篇关于我如何停止使用Jquery的所有音频播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！