lunes, 4 de diciembre de 2023

Rep dos sonidos a la vez

16:13    

 


Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Reproducir dos sonidos a la vez

Estas en el tema de Reproducir dos sonidos a la vez en el foro de Javascript en Foros del Web. Hola querido foro, estoy necesitando de vuestra ayuda. Tengo el siguiente código: Código PHP: < div  class= "audioplay-object" >   < div  class= "audioplay-button" ></ div ...
  #1 (permalink)  
Antiguo 10/11/2019, 18:25
 
Fecha de Ingreso: mayo-2008
Mensajes: 198
Antigüedad: 15 años, 7 meses
Puntos: 0
Exclamación Reproducir dos sonidos a la vez
Hola querido foro, estoy necesitando de vuestra ayuda. Tengo el siguiente código:

Código PHP:
<div class="audioplay-object">
  <div class="audioplay-button"></div>
  <audio class="audioplay-player">
    <source src="http://117.62.154.147:6065/;" />
    <source src="voice.mp3" type="audio/mpeg"/>
    Your browser doesnt support &lt;audio&gt; element.
  </audio>
<script src="https://www.sitio/radio/js/audioplay-2.0.0.min.js"></script> 
Y deseo que reproduzca la música de http://117.62.154.147:6065/ y a la vez voice.mp3. Este ultimo es una voice over que debe salir de fondo, donde se escucha el nombre de la emisora.

El problema, es que solo reproduce la musica de http://117.62.154.147:6065 y el voice.mp3 no se reproduce al hacer click en Play.

Como logo que se reproduzcan ambos source src a la vez?

Agradezco vuestra ayuda, estoy hace horas y no logo hacerlo funcionar.
  #2 (permalink)  
Antiguo 10/11/2019, 19:00
 
Fecha de Ingreso: abril-2011
Mensajes: 170
Antigüedad: 12 años, 8 meses
Puntos: 68
Respuesta: Reproducir dos sonidos a la vez
Lo puedes hacer con JS. Por una parte mantienes el audio principal con los controles:

Código HTML:
Ver original
  1. <audio class="audioplay-player" id="miaudio" controls>
  2.     <source src="http://117.62.154.147:6065/;" />
  3.     Your browser doesnt support &lt;audio&gt; element.
  4. </audio>

Y por otra añades un script que reproduzca el audio secundario cuando se está reproduciendo el principal. Esto lo puedes detectar con los eventos play y stop.

Código Javascript:
Ver original
  1. var aud2  = new Audio();
  2. aud2.loop = true; // reproducir en bucle
  3. var src = document.createElement("source");
  4. src.type = "audio/mpeg";
  5. src.src  = "voice.mp3";
  6. aud2.appendChild(src);
  7.  
  8. document.getElementById("miaudio").onplay = function(){
  9.      aud2.play()
  10. };
  11. document.getElementById("miaudio").onpause = function(){
  12.      aud2.pause();
  13. };
Última edición por prueba230683; 10/11/2019 a las 19:06
  #3 (permalink)  
Antiguo 11/11/2019, 07:19
 
Fecha de Ingreso: mayo-2008
Mensajes: 198
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Reproducir dos sonidos a la vez
Hola Prueba... gracias por tu ayuda. Quede trancada en el Código Javascript, lo debo agregar debajo del Código HTML, o en otro archivo?
  #4 (permalink)  
Antiguo 11/11/2019, 07:56
 
Fecha de Ingreso: abril-2011
Mensajes: 170
Antigüedad: 12 años, 8 meses
Puntos: 68
Respuesta: Reproducir dos sonidos a la vez
El JS que te pasé lo debes meter al final del body, y entre las etiquetas <script> y </script>.

Una demo mezclando dos sonidos (el original y la percusión): https://www.w3schools.com/code/tryit...e=G9UK1FG9BB0M

Simplemente pones tus audios en vez de los que he puesto de prueba. Dejo el HTML completo por si expira la demo:

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <body>
  5. <audio class="audioplay-player" id="miaudio" controls>
  6.     <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" />
  7.     Your browser doesnt support &lt;audio&gt; element.
  8. </audio>
  9. <script>
  10. var aud2  = new Audio();
  11. aud2.loop = true; // reproducir en bucle
  12. var src = document.createElement("source");
  13. src.type = "audio/mpeg";
  14. src.src  = "https://www.hoerspielbox.de/wp-content/blogs.dir/sites/1/4-1-10006.mp3?_=7"; // audio secundario 
  15. aud2.appendChild(src);
  16.  
  17. document.getElementById("miaudio").onplay = function(){
  18.      aud2.play()
  19. };
  20. document.getElementById("miaudio").onpause = function(){
  21.      aud2.pause();
  22. };
  23. </script>
  24. </body>
  25.  
  26. </html>
Última edición por prueba230683; 11/11/2019 a las 10:18
  #5 (permalink)  
Antiguo 11/11/2019, 10:24
 
Fecha de Ingreso: mayo-2008
Mensajes: 198
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Reproducir dos sonidos a la vez
Funciono perfectamente... muchas gracias por la ayuda, no puedo creer que este funcionando todo bien, mil graaaacias.

Ahora estoy viendo porque el botón original que tenia el sitio, queda para un costado, antes estaba centrado. Cuando agrego el código, el botón se corre para la izquierda.

Me quedo asi:

Código PHP:
</div> 
<div class="audioplay-object">
  <div class="audioplay-button"></div>
  <audio class="audioplay-player">
    <source src="http://117.62.154.147:6065/;" />
    Your browser doesnt support &lt;audio&gt; element.
</audio>
<script>
var aud2  = new Audio();
aud2.loop = true; // reproducir en bucle
var src = document.createElement("source");
src.type = "audio/mpeg";
src.src  = "https://sitio.com/voice.mp3";
aud2.appendChild(src);
 
document.getElementById("miaudio").onplay = function(){
     aud2.play()
};
document.getElementById("miaudio").onpause = function(){
     aud2.pause();
};
</script>
<script src="https://sitio.com/radio/js/audioplay-2.0.0.min.js"></script>
    </a>
  </div> 
  #6 (permalink)  
Antiguo 11/11/2019, 10:42
 
Fecha de Ingreso: abril-2011
Mensajes: 170
Antigüedad: 12 años, 8 meses
Puntos: 68
Respuesta: Reproducir dos sonidos a la vez
Cita:
Cuando agrego el código, el botón se corre para la izquierda.
Puede ser porque estás poniendo <script> en medio de otro contenido HTML, y eso genera saltos de línea o espacios en blanco.

Te recomiendo poner esos scripts justo antes de el cierre del body: </body>, como indiqué en el código.
  #7 (permalink)  
Antiguo 11/11/2019, 11:52
 
Fecha de Ingreso: mayo-2008
Mensajes: 198
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Reproducir dos sonidos a la vez
Si, era eso... muchas gracias por tu ayuda. Saludos cordiales!

Etiquetas: phpreproducirsonidosvez
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


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