1

Estoy trabajando en HTML5 (local) con Material Design for Bootstrap (la versión PRO con JQuery), tengo un listado de audio, todos se reproducen correctamente, sin embargo si un audio se está reproduciendo y hago click en otro audio, continúa reproduciéndose, por lo que si hiciera click en todos, todos estarían reproduciendose al mismo tiempo.

Necesito que al hacer click en otro audio, se detenga el anterior y únicamente se escuche el audio que seleccioné.

No tengo código de Javascript porque no sé como hacerlo. Ya investigué pero no me funciona.

<div class="card">
                    <ul id="playlist" class="list-group list-group-flush">
                      <li class="list-group-item  cyan lighten-4">
                          <div class="row">
                            <div class="col-md-6 d-flex align-items-center"> 
                                <h5 class="font-weight-bold">1. Jaime Sabines</h5>
                            </div> 
                            <div class="col-md-6">
                                <audio id="audio1" controls>
                                    <source src="audio/1-jaime-sabines.mp3" type="audio/mpeg">
                                     Tu navegador no soporta elementos de audio.
                                </audio>
                            </div>
                        </div>
                      </li>
                    <li class="list-group-item cyan lighten-4">
                        <div class="row">
                            <div class="col-md-6 d-flex align-items-center"> 
                            <h5 class="font-weight-bold">2. Ramón López Velarde</h5>
                            </div>
                            <div class="col-md-6">
                            <audio id="audio2" controls>
                                <source src="audio/2-ramon-lopez-velarde.mp3" type="audio/mpeg">
                                Tu navegador no soporta elementos de audio.
                            </audio>    
                            </div> 
                        </div>
                    </li>
                    <li class="list-group-item cyan lighten-4">
                        <div class="row">
                            <div class="col-md-6 d-flex align-items-center">
                                <h5 class="font-weight-bold">3. Sor Juana Inés de la Cruz</h5>
                            </div>
                            <div class="col-md-6">
                                <audio id="audio3" controls>
                                    <source src="audio/3-sor-juana-ines-de-la-cruz.mp3" type="audio/mpeg">
                                        Tu navegador no soporta elementos de audio.
                                </audio>
                            </div>
                        </div> 
                    </li>
                    <li class="list-group-item cyan lighten-4">
                        <div class="row">
                            <div class="col-md-6 d-flex align-items-center">
                                <h5 class="font-weight-bold">4. Los contemporáneos</h5>
                            </div>
                            <div class="col-md-6">
                                <audio id="audio4" controls>
                                    <source src="audio/4-los-contemporaneos.mp3" type="audio/mpeg">
                                    Tu navegador no soporta elementos de audio.
                                </audio>   
                            </div>
                        </div> 
                    </li>
                    <li class="list-group-item cyan lighten-4">
                        <div class="row">
                            <div class="col-md-6 d-flex align-items-center">
                                <h5 class="font-weight-bold">5. Efraín Huerta</h5>
                            </div>
                            <div class="col-md-6">
                                <audio id="audio5" controls>
                                    <source src="audio/5-efrain-huerta.mp3" type="audio/mpeg">
                                    Tu navegador no soporta elementos de audio.
                                </audio>   
                            </div>
                        </div> 
                    </li>
                    <li class="list-group-item cyan lighten-4">
                        <div class="row">
                            <div class="col-md-6 d-flex align-items-center">
                                <h5 class="font-weight-bold">6. Manuel Acuña y Amado Nervo</h5>
                            </div>
                            <div class="col-md-6">
                                <audio id="audio6" controls>
                                    <source src="audio/6-manuel-acuna-y-amado-nervo.mp3" type="audio/mpeg">
                                    Tu navegador no soporta elementos de audio.
                                </audio>   
                            </div>
                        </div> 
                    </li>
                    <li class="list-group-item cyan lighten-4">
                        <div class="row">
                            <div class="col-md-6 d-flex align-items-center">
                                <h5 class="font-weight-bold">7. Pita Amor y Rosario Castellanos</h5>
                            </div>
                            <div class="col-md-6">
                                <audio id="audio7" controls>
                                    <source src="audio/7-pita-amor-y-rosario-castellanos.mp3" type="audio/mpeg">
                                    Tu navegador no soporta elementos de audio.
                                </audio>   
                            </div>
                        </div> 
                    </li>
                    <li class="list-group-item cyan lighten-4">
                        <div class="row">
                            <div class="col-md-6 d-flex align-items-center">
                                <h5 class="font-weight-bold" style="text-align:center;">8. Octavio Paz</h5>
                            </div>
                            <div class="col-md-6">
                                <audio id="audio8" controls>
                                    <source src="audio/8-octavio-paz.mp3" type="audio/mpeg">
                                    Tu navegador no soporta elementos de audio.
                                </audio>   
                            </div>
                        </div> 
                    </li>
                    <li class="list-group-item cyan lighten-4">
                        <div class="row">
                            <div class="col-md-6 d-flex align-items-center">
                                <h5 class="font-weight-bold" style="text-align:center;">9. Renato Leduc</h5>
                            </div>
                            <div class="col-md-6">
                                <audio id="audio9" controls>
                                    <source src="audio/9-renato-leduc.mp3" type="audio/mpeg">
                                    Tu navegador no soporta elementos de audio.
                                </audio>   
                            </div>
                        </div> 
                    </li>
                    <li class="list-group-item cyan lighten-4">
                        <div class="row">
                            <div class="col-md-6 d-flex align-items-center">
                                <h5 class="font-weight-bold" style="text-align:center;">10. Alfonso Reyes</h5>
                            </div>
                            <div class="col-md-6">
                                <audio id="audio10" controls>
                                    <source src="audio/10-alfonso-reyes.mp3" type="audio/mpeg">
                                    Tu navegador no soporta elementos de audio.
                                </audio>   
                            </div>
                        </div> 
                    </li>
                </ul>
            </div>

