Foros del Web » Creando para Internet » HTML »

Imagenes con audio

Estas en el tema de Imagenes con audio en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/09/2019, 12:45
Avatar de canache  
Fecha de Ingreso: enero-2015
Ubicación: caracas
Mensajes: 4
Antigüedad: 4 años, 8 meses
Puntos: 1
Pregunta Imagenes con audio

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?
  #2 (permalink)  
Antiguo 24/09/2019, 20:13
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.507
Antigüedad: 11 años, 7 meses
Puntos: 1077
Respuesta: Imagenes con audio

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.



La zona horaria es GMT -6. Ahora son las 02:18.