Audio in finestra modale ed interruzione alla chiusura

[Lu86]

Buonasera a tutti, mi chiamo Luciano e sono nuovo in questo forum. Premetto che sono un neofita in ambito javascript. Arrivo al dunque;
nella realizzazione di un sito web, ho inserito un pulsante all'interno di una finestra modale creata con lightbox che mi permette di ascoltare un'anteprima audio. Vorrei che alla chiusura di questa finestra (o tramite icona X o tramite un click al di fuori) si interrompesse la riproduzione dell'audio senza dover premere "stop". Vi sarei grato se riusciste a darmi una mano perchè sicuramente ci sarà da scrivere qualche riga di script.
Grazie 1000.

 

[Tommy03]

Posta il codice che stai usando

 

[Lu86]

Ciao Tommy03, grazie per la risposta e ti ringrazio anticipatamente se puoi darmi una mano.
Ti indico il codice della finestra modale, non so se posso a livello di forum linkarti il sito per vederlo in azione.

<!-- FINESTRA MODALE LIGHTBOX -->

    <div id="project-1" class="lightbox-basic zoom-anim-dialog mfp-hide">

        <div class="row">

            <button title="Close (Esc)" type="button" class="mfp-close x-button">×</button>

            <div class="col-lg-8">

                <img class="img-fluid" src="assets/img/audiolibri/1.jpg" alt="alternative">

            </div> <!-- end of col -->

            <div class="col-lg-4">

                <h3>AXL ROSE</h3>

                <hr class="line-heading">

                <h6>Il frontman dei Guns N' Roses</h6>

                <p>La voce dei Guns n’Roses si racconta nella storica intervista a Rolling Stone: «I Guns n’Roses mi hanno salvato la vita. Io sono sempre stato un tipo maniaco-depressivo, e senza la band non sarei riuscito a vivere a lungo: troppo autodistruttivo. Penso che i miei problemi derivino dal fatto che quando ero bambino mio padre [mi ha stuprato]... Credo proprio che alla fine tutti i miei problemi derivino da questo». «Sono stato in prigione parecchie volte... anche per reati che non avevo commesso. Credo che questo dipenda dalla mia capacità di cacciarmi nei guai».</p>

              

                <div class="aa-agent-social">

                <audio class="traccia-audio" src="assets/audio/audio.mp3" type="audio/mp3"></audio>

                <i class="audio-btn fa fa-play-circle audio-play" aria-hidden="true"></i>

                </div>

              

                <a class="btn-lightbox" href="#"><i class="lni-cart"></i> ACQUISTA SU AUDIBLE</a>

                <a class="btn-lightbox" href="#"><i class="lni-cart"></i> ACQUISTA SU STORYTELL</a>


            </div> <!-- end of col -->

        </div> <!-- end of row -->

    </div> <!-- end of lightbox-basic -->

    <!-- end of lightbox -->




<!-- AL CLICK SUL TASTO PLAY INIZIA LA RIPRODUZIONE E APPARE IL TASTO STOP PER INTERROMPERE MANUALMENTE -->

  <script>

         var elementiPreview = document.querySelectorAll('.aa-agent-social');

         elementiPreview.forEach(function(me){

            me.querySelector('.audio-btn').addEventListener('click',function(){

               var curPreview = this.parentNode;

               elementiPreview.forEach(function(preview){

                  var cls = preview.querySelector('.audio-btn').classList;

                  var trc = preview.querySelector('.traccia-audio')

                

                  if (preview === curPreview && trc.paused) {

                  console.log('ok')

                     cls.remove('fa-play-circle', 'audio-play');

                     cls.add('fa-stop-circle', 'audio-stop');

                     trc.play();

                  } else {

                     cls.remove('fa-stop-circle', 'audio-stop');

                     cls.add('fa-play-circle', 'audio-play');

                     trc.pause();

                     trc.currentTime = 0;

                  }                 

               });

            });

         });

  </script>

 

[Max 1]

@Lu86

Per questa volta te lo faccio io ma mi raccomando per il futuro

 

[Lu86]

@Lu86
Vedi l'allegato 7711
Per questa volta te lo faccio io ma mi raccomando per il futuro

Ok grazie

 

[Tommy03]

Purtroppo adesso sono da telefono, però dovresti creare un metodo onclick sul pulsante di chiusura (sempre che tu non ce l'abbia già) e metterci dentro questa riga:

trc.pause();

 

[Lu86]

Scusa per la risposta tardiva.
Ho fatto la prova che mi hai detto richiamando la funzione onClick una volta cliccato sul button "X" e creato la funzione nello script ma nulla, continua la riproduzione.

<button title="Close (Esc)" type="button" class="mfp-close x-button" onClick="audioStop()">×</button>


<!-- Blocco di codice aggiunto allo script -->

function stopAudio(){
         trc.pause();
         trc.currentTime = 0;
      }

So bene cosa voglio fargli fare ma non conosco la sintassi di programmazione:
se clicco sul tasto X , ferma la riproduzione audio
se clicco all'esterno della finestra modale lightbox, ferma la riproduzione audio

 

[Lu86]

Scusa per la risposta tardiva.
Ho fatto la prova che mi hai detto richiamando la funzione onClick una volta cliccato sul button "X" e creato la funzione nello script ma nulla, continua la riproduzione.

<button title="Close (Esc)" type="button" class="mfp-close x-button" onClick="audioStop()">×</button>


<!-- Blocco di codice aggiunto allo script -->

function stopAudio(){
         trc.pause();
         trc.currentTime = 0;
      }

So bene cosa voglio fargli fare ma non conosco la sintassi di programmazione:
se clicco sul tasto X , ferma la riproduzione audio
se clicco all'esterno della finestra modale lightbox, ferma la riproduzione audio

Notato adesso l'errore di scrittura nella function audioStop e non stopAudio, non va ugualmente

 

[Tommy03]

Hai controllato la console se da errori? Comunque secondo me il problema è che dentro alla funzione che hai scritto, la variabile trc non è dichiarata, e quindi è per questo che non funziona. Dovresti provare così, aggiungendo quella parte sotto a dove dichiari la variabile:

<script>

         var elementiPreview = document.querySelectorAll('.aa-agent-social');

         elementiPreview.forEach(function(me){

            me.querySelector('.audio-btn').addEventListener('click',function(){

               var curPreview = this.parentNode;

               elementiPreview.forEach(function(preview){

                  var cls = preview.querySelector('.audio-btn').classList;

                  var trc = preview.querySelector('.traccia-audio')

                

                  if (preview === curPreview && trc.paused) {

                  console.log('ok')

                     cls.remove('fa-play-circle', 'audio-play');

                     cls.add('fa-stop-circle', 'audio-stop');

                     trc.play();

                  } else {

                     cls.remove('fa-stop-circle', 'audio-stop');

                     cls.add('fa-play-circle', 'audio-play');

                     trc.pause();

                     trc.currentTime = 0;

                  }                 

               });
      
           me.querySelector('.mfp-close').addEventListener('click',function(){
           
         trc.pause();
         trc.currentTime = 0;

          });
            });

         });

  </script>

 

[Lu86]

Hai controllato la console se da errori? Comunque secondo me il problema è che dentro alla funzione che hai scritto, la variabile trc non è dichiarata, e quindi è per questo che non funziona. Dovresti provare così, aggiungendo quella parte sotto a dove dichiari la variabile:

<script>

         var elementiPreview = document.querySelectorAll('.aa-agent-social');

         elementiPreview.forEach(function(me){

            me.querySelector('.audio-btn').addEventListener('click',function(){

               var curPreview = this.parentNode;

               elementiPreview.forEach(function(preview){

                  var cls = preview.querySelector('.audio-btn').classList;

                  var trc = preview.querySelector('.traccia-audio')

               

                  if (preview === curPreview && trc.paused) {

                  console.log('ok')

                     cls.remove('fa-play-circle', 'audio-play');

                     cls.add('fa-stop-circle', 'audio-stop');

                     trc.play();

                  } else {

                     cls.remove('fa-stop-circle', 'audio-stop');

                     cls.add('fa-play-circle', 'audio-play');

                     trc.pause();

                     trc.currentTime = 0;

                  }                

               });
     
           me.querySelector('.mfp-close').addEventListener('click',function(){
          
         trc.pause();
         trc.currentTime = 0;

          });
            });

         });

  </script>

Grazie per l'aiuto che mi hai dato, l'ho risolta diversamente con jquery smanettando un pò e anche al click fuori dalla finestra modale (io ho impostato nello script al click sul body) l'audio si interrompe:

<!-- HTML -->
<audio id="audio" class="btn-lightbox" src="assets/audio/audio.mp3" type="audio/mp3" controls preload="metadata"></audio>

<!-- SCRIPT MODIFICATO -->
  <script>
         jQuery(document).ready(function( $ ) {
  $('audio').on("play", function (me) {
    $('audio').each(function (i,e) {
      if (e !== me.currentTarget) {
        this.pause();
      }
    });
  });
})
      
      $(".mfp-close").on("click", function() {
        var audio = $("#audio")[0];
        audio.pause();
        audio.currentTime = 0;
    });
      
      $("body").on("click", function() {
        var audio = $("#audio")[0];
        audio.pause();
        audio.currentTime = 0;
    });
      
  </script>