Intenté con este fragmento que encontré de JS pero no me sirvió:

javascript


function pausaTodo(){
    var inputs = document.getElementsByTagName('video');
  for(var i = 0; i < inputs.length; i++) {
      inputs[i].pause();
  }
}
  function playA(){
            pausaTodo();
       document.getElementById("video1").play();
       }
function playB(){
pausaTodo();
       document.getElementById("video2").play();
       }
function playC(){
pausaTodo();
       document.getElementById("video3").play();
       }  

var btnp1=document.getElementById("btnPlay1");
var btnp2=document.getElementById("btnPlay2");
var btnp3=document.getElementById("btnPlay3");

btnp1.onclick= function(){playA()};
btnp2.onclick= function(){playB()};
btnp3.onclick= function(){playC()};

javascript

5
  • 1
    eso no se puede hacer solamente con html tienes que agregar javascript lamentablemente para que funcione.
    – ASASCED
    Commented el 20 feb. 2020 a las 18:37
  • No hay problema con agregarlo, el problema es que no sé como. Commented el 20 feb. 2020 a las 18:45
  • 1
    Revisa la respuesta que te di, seguramente te servira acabo de editarla de igual forma para que conozcas como la puedes hacer tanto con javascript como con JQuery.
    – ASASCED
    Commented el 20 feb. 2020 a las 19:01
  • Sí, muchas gracias, sí me sirvió y más o menos entendí la estructura. Commented el 21 feb. 2020 a las 19:21
  • 2
    ¿Responde esto a tu pregunta? ¿Cómo puedo pausar un audio al momento de reproducir otro en html? Commented el 24 feb. 2020 a las 12:48

2 respuestas 2

3

En esta funcion lo unico que tienes que hacer es copiarla directamente a cualquier archivo js y linkearlo con tu html con una etiqueta script o simplemente agregar este codigo dentro de la etiqueta script. El play apunta a la funcion ejecutada por tu html de los controles de audio y el audio a la etiqueta.

document.addEventListener(
  "play",
  function(e) {
    var audios = document.getElementsByTagName("audio");
    for (var i = 0, len = audios.length; i < len; i++) {
      if (audios[i] != e.target) {
        audios[i].pause();
      }
    }
  },
  true
);

Con JQuery tendrias que hacerlo de la siguiente forma pero en lo personal no lo recomiendo.

etiquetasAudio= $('audio');

function pausarTodosLosAudios() {
   etiquetasAudio.each(function() {
      var a = $(this).get(0);
      a.pause();
   });
}

Si no te funcione intenta agregar los audio de la siguiente forma y usa exactamente esa misma funcion.

<audio src="audio.mp3" controls></audio>
1
  • 2
    Hola sería bueno que al presentar la función (ya que como el OP dijo no sabe javaScript) documentes el uso de la escucha de eventos js y del selector en jQuery para qu en el futuro se pueda orientar. Seguro tendrá que seguir usando js.
    – quevedo
    Commented el 20 feb. 2020 a las 19:08
1

Increíble!!!

Cambié la palabra audio por video y me sirvió para hacer lo mismo pero en videos HTML5!!!

  "play",
  function(e) {
    var audios = document.getElementsByTagName("video");
    for (var i = 0, len = audios.length; i < len; i++) {
      if (audios[i] != e.target) {
        audios[i].pause();
      }
    }
  },
  true
);
2
  • 1
    Ya cambié a Español, por qué me clavaron un -1? Si anda perfecto!!!
    – Federico
    Commented el 9 jun. 2021 a las 16:46
  • Ok. Ya te ayude. Yo no tengo nada que ver ni probé el código pero, necesita un poco de explicación Commented el 9 jun. 2021 a las 17:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.