jueves, 29 de diciembre de 2011

Pruebas de HTML5 para reproducir audio y música

Para la reproducción de audios en este blog (me refiero a audios que alojo por mi cuenta en DropBox o en Archive.org), llevo un tiempo utilizando un script de Yahoo!, que descubrí en Ciudad Blogger [actualización]. Me ha ido bien hasta la fecha, pero dos son las limitaciones por las que decido cambiar de reproductor:

  1. No funciona en la versión móvil, o si se abre en un móvil es con problemas o no suena.
  2. Sólo admite archivos mp3.
  3. Necesita Flash para funcionar.

Y qué mejor que utilizar el reproductor de audio que tienen los navegadores de Internet más modernos, usando la etiqueta audio de HTML5... Pero siempre asegurando la compatibilidad con navegadores más antiguos, para que ningún lector se quede sin poder escuchar el archivo de audio, y sin olvidarnos de los visitantes móviles.

Para no complicarme la vida ni con flash ni con Javascript adicional, he optado por usar un código HTML5 limpio, los enlaces directos de descarga a los archivos de audio para los navegadores no compatibles. Si la versión de tu navegador es la más reciente (Internet Explorer incluido), deberías ver aquí abajo un reproductor listo para usar:

Musa Soñando

Amanecer Contigo

El código utilizado es el siguiente:

<p><b>Título</b> <audio controls>

<source src="URL_MP3" type="audio/mpeg"/>

<source src="URL_OGG" type="audio/ogg"/>

<a href="URL_MP3">mp3</a> | <a href="URL_OGG">ogg</a></p>

</audio>

¿Por qué estoy haciendo esto? En breve (semanas, meses como mucho) voy a abandonar Jamendo. Estoy cansado de sus eternos y crecientes problemas técnicos (uno de ellos responsable directo de que Soledad en Diciembre no se haya publicado todavía), el favoritismo descarado hacia usuarios franceses y la indiferencia hacia los que hablamos y escribimos en español.

Quiero usar este blog para el autobombo, para lanzar los álbumes, y como mucho voy a publicar en Creators Menal y en uno o dos sitios más. Mucho tendrían que cambiar las cosas para que vuelva a Jamendo... Pero se intuye un próximo cierre, a juzgar por el copiado masivo de álbumes a Archive.org que se está produciendo en estos momentos... ¿O tal vez no? Quien sabe, yo por si acaso...

Agradecería unos comentarios acerca de la funcionalidad de este reproductor, y un poco de información sobre el sistema operativo y navegador empleados. Me da igual que sea de escritorio o móvil.

Fuentes de información, inspiración y consulta:

Introducción al elemento audio de HTML5

Aprovecha toda la potencia de la etiqueta AUDIO de HTML5

Tutorial en html5rocks

3 comentarios:

  1. Funciona perfectamente en IE9 y Win7, además los temas son muy guapos :D felicidades!

    ResponderEliminar
  2. ¿Entonces se ve el reproductor en IE9? Me quedo un poco más tranquilo, ya que es todavía la tercera combinación sistema/navegador que más visitas recibo. Gracias, Dani. :)

    En el caso de navegadores más antiguos que no reconozcan la etiqueta audio les saldrán un par de enlaces para descargar y escuchar en el equipo. Uno en ogg vorbis y el otro en mp3.

    A ver si alguien con Opera (da igual el sistema operativo), y con Safari en Mac le pudiera echar un vistazo, que son los otros dos casos más en los que tengo dudas. Sé que en Opera Mobile y en el navegador de Internet de Android se reproduce sin problemas, incluso entrando la versión móvil del blog.

    Con Firefox y con Google Chrome/Chromium tampoco hay problemas. Al menos hasta ahora...

    ResponderEliminar
  3. Muy, muy agradecido. Necesita un reproductor simple para mi web www.juancamacho.net y he de decir que funciona perfectamente.

    Un millón de gracias.

    ResponderEliminar

No hay normas especiales para publicar comentarios en este blog. Sólo las básicas: respeta, no insultes, y no hagas SPAM descaradamente. Tampoco se admitirán comentarios que vulneren la Ley. Cualquier aportación, consulta y crítica es bienvenida, a condición de cumplir estas normas básicas.

Si lo que quieres es ponerte en contacto directamente conmigo, dispones para ello de un formulario de contacto.