Audio tag html5

**VerticalSmile86** · 19-06-2019, 20:13

Buonasera,
sono nuovo in questo forum che solitamente utilizzo per i dubbi legati alla realizzazione di siti web. Non ho trovato nulla riguardante l'utilizzo del tag audio.
Nello specifico... voglio realizzare una pagina web con:

img/locandina + anteprima traccia audio differente per ciascun titolo

<div class="locandina">
<a href="music-title1.html"><img src="mialocandina1.jpg" alt="mia locandina1"></a>
</div>
<div class="preview">
<audio id="audio1" src="fileaudio1.mp3" type="audio/mp3"></audio>
<a class="agents-btn fa fa-play-circle" onclick="document.getElementById('audio1').play()" > Ascolta </a>
</div>

<div class="locandina">
<a href="music-title2.html"><img src="mialocandina2.jpg" alt="mia locandina 2"></a>
</div>
<div class="preview">
<audio id="audio2" src="fileaudio2.mp3" type="audio/mp3"></audio>
<a class="agents-btn fa fa-play-circle" onclick="document.getElementById('audio2').play()" > Ascolta </a>
</div>

Domanda:
- Come posso fare in modo che durante la riproduzione del fileaudio1 se viene attivato il play del fileaudio2 si blocchi la riproduzione della precedente e quindi non si sovrappone l'audio delle 2 tracce?

Per voi potrï¿½ sembrare banale... spero possiate aiutarmi, grazie.

Luciano

**KillerWorm** · 19-06-2019, 22:07

Ciao Luciano e benvenuto sul forum. L'argomento non è così banale per chi non è del mestiere ma nemmeno tanto complicato. A grandi linee diciamo che dovrai usare il metodo pause() che, al click su un elemento audio (così come hai fatto per il play()), dovrai applicare agli altri elementi.

Se ti interessa inoltre riportare all'inizio la posizione di riproduzione dell'audio, puoi azzerare la proprietà currentTime del relativo elemento che metti in pausa.

Se gli elementi sono solo 2 puoi semplicemente applicare pause() all'altro elemento conosciuto, selezionandolo ad esempio con getElementById. Se invece devi poter gestire più elementi converrà selezionarli opportunamente (magari usando una classe) e applicare pause() attraverso un ciclo.

In qualunque caso è più conveniente riportare tutto dentro una funzione da poter richiamare in modo semplice per ciascun elemento audio in gioco.

Semplice esempio con due elementi:

codice:

<!DOCTYPE HTML>
<html lang="it">
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
      <script>
         
         function riproduciAudio(idElemento){
         
            var elemento1 = document.getElementById('audio1');
            var elemento2 = document.getElementById('audio2');

            elemento1.pause();
            elemento1.currentTime = 0;
            
            elemento2.pause();
            elemento2.currentTime = 0;
            
            document.getElementById(idElemento).play();
            
         }
         
      </script>
   </head>
   <body>
   
      <div class="locandina">
         <a href="music-title1.html"><img src="mialocandina1.jpg" alt="mia locandina1"></a>
      </div>
      <div class="preview">
         <audio id="audio1" src="fileaudio1.mp3" type="audio/mp3"></audio>
         <a class="agents-btn fa fa-play-circle" onclick="riproduciAudio('audio1')" > Ascolta </a>
      </div>

      <div class="locandina">
         <a href="music-title2.html"><img src="mialocandina2.jpg" alt="mia locandina 2"></a>
      </div>
      <div class="preview">
         <audio id="audio2" src="fileaudio2.mp3" type="audio/mp3"></audio>
         <a class="agents-btn fa fa-play-circle" onclick="riproduciAudio('audio2')" > Ascolta </a>
      </div>

   </body>
</html>

.
Chiaramente il tutto si potrebbe rendere più dinamico, per permettere di gestire più elementi, e migliorare, magari mettendo una funzione di stop con cui si possa interrompere l'audio in esecuzione anche se non si clicca su un altro elemento.

Intanto fai qualche prova e vedi se può bastare questo.

Buon proseguimento e buona permanenza sul forum.

PS: l'argomento verte chiaramente su JavaScript (più che HTML5), segnalo al moderatore che eventualmente sposterà la discussione nella sezione opportuna. Occhio anche ai titoli generici e al codice postato senza l'uso degli opportuni tag. Consiglio di leggere attentamente il relativo regolamento di sezione (discussione in evidenza che trovi per ogni sezione del forum) prima di postare nuovamente.

**VerticalSmile86** · 20-06-2019, 16:39

