Foros del Web » Creando para Internet » HTML »

Varias canciones con audio

Estas en el tema de Varias canciones con audio en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/09/2012, 04:39
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 9 años, 11 meses
Puntos: 14
Varias canciones con audio

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 :)
  #2 (permalink)  
Antiguo 16/09/2012, 20:45
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 13 años, 8 meses
Puntos: 142
Respuesta: Varias canciones con audio

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
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 17/09/2012, 09:36
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 9 años, 11 meses
Puntos: 14
Respuesta: Varias canciones con audio

Cita:
Iniciado por daPhyre Ver Mensaje
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!
  #4 (permalink)  
Antiguo 17/09/2012, 14:46
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 13 años, 8 meses
Puntos: 142
Respuesta: Varias canciones con audio

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
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #5 (permalink)  
Antiguo 22/09/2012, 16:33
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 9 años, 11 meses
Puntos: 14
Respuesta: Varias canciones con audio

Cita:
Iniciado por daPhyre Ver Mensaje
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?
  #6 (permalink)  
Antiguo 22/09/2012, 17:22
 
Fecha de Ingreso: octubre-2011
Mensajes: 99
Antigüedad: 10 años, 1 mes
Puntos: 5
Respuesta: Varias canciones con audio

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.
  #7 (permalink)  
Antiguo 22/09/2012, 21:31
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 13 años, 8 meses
Puntos: 142
Respuesta: Varias canciones con audio

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...
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #8 (permalink)  
Antiguo 23/09/2012, 05:29
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 9 años, 11 meses
Puntos: 14
Respuesta: Varias canciones con audio

Cita:
Iniciado por daPhyre Ver Mensaje
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!
  #9 (permalink)  
Antiguo 24/09/2012, 13:05
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 14 años, 5 meses
Puntos: 1567
Respuesta: Varias canciones con audio

Cita:
Iniciado por ananda Ver Mensaje
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
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="utf-8" />
  4. <title>Audio multiple</title>
  5. <style type="text/css">
  6. /*<![CDATA[*/
  7. audio{
  8. display:none;
  9. }
  10. audio#sonido1{
  11. display: block;
  12. }
  13.  
  14. /*]]>*/
  15. <script type="text/javascript">
  16. //<![CDATA[
  17. var audios = new Array();
  18. function rep(){
  19. var elaudio = document.getElementById('canciones').value;
  20.  
  21. var audios=document.getElementsByTagName('audio');
  22. var i;
  23. if(elaudio != ""){
  24. for (i=0; i<audios.length; i++) {
  25. if (audios[i].id==elaudio){
  26. audios[i].style.display = 'block';
  27. audios[i].load();
  28. audios[i].play();
  29.  
  30. }else{
  31. audios[i].pause();
  32. audios[i].style.display= 'none';
  33. }
  34. }
  35. }
  36.  
  37. }
  38. //]]>
  39. </head>
  40. <audio preload="auto" id="sonido1" controls="controls">
  41. <source src="http://foros.emprear.com/html5/audio-html5/mp3/musica/you_dont_bring_me_flowers.mp3" type="audio/mp3"/>
  42. <source src="http://foros.emprear.com/html5/audio-html5/mp3/musica/you_dont_bring_me_flowers.ogg" type="audio/ogg"/>
  43. <audio preload="auto" id="sonido2"  controls="controls">
  44. <source src="http://foros.emprear.com/html5/audio-html5/mp3/musica/Across_The_Universe.mp3" type="audio/mp3" />
  45. <source src="http://foros.emprear.com/html5/audio-html5/mp3/musica/Across_The_Universe.ogg" type="audio/ogg" />
  46. <!-- aqui se insertan el resto de las etiquetas audio -->
  47. <form action="#">
  48. <p>
  49. <select id="canciones" onchange="rep()">
  50. <option value="">Seleccionar canción</option>
  51. <option value="sonido1">uno</option>
  52. <option value="sonido2">dos</option>   
  53. <p>
  54. </form>
  55. </body>
  56. </html>


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #10 (permalink)  
Antiguo 27/09/2012, 19:09
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 13 años, 8 meses
Puntos: 142
Respuesta: Varias canciones con audio

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
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...

Etiquetas: audio, canciones
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 17:30.