Varias canciones con audio

ananda · #1 (**permalink**) 16/09/2012, 04:39

Hola, he estado mirando muchos tutoriales de la etiqueta audio de html5, y me funciona perfectamente pero lo que quiero es que sea capaz de reproducir varias canciones, todos los ejemplos que he visto enseñan a reproducir una sola canción y yo necesito varias.

He pensado que podría crear una lista con las canciones manualmente y al hacer clic cambiar el "src" por el que el usuario haya pulsado, es lo único que se me ha ocurrido así pero no sé si funcionaría, os estaría muy agradecido si me pudierais ayudar :)

daPhyre · #2 (**permalink**) 16/09/2012, 20:45

Hasta donde se, eso que propones es la técnica más popular para hacer el efecto que esperas. Pruebalo y verás que funciona. Mucha suerte

ananda · #3 (**permalink**) 17/09/2012, 09:36

Cita:

Iniciado por daPhyre

Hasta donde se, eso que propones es la técnica más popular para hacer el efecto que esperas. Pruebalo y verás que funciona. Mucha suerte

De acuerdo, pero es una teoría, no sabría como cambiar la src del archivo, seria igual que cambiar una class? Muchas gracias!

daPhyre · #4 (**permalink**) 17/09/2012, 14:46

Supongo yo que sería una técnica similar. Yo lo hago llamando al ID de la etiqueta:

Código:

onclick="document.getElementById('audiotag').src='album/track02.m4a';"

Suerte

ananda · #5 (**permalink**) 22/09/2012, 16:33

Cita:

Iniciado por daPhyre

Supongo yo que sería una técnica similar. Yo lo hago llamando al ID de la etiqueta:

Código:

onclick="document.getElementById('audiotag').src='album/track02.m4a';"

Suerte

Hola, siguiendo tu consejo he hecho esto:

Código HTML:

 <audio controls="controls">
 <source src="<?php echo $cancion["ruta"]?>"  id="srcaudio" type="audio/mpeg" />
</audio>

<p class="pistas" onclick="document.getElementById('srcaudio').src=<?php echo $especial["titulo"]?>;"><?php echo $especial["titulo"] ?></p>

Es decir, al darle a la pista que sea, tiene que cambiar la etiqueta src del audio, pero no funciona, no cambia la canción, sabes por qué pasa esto?

vermouth · #6 (**permalink**) 22/09/2012, 17:22

Por lo que yo sé hay reproductores muy básicos que te permiten reproducir varias canciones una tras otras separandolas con la tecla |

Ahora bien, no sé si será ese tu caso.. desde luego que no tiene que ver con programación.

daPhyre · #7 (**permalink**) 22/09/2012, 21:31

Viendo el PHP en lugar de los datos, es difícil saber la razón del error... Pero por lo que veo, creo que estás asignando como "src" el título de la canción en lugar de la ruta. ¿Estaré bien con esta suposición?

Igual, es posible que debas darle play() de nuevo a la canción una vez cambiada su ruta...

ananda · #8 (**permalink**) 23/09/2012, 05:29

Cita:

Iniciado por daPhyre

Viendo el PHP en lugar de los datos, es difícil saber la razón del error... Pero por lo que veo, creo que estás asignando como "src" el título de la canción en lugar de la ruta. ¿Estaré bien con esta suposición?

Igual, es posible que debas darle play() de nuevo a la canción una vez cambiada su ruta...

Hola, gracias por la respuesta, tenías razón, le estaba mandando el titulo y no la ruta pero ahora que ya está solucionado ese error sigue sin cambiarme la canción, no entiendo lo del play(), me podrías explicar como debería hacerlo? Quizás el error viene de allí, muchas gracias!

emprear · #9 (**permalink**) 24/09/2012, 13:05

Cita:

Iniciado por ananda

Hola, gracias por la respuesta, tenías razón, le estaba mandando el titulo y no la ruta pero ahora que ya está solucionado ese error sigue sin cambiarme la canción, no entiendo lo del play(), me podrías explicar como debería hacerlo? Quizás el error viene de allí, muchas gracias!

Cambiar el src puede ser algo complejo, ya que necesitarías modificar valores para distintos source (IE, Firefox, etc)

Podés usar este sistema

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Audio multiple</title>
<style type="text/css">
/*<![CDATA[*/
audio{
display:none;
}
audio#sonido1{
display: block;
}
 
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var audios = new Array();
function rep(){
var elaudio = document.getElementById('canciones').value;
 
var audios=document.getElementsByTagName('audio');
var i;
if(elaudio != ""){
for (i=0; i<audios.length; i++) {
if (audios[i].id==elaudio){
audios[i].style.display = 'block';
audios[i].load();
audios[i].play();
 
}else{
audios[i].pause();
audios[i].style.display= 'none';
}
}
}
 
}
//]]>
</script>
</head>
<body>
<audio preload="auto" id="sonido1" controls="controls">
<source src="http://foros.emprear.com/html5/audio-html5/mp3/musica/you_dont_bring_me_flowers.mp3" type="audio/mp3"/>
<source src="http://foros.emprear.com/html5/audio-html5/mp3/musica/you_dont_bring_me_flowers.ogg" type="audio/ogg"/>
</audio>
<audio preload="auto" id="sonido2"  controls="controls">
<source src="http://foros.emprear.com/html5/audio-html5/mp3/musica/Across_The_Universe.mp3" type="audio/mp3" />
<source src="http://foros.emprear.com/html5/audio-html5/mp3/musica/Across_The_Universe.ogg" type="audio/ogg" />
</audio>
<!-- aqui se insertan el resto de las etiquetas audio -->
<form action="#">
<p>
<select id="canciones" onchange="rep()">
<option value="">Seleccionar canción</option>
<option value="sonido1">uno</option>
<option value="sonido2">dos</option>    
</select>
<p>
</form>
</body>
</html>

Saludos

daPhyre · #10 (**permalink**) 27/09/2012, 19:09

Ya hice varias pruebas, y encontré un detalle peculiar. Si lo hago directo de Audio:

Código HTML:

<audio id="audio" src="album/track02.m4a" controls="controls"></audio>

Funciona perfectamente. Sin embargo, si lo hago a través de Source como lo hiciste en tu ejemplo:

Código HTML:

<audio controls="controls">
	<source id="audio" src="album/track02.m4a" />
</audio>

No me funciona, y la consola de Javascript no me da ningún error para ver que se puede hacer al respecto. Por tanto, debes de hacerlo como en el primer ejemplo, con el atributo src directo en la etiqueta Audio.

Mucha suerte