如何使用Jquery停止所有音频播放
我正在使用jquery mobile更新页面中的div以播放一些动画。
动画也通过使用document.createElement('audio');播放声音document.createElement('audio');
我的问题是，当我将页面更新为另一个动画时，旧的声音继续播放。
对不起，这是我的第一个问题，如果我似乎没有正确地说它，我道歉。
这是我的代码..
这是要加载到#animation div中的动画的代码
body { margin: 0px; padding: 0px; } /*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';
这是主页面代码。 当您单击下一个按钮时，它会获取要从数组加载到#animation中的动画页面的文件名。
Problem Loading Resource LNW
当我单击前进或后退按钮时，我希望加载到#animation的上一个动画中的音频停止播放..
这是在#animation中呈现的代码
body { margin: 0px; padding: 0px; } /*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';
任何帮助都会很棒..
非常感谢。
你可以这样做：
$('audio').each(function(){ this.pause(); // Stop playing this.currentTime = 0; // Reset time });
我想重写代码但是，当你点击下一个按钮而不是仅仅更新一个div时，我最终通过加载动画完成了这个工作。
这是一种解决方法，但至少它现在正在工作。
感谢Omar对这个问题提供了很多帮助。