如何使用 Jquery 停止所有音频播放
Posted
技术标签:
【中文标题】如何使用 Jquery 停止所有音频播放【英文标题】：How can i stop all audio playing using Jquery 【发布时间】：2013-04-02 13:24:41 【问题描述】：我正在使用 jquery mobile 更新页面中的 div 以播放一些动画。
动画还通过使用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
);
// 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 style="width: 578px; height: 400px; position: absolute;" ></canvas><canvas style="width: 578px; height: 400px; position: absolute;" ></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>
任何帮助都会很棒..
非常感谢。
【问题讨论】：
离开页面时，使用此$(document).on('pagebeforehide', '#pageID', function() //stop audio ); 或在显示页面时使用$(document).on('pagebeforeshow', '#pageID', function() //stop audio );
好的，试试$('audio')[0].pause() 并在加载后发布#animation 的标记。
添加这个并告诉我如果console.log($('animation').find('audio')[0]);，你会得到什么。
好的，试试$('#animation1wl audio').pause() 而不是$('audio').stop().
给我发一封电子邮件到 oarmt[at]gmail.com 我需要查看呈现的代码而不是源代码。
【参考方案1】：
你可以这样做：
$('audio').each(function()
this.pause(); // Stop playing
this.currentTime = 0; // Reset time
);
【讨论】：
同时我正在改变我的答案。所以它还不是最新的。 感谢您的回复，但我仍然无法正常工作。我在哪里插入此代码？我把它放到#next 块中，但是当我点击下一个动画时，音频仍然会播放。 请注意，如果音频元素尚未初始化（即由于移动预加载策略而没有播放头），这可能会引发错误。把它包在试管里，你应该没问题。 如何向 cmets 添加代码？ >- 不，我的意思是如何让这些 cmets 中的代码像您在灰色样式的块中一样显示。【参考方案2】：我不得不重写代码，但是，当您单击下一个按钮时，我最终通过加载整个动画而不是仅更新单个 div 来完成此工作。
这是一种解决方法，但至少现在可以使用。
感谢 Omar 在这个问题上提供了很多帮助。
【讨论】：
如果您能编辑最初的问题以包含解决方案的实施，那就太好了。以上是关于如何使用 Jquery 停止所有音频播放的主要内容，如果未能解决你的问题，请参考以下文章