Ciao, grazie della celere risposta ma purtroppo il mio problema era appunto omettere il pulsante pausa e fare in modo che cliccando sul play di un'altra traccia si interrompesse automaticamente l'altra... con questo script ottengo sempre lo stesso risultato... grazie ancora comunque...

**KillerWorm** · 20-06-2019, 17:18

il mio problema era appunto omettere il pulsante pausa e fare in modo che cliccando sul play di un'altra traccia si interrompesse automaticamente l'altra... con questo script ottengo sempre lo stesso risultato... grazie ancora comunque...

Ciao, non ho ben capito se hai risolto oppure no. Ottieni lo stesso risultato di cosa?

L'esempio che ti ho postato, testato e funzionante, interrompe comunque tutte e due le tracce e poi manda in play quella su cui hai cliccato. Il risultato è esattamente quello da te richiesto. Se non ti funziona c'è qualcosa che non quadra.

**VerticalSmile86** · 21-06-2019, 16:53

Originariamente inviata da KillerWorm

Ciao, non ho ben capito se hai risolto oppure no. Ottieni lo stesso risultato di cosa?

L'esempio che ti ho postato, testato e funzionante, interrompe comunque tutte e due le tracce e poi manda in play quella su cui hai cliccato. Il risultato ï¿½ esattamente quello da te richiesto. Se non ti funziona c'ï¿½ qualcosa che non quadra.

Ciao.... si effettivamente avevo un altro problema, funziona correttamente proprio come volevo... ï¿½ complesso far apparire (dopo aver avviato l'audio) al posto del pulsante "play" il pulsante "pausa"? Non voglio approfittare delle tue conoscenze e della tua disponibilitï¿½ quindi se ti chiedo troppo inserisco un pulsante aggiuntivo "stop". Grazie tante...

**KillerWorm** · 21-06-2019, 18:19

ï¿½ complesso far apparire (dopo aver avviato l'audio) al posto del pulsante "play" il pulsante "pausa"?

No, però ti propongo qualche ottimizzazione per rendere il tutto più dinamico.

Qui un esempio testato e funzionante:

codice:

<!DOCTYPE HTML>
<html lang="it">
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      
      <style>
         .audio-btn                    { cursor: pointer; }
         .audio-btn::after             { padding-left: .5em; }
         .audio-btn.audio-play         { color: green; }
         .audio-btn.audio-stop         { color: red; }
         .audio-btn.audio-play::after  { content:'Ascolta'; }
         .audio-btn.audio-stop::after  { content:'Interrompi'; }
      </style>
      
   </head>
   <body>
   
   
      <div class="locandina">
         <a href="music-title1.html"><img src="mialocandina1.jpg" alt="mia locandina1"></a>
      </div>
      <div class="preview">
         <audio class="traccia-audio" src="fileaudio1.mp3" type="audio/mp3"></audio>
         <i class="agents-btn fa fa-play-circle audio-btn audio-play" aria-hidden="true"></i>
      </div>


      <div class="locandina">
         <a href="music-title2.html"><img src="mialocandina2.jpg" alt="mia locandina 2"></a>
      </div>
      <div class="preview">
         <audio class="traccia-audio" src="fileaudio2.mp3" type="audio/mp3"></audio>
         <i class="agents-btn fa fa-play-circle audio-btn audio-play" aria-hidden="true"></i>
      </div>
      
      
      <div class="locandina">
         <a href="music-title3.html"><img src="mialocandina3.jpg" alt="mia locandina3"></a>
      </div>
      <div class="preview">
         <audio class="traccia-audio" src="fileaudio3.mp3" type="audio/mp3"></audio>
         <i class="agents-btn fa fa-play-circle audio-btn audio-play" aria-hidden="true"></i>
      </div>


      <script>
         
         var elementiPreview = document.querySelectorAll('.preview');
         
         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) {
                     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>
      
   </body>
</html>

Nota che non ho usato id ma solo delle classi che fanno tutto il lavoro.
Per il momento fai qualche prova e se non capisci qualcosa chiedi pure.

Buon proseguimento.

**VerticalSmile86** · 21-06-2019, 18:49

davvero impressionante... questo è davvero completo e funzionale. Nessun altro dubbio... gli do qualche ritocco estetico e il discorso è chiuso. Ti ringrazio nuovamente di tutto. Buona serata.

**ciro78** · 22-06-2019, 17:34

Ciao VerticalSmile86 ,
benvenuto sul forum. Ti invito a leggere il regolamento Inoltre ti chiedo di inserire il codice utilizzando l'apposito tag code.

Discussione: Audio tag html5

Strumenti discussione

Ricerca discussione

Visualizza

Audio tag html5

Tag per questa discussione

Permessi di invio