Hola, Buenas estoy buscando solucionar esta cuestión estoy armando una pagina web con imágenes varias y cada una tenga un sonido distinto, tipo olas otro un auto otro un ave y así, resulta q necesito q al iniciar un sonido el otro automáticamente se detenga para no causar desagrado al usuario, estoy trabajando con html5.
este es el código q estoy utilizando:
javascript
:
Código HTML:
<head>
<script type="text/javascript">
function playPause(){
var reproduciendo = true;
var pista = document.getElementById('nosemeocurre');
var boton_play_pause = document.getElementById('boton_play_pause');
boton_play_pause.onclick = function(){
if(reproduciendo){
reproduciendo = false;
pista.play();
this.value = 'PLAY';
}else{
reproduciendo = true;
pista.pause();
this.value = 'PAUSE';
}
}
}
/*function play2(){
var reproduciendo = true;
var pista = document.getElementById('nosemeocurre2');
var boton_play_pause = document.getElementById('boton_play_pause2');
boton_play_pause.onclick = function(){
if(reproduciendo){
reproduciendo = false;
pista.play();
this.value = 'PLAY';
}else{
reproduciendo = true;
pista.pause();
this.value = 'PAUSE';
}
}
}*/
window.onload = function(){
playPause();
play2();
}
</script>
</head> y este es el Html5
Código HTML:
<p>
<audio id="nosemeocurre" src="sonido1.mp3"><br>
</audio><br>
<img id="boton_play_pause" src="imagen1.jpg" sizes="(max-width: 500px) 100vw, 500px" srcset="imagen1.jpg 500w, imagen1.jpg 150w, imagen1.jpg" alt="" width="500" height="500">
</p>
<p><audio id="nosemeocurre2" src="sonido2.mp3"></audio><br>
<img id="boton_play_pause" src="imagen2.jpg" sizes="(max-width: 500px) 100vw, 500px" srcset="imagen2.jpg 500w, imagen2.jpg 150w, imagen2.jpg" alt="" width="500" height="500"></p>
lo ultimo q intente fue hacer 2 funciones (para iniciar por q necesito 15 imagenes con sus 15 sonidos), pero las 2 suenan al mismo tiempo si las seleccionas las 2, alguna ayuda?