Estoy actualizar un div en una página usando jquery mobile con el fin de reproducir algunas animaciones.

Las animaciones también reproducir sonido a través del uso de document.createElement('audio');

Mi problema es que cuando actualizo la página a la otra, la animación, el sonido antiguo se mantiene la reproducción.

Lo siento, esta es mi primera pregunta y si le parece que no soy el fraseo correctamente pido disculpas.

Aquí está mi código..

Aquí está el código de la animación para ser cargado en el #animación 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>

Aquí está el principal código de la página. Obtiene el nombre de archivo de la animación de la página que se carga en #animación a partir de una matriz cuando usted haga clic en el botón siguiente.

<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>

Cuando hago clic en los botones de avance o retroceso, quiero el audio de la anterior animación de carga en la #animación a dejar de jugar..

Aquí está el código prestados dentro de #animación

<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>

Cualquier ayuda sería genial..

Muchas gracias.

al salir de una página, utilice este $(document).on('pagebeforehide', '#pageID', function() { //stop audio }); o en mostrar una página $(document).on('pagebeforeshow', '#pageID', function() { //stop audio });
Ok, intentar $('audio')[0].pause() y publicar el marcado de #animation después de la carga.
agregar esta y me muestran lo que se obtiene si console.log($('animation').find('audio')[0]);.
ok intentar $('#animation1wl audio').pause() en lugar de $('audio').stop().
envíeme un correo electrónico a omarmt[en]gmail.com necesito ver el renderizado de código de la fuente.

OriginalEl autor David Folksman | 2013-04-10

2 Comentarios

  1. 19

    Puede hacer algo como esto:

    $('audio').each(function(){
    this.pause(); //Stop playing
    this.currentTime = 0; //Reset time
    }); 
    Yo estaba cambiando mi respuesta en el mientras tanto. Así que no fue hasta la fecha todavía.
    Gracias por la respuesta, pero todavía no puedo conseguir que funcione. Donde puedo insertar este código? Lo puse en la #siguiente bloque, pero todavía el audio se reproduce cuando hago clic en el siguiente animación.
    Ser conscientes de que esto puede producir un error si el elemento de audio no fue inicializado aún (es decir, no hay cursor de reproducción debido a móviles precarga de políticas). Se envuelve en un intento de cath y usted debería estar bien.
    ¿Cómo agregar código a los comentarios? >-<! He intentado insertar este código después de que $(«#next»).click(function(e) { pero no hace nada. El audio de la animación anterior todavía juega.
    No me refiero a ¿cómo puedo hacer que el código sea en estos comentarios aparecen, como en el gris de estilo de bloques.

    OriginalEl autor Niels

  2. 2

    Ihad a reescribir el código, pero, tengo esta trabajando en la final por la carga de la animación en su totalidad cuando usted haga clic en el botón siguiente en vez de sólo la actualización de un solo div.

    Es una solución, pero al menos su trabajo ahora.

    Gracias a Omar que me ayudó mucho con este problema.

    Sería bueno si quieres editar la pregunta inicial para incluir la implementación de su solución.

    OriginalEl autor David Folksman

Dejar respuesta

Please enter your comment!
Please enter your name here