如何使用 Jquery 停止所有音频播放 [英] How can i stop all audio playing using Jquery
本文介绍了如何使用 Jquery 停止所有音频播放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 jquery mobile 更新页面中的 div 以播放一些动画.
动画还通过使用document.createElement('audio');
我的问题是，当我将页面更新为另一个动画时，旧声音一直播放.
抱歉，这是我的第一个问题，如果我的措辞似乎不对，我深表歉意.
这是我的代码..
这里是要加载到#animation div中的动画代码
<头><风格>身体 {边距:0px；填充:0px；}</风格><身体><div id="容器"></div><script src="scripts/kinetic-v4.3.2.min.js"></script><script src="scripts/jquery-1.9.1.js"></script><脚本>/*婴儿场景*/var stage = new Kinetic.Stage({容器:'容器'，宽度:578，高度:400});var babyLayer = new Kinetic.Layer();var backLayer = new Kinetic.Layer();var imageObj = new Image();var backObj = new Image();imageObj.onload = 函数(){var baby = new Kinetic.Image({x: stage.getWidth()/2 -100 ,y: stage.getHeight()/2 -100,图像:imageObj，宽度:200，高度:200，不透明度:0.0});var background = new Kinetic.Image({x: 0,y: 0,图像:backObj，宽度:578，高度:400，不透明度:0.0});//将形状添加到图层babyLayer.add(宝贝);backLayer.add(背景);//将图层添加到舞台阶段.添加(婴儿层)；阶段.添加(后层)；babyLayer.moveToTop();babyLayer.draw();/*动画时间线** 第一个事件:淡入婴儿* 第二个事件:婴儿过渡* 第三个事件:背景淡出*//*1) 婴儿淡入淡出*/设置超时(功能(){baby.transitionTo({不透明度:1，持续时间:1});}, 200);设置超时(功能(){/*JQuery婴儿语音*/$(document).ready(function() {var babySpeech = document.createElement('audio');babySpeech.setAttribute('src', '../Animations/sounds/babyspeech.mp3');babySpeech.setAttribute('自动播放', '自动播放');//audioElement.load()$.get();babySpeech.addEventListener("加载", function() {babySpeech.play();}， 真的);});}, 800);/*2) 婴儿过渡*/设置超时(功能(){baby.transitionTo({x: 140,y: stage.getHeight()/2 + 59,宽度:106，身高:118，不透明度:1，持续时间:3});}, 3000);设置超时(功能(){/*JQuery婴儿咯咯笑*/$(document).ready(function() {var baby = document.createElement('audio');baby.setAttribute('src', '../Animations/sounds/baby.mp3');baby.setAttribute('自动播放', '自动播放');//audioElement.load()$.get();baby.addEventListener(加载"，函数(){宝宝玩()；}， 真的);});}, 3000);/*3) 背景淡入淡出*/设置超时(功能(){background.transitionTo({不透明度:1，持续时间:3});}, 3200);设置超时(功能(){/*第二个JQuery婴儿演讲*/$(document).ready(function() {var babySpeech = document.createElement('audio');babySpeech.setAttribute('src', '../Animations/sounds/babyspeech.mp3');babySpeech.setAttribute('自动播放', '自动播放');//audioElement.load()$.get();babySpeech.addEventListener("加载", function() {babySpeech.play();}， 真的);});}, 8700);};imageObj.src = '../Animations/images/baby.png';backObj.src = '../Animations/images/background/babyroom.jpg';这是主页代码.当您单击下一步按钮时，它会从数组中获取要加载到#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><脚本>无功计数=0；var link_array = ['baby', 'bed', 'book', 'cat', 'chair', 'daddy', 'dog', 'mummy', 'shoe', 'teddy'];$("#next").click(function(e) {如果(计数！== 9){$('音频').stop();计数+=1；}$('#animation1wl').load('../Animations/' + link_array[count] + '.html');$('#animation1wl').trigger('create');});$("#back").click(function(e) {如果(计数！==0){计数-=1;}$('#animation1wl').load('../Animations/' + link_array[count] + '.html');$('#animation1wl').trigger('create');});<div id="animation" data-role="content" style="width: 600px; margin: 0 auto; text-align: left">资源加载问题LNW</div>
当我单击前进或后退按钮时，我希望上一个动画中的音频加载到#animation 中以停止播放..
这里是#animation里面渲染的代码
<div id="animation1wl" data-role="content" style="width: 600px; margin: 0 auto; text-align: left" class="ui-content" role="main><风格>身体 {边距:0px；填充:0px；}</风格><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><脚本>/*婴儿场景*/var stage = new Kinetic.Stage({容器:'容器'，宽度:578，高度:400});var babyLayer = new Kinetic.Layer();var backLayer = new Kinetic.Layer();var imageObj = new Image();var backObj = new Image();imageObj.onload = 函数(){var baby = new Kinetic.Image({x: stage.getWidth()/2 -100 ,y: stage.getHeight()/2 -100,图像:imageObj，宽度:200，高度:200，不透明度:0.0});var background = new Kinetic.Image({x: 0,y: 0,图像:backObj，宽度:578，高度:400，不透明度:0.0});//将形状添加到图层babyLayer.add(宝贝);backLayer.add(背景);//将图层添加到舞台阶段.添加(婴儿层)；阶段.添加(后层)；babyLayer.moveToTop();babyLayer.draw();/*动画时间线** 第一个事件:淡入婴儿* 第二个事件:婴儿过渡* 第三个事件:背景淡出*//*1) 婴儿淡入淡出*/设置超时(功能(){baby.transitionTo({不透明度:1，持续时间:1});}, 200);设置超时(功能(){/*JQuery婴儿语音*/$(document).ready(function() {var babySpeech = document.createElement('audio');babySpeech.setAttribute('src', '../Animations/sounds/babyspeech.mp3');babySpeech.setAttribute('自动播放', '自动播放');//audioElement.load()$.get();babySpeech.addEventListener("加载", function() {babySpeech.play();}， 真的);});}, 800);/*2) 婴儿过渡*/设置超时(功能(){baby.transitionTo({x: 140,y: stage.getHeight()/2 + 59,宽度:106，身高:118，不透明度:1，持续时间:3});}, 3000);设置超时(功能(){/*JQuery婴儿咯咯笑*/$(document).ready(function() {var baby = document.createElement('audio');baby.setAttribute('src', '../Animations/sounds/baby.mp3');baby.setAttribute('自动播放', '自动播放');//audioElement.load()$.get();baby.addEventListener(加载"，函数(){宝宝玩()；}， 真的);});}, 3000);/*3) 背景淡入淡出*/设置超时(功能(){background.transitionTo({不透明度:1，持续时间:3});}, 3200);设置超时(功能(){/*第二个JQuery婴儿演讲*/$(document).ready(function() {var babySpeech = document.createElement('audio');babySpeech.setAttribute('src', '../Animations/sounds/babyspeech.mp3');babySpeech.setAttribute('自动播放', '自动播放');//audioElement.load()$.get();babySpeech.addEventListener("加载", function() {babySpeech.play();}， 真的);});}, 8700);console.log($('animation1wl').find('audio')[0]);};imageObj.src = '../Animations/images/baby.png';backObj.src = '../Animations/images/background/babyroom.jpg';任何帮助都会很棒..
非常感谢.
解决方案
我不得不重写代码，但是，当您单击下一个按钮而不是仅仅更新一个单个 div.
这是一种解决方法，但至少现在有效.
感谢 Omar 在这个问题上提供了很多帮助.
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 停止所有音频播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
