[SOLUCIONADO] Reproducir dos sonidos a la vez

natyale · #1 (**permalink**) 10/11/2019, 18:25

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.

prueba230683 · #2 (**permalink**) 10/11/2019, 19:00

Lo puedes hacer con JS. Por una parte mantienes el audio principal con los controles:

Código HTML:

Ver original<audio class="audioplay-player" id="miaudio" controls>
    <source src="http://117.62.154.147:6065/;" />
    Your browser doesnt support &lt;audio&gt; element.
</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 originalvar aud2  = new Audio();
aud2.loop = true; // reproducir en bucle
var src = document.createElement("source");
src.type = "audio/mpeg";
src.src  = "voice.mp3";
aud2.appendChild(src);
 
document.getElementById("miaudio").onplay = function(){
     aud2.play()
};
document.getElementById("miaudio").onpause = function(){
     aud2.pause();
};

natyale · #3 (**permalink**) 11/11/2019, 07:19

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?

prueba230683 · #4 (**permalink**) 11/11/2019, 07:56

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<!DOCTYPE html>
<html>
 
<body>
<audio class="audioplay-player" id="miaudio" controls>
    <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" />
    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://www.hoerspielbox.de/wp-content/blogs.dir/sites/1/4-1-10006.mp3?_=7"; // audio secundario 
aud2.appendChild(src);
 
document.getElementById("miaudio").onplay = function(){
     aud2.play()
};
document.getElementById("miaudio").onpause = function(){
     aud2.pause();
};
</script>
</body>
 
</html>

natyale · #5 (**permalink**) 11/11/2019, 10:24

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>

prueba230683 · #6 (**permalink**) 11/11/2019, 10:42

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.

natyale · #7 (**permalink**) 11/11/2019, 11:52

Si, era eso... muchas gracias por tu ayuda. Saludos cordiales!