Wie kann ich verhindern, dass alle audio-Wiedergabe mithilfe von Jquery
Ich aktualisiere ein div innerhalb einer Seite mit Hilfe von jquery mobile, um zu spielen, einige Animationen.
Die Animationen auch Spiel-sound über die Verwendung von document.createElement('audio');
Mein problem ist, wenn ich die Seite aktualisieren, um eine weitere animation, die den alten sound weiter abgespielt.
Sorry, dies ist meine erste Frage und wenn es scheint, wie im nicht-Phrasierung es richtig, entschuldige ich mich.
Hier ist mein code..
Hier ist der code, der die animation geladen werden, in der #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>Hier ist die Haupt-Seite code. Es wird der Dateiname der animation-Seite geladen werden #animation aus einem array, wenn Sie klicken Sie auf die Schaltfläche weiter.
<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>Wenn ich auf die Schaltflächen vorwärts oder zurück, ich will den Ton von der vorherigen animation geladen #animation um die Wiedergabe zu stoppen..
Hier ist der code gerendert in #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>Jede Hilfe wäre toll..
Dank sehr viel.
beim verlassen einer Seite, verwenden Sie diese
Ok, versuchen
fügen Sie diese und zeigen Sie mir, was Sie erhalten, wenn
ok, versuchen
senden Sie mir eine E-Mail an omarmt[at]gmail.com ich muss sehen, dass die gerenderten code nicht die Quelle.
$(document).on('pagebeforehide', '#pageID', function() { //stop audio }); oder auf das zeigen einer Seite $(document).on('pagebeforeshow', '#pageID', function() { //stop audio });Ok, versuchen
$('audio')[0].pause() - und post-markup #animation nach dem laden.fügen Sie diese und zeigen Sie mir, was Sie erhalten, wenn
console.log($('animation').find('audio')[0]);.ok, versuchen
$('#animation1wl audio').pause() statt $('audio').stop().senden Sie mir eine E-Mail an omarmt[at]gmail.com ich muss sehen, dass die gerenderten code nicht die Quelle.
InformationsquelleAutor David Folksman | 2013-04-10
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie etwas wie das hier tun:
Danke für die Antwort, aber ich kann immer noch nicht bekommen, um zu arbeiten. Wo füge ich diesen code? Ich habe es in den #nächsten block, aber immer noch die Hörspiele, wenn ich auf die nächste animation.
Werden Sie sich bewusst, dass dies einen Fehler auslösen, wenn die das audio-element nicht initialisiert, noch (d.h. keine Abspielposition durch mobile preloading-Richtlinien). Wickeln Sie es in ein try-cath und Sie sollten in Ordnung sein.
Wie Sie code hinzufügen, um Kommentare? >-<! Ich habe versucht, das einfügen dieser code nach der $("#next").klicken Sie(function(e) { aber es nicht tun. Die audio-von der vorherigen animation noch spielt.
Nein ich meine wie ich den code in diesen Kommentaren erscheinen, wie in den grauen Stil Blöcke.
InformationsquelleAutor Niels
Ihad den code neu schreiben, aber ich habe mir diese Arbeit am Ende durch das laden der animation in seiner Gesamtheit, wenn Sie auf die Schaltfläche weiter klicken, anstatt nur die Aktualisierung eines einzigen div.
Es ist ein workaround, aber zumindest seine Arbeitsweise.
Dank Omar, die dazu beigetragen, eine Menge mit diesem problem.
InformationsquelleAutor David Folksman