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