Audio in finestra modale ed interruzione alla chiusura

Lu86

Nuovo Utente
21 Nov 2020
3
0
1
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.
 

Lu86

Nuovo Utente
21 Nov 2020
3
0
1
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.
JavaScript:
<!-- 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>
 
Ultima modifica di un moderatore:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.292
331
83
@Lu86
avviso.png

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