Come posso smettere tutti di riproduzione audio utilizzando Jquery

Sto aggiornando un div in una pagina utilizzando jquery mobile per giocare alcune animazioni.

Le animazioni anche riprodurre l’audio attraverso l’uso di document.createElement('audio');

Il mio problema è che quando aggiorno la pagina per l’animazione, il suono antico continua a giocare.

Scusa, questa è la mia prima domanda e se sembra che im non fraseggio correttamente mi scuso.

Ecco il mio codice..

Qui è il codice dell’animazione a essere caricato #animazione 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>

Ecco la pagina principale codice. Ottiene il nome del file di animazione pagina caricata in #animazione da un array quando si fa clic sul pulsante avanti.

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

Quando clicco i pulsanti avanti o indietro, voglio l’audio dal precedente animazione caricato in #animazione per smettere di giocare..

Qui è il codice di rendering all’interno di #animazione

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

Qualsiasi aiuto sarebbe grande..

Grazie molto.

quando si esce da una pagina, utilizzare questo $(document).on('pagebeforehide', '#pageID', function() { //stop audio }); o mostrando una pagina $(document).on('pagebeforeshow', '#pageID', function() { //stop audio });
Ok, prova $('audio')[0].pause() e post il codice di #animation dopo il caricamento.
aggiungere questo e mi mostra quello che si ottiene se console.log($('animation').find('audio')[0]);.
ok provare $('#animation1wl audio').pause() invece di $('audio').stop().
mandami una mail a omarmt[a]gmail.com ho bisogno di vedere il rendering di codice e non la fonte.

OriginaleL’autore David Folksman | 2013-04-10

2 risposte

  1. 19

    Si può fare qualcosa di simile a questo:

    $('audio').each(function(){
        this.pause(); //Stop playing
        this.currentTime = 0; //Reset time
    }); 
    Stavo cambiando la mia risposta, nel frattempo. Così non è stato aggiornato di sicurezza.
    Grazie per la risposta ma ancora non riesco a farlo funzionare. Dove devo inserire questo codice? L’ho messo in #blocco successivo, ma ancora l’audio viene riprodotto quando clicco l’animazione successiva.
    Essere consapevoli che questo potrebbe generare un errore se l’elemento audio non è stato ancora inizializzato (vale a dire di no indicatore di riproduzione a causa di mobile precarico politiche). Avvolgere in una prova di cath e dovresti essere a posto.
    Come si fa ad aggiungere il codice per i commenti? >-<! Ho provato a inserire questo codice dopo $(“#”).click(function(e) { ma non fare nulla. L’audio dai precedenti animazione gioca ancora.
    Non voglio dire come faccio a rendere il codice in questi commenti vengono visualizzati in grigio in stile blocchi.

    OriginaleL’autore Niels

  2. 2

    Ihad di riscrivere il codice, ma ho ottenuto questo lavoro, alla fine, per caricare l’animazione nella sua interezza quando si fa clic sul pulsante avanti, piuttosto che un semplice aggiornamento di un unico div.

    È una soluzione, ma almeno il suo lavoro.

    Grazie a Omar che ha aiutato molto con questo problema.

    Sarebbe bello se devi modificare la domanda iniziale per includere l’implementazione della soluzione.

    OriginaleL’autore David Folksman

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *