Audio in finestra modale ed interruzione alla chiusura

Lu86

Nuovo Utente
21 Nov 2020
6
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
6
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.449
338
83
@Lu86
avviso.png

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

Tommy03

Utente Attivo
6 Giu 2018
616
58
28
20
Vicenza
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:
HTML:
trc.pause();
 

Lu86

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

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

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

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

Utente Attivo
6 Giu 2018
616
58
28
20
Vicenza
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:
HTML:
<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

Nuovo Utente
21 Nov 2020
6
0
1
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:
HTML:
<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:

Codice:
<!-- 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>
 
Discussioni simili
Autore Titolo Forum Risposte Data
F comando di inclusione file audio in I-Pad non funziona HTML e CSS 1
K File audio in html, chi mi può aiutare? HTML e CSS 0
K Aiuto con file audio in html HTML e CSS 1
Z [java] bufferizzare stream audio da mic Java 1
felino Conversione da MPG a MP4: audio non sincronizzato Windows e Software 1
felino TV LCD, Google Chromecast e audio in uscita Discussioni Varie 1
J File audio in java Java 0
antoniomanuel Eseguire più files audio in sequenza Sviluppo app per Android 0
F [HTML] Caricamento Audio con matching HTML e CSS 10
M aggiungere streaming audio a pagina html HTML e CSS 2
S Cerco lavoro come sbobinatrice file audio Offerte e Richieste di Lavoro e/o Collaborazione 0
F Ipcam cinesi senza pagina web, come prelevo il flusso video, audio e tilt? IP Cam e Videosorveglianza 0
felino Chromecast e Google Chrome: problema audio Discussioni Varie 0
D [Javascript] [HTML] Insertimento audio Javascript 8
M Creare un lettore audio con le API di Soundcloud Programmazione 0
D Dreamweaver-attivazione di un suono-audio su rollover del mouse su un link Windows e Software 0
C [HTML] audio austostart HTML e CSS 19
D [Javascript] Come creare un equalizzatore HTML collegato a files audio Javascript 1
mirella71 Chiedo un consiglio acquisto kit o camera audio video per sorveglianza (esterno ) IP Cam e Videosorveglianza 0
Benix89 [Audacity] Audio da 128 kbps a 320 kbps Windows e Software 2
T Streaming audio (solo audio) della ipcam (cinesi) simil foscn mJpeg IP Cam e Videosorveglianza 0
S Posizionare player audio javascript in tabella Javascript 0
V inserire l'audio da youtube HTML e CSS 1
A salvataggio file audio su una seconda pagina html Javascript 0
N Registrare audio micofono Javascript 2
filomeni Audio per Safari Javascript 0
N App conferenza audio Discussioni Varie 3
M Tag AUDIO su smartphone??? Javascript 4
giap intro musicale e skip audio HTML e CSS 3
D LineIN scheda audio integrata (Win XP SP2) Hardware 0
filippino Generic Host Process for Win32 Services... e addio all'audio! Windows e Software 0
glm2006ITALY Realtek HD: audio analogico sparito! Hardware 11
B periferica audio non trovata Windows XP Professional Hardware 14
G audio player senza refresh HTML e CSS 0
P problemi con il LOOP del file audio messo in home HTML e CSS 1
C Far partire un file audio funzionante per tutti i browser Javascript 1
S Ho cancellato driver audio!aiutatemi!grazie Hardware 3
S inserire un lettore audio/video... HTML e CSS 3
G html5 ed audio gestito da javascript Javascript 2
nim gestire player audio PHP 2
A Problemi audio con windows xp ?!?! Hardware 0
D Problema con <audio> di HTML5 HTML e CSS 0
nim player audio youtube HTML e CSS 3
N musica di sottofondo ...quale estensione del file audio? HTML e CSS 0
U creare una playlist audio e riprodurla in una pagina Classic ASP 1
D Tag "audio": come fare scattare una funzione alla fine di una traccia? Javascript 6
I gestire l'audio Javascript 0
P Registrazione audio in chiamata Java 2
C Periferica audio su bus High Defition Audio Hardware 0
M Audio in Flash! Flash 0

Discussioni simili