Imagenes con audio

canache · #1 (**permalink**) 24/09/2019, 12:45

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?

ArturoGallegos · #2 (**permalink**) 24/09/2019, 20:13

Lo que necesitas es hacer uso de WebVR

No es tan complicado pero si tienes que tener cierto conocimiento del tema, puede que tomar un curso, no es como decir enchilame otra y vamonos.