Hoy voy a hacer una pequeña introducción al elemento audio de HTML5 que como ya todos sabéis, forma parte de la nueva especificación de HTML5 y nos permite empotrar archivos de audio en nuestros proyectos web sin necesidad de utilizar plugins adicionales como Flash.
El nuevo elemento permite el uso de diferentes formatos de archivo puesto que los formatos que soportan los diferentes navegadores no son parte del estándar sino que depende de la implementación de cada fabricante. Puedes guiarte con esta tabla para comprobar que formatos soportan los navegadores más usados de forma nativa:
| Códec | Tipo | IE >=9 | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|---|
| Ogg Vorbis | Libre (BSD) | no | si | si | no | si |
| WAV PCM | Privativo (Microsoft, IBM) | no | si | si | si | si |
| MP3 | Privativo (En disputa) | si | no | si | si | si en Linux y FreeBSD |
| AAC | Bajo patente AAC | si | no | si | si | si en Linux y FreeBSD |
| Speex | Libre (BSD) | no | no | si | no | no |
Tanto en Safari como en Chrome, algunos formatos dependen de Quicktime y ffmpeg respectivamente. Chrome realmente no soporta todos los formatos de forma nativa, tan solo Vorbis y MP3, por el contrario, si compilamos Chromium con soporte para ffmpeg si estarán disponibles todos esos formatos de forma nativa a través de ffmpeg, de ahí la cursiva.
Creo que no me he dejado nada en el tintero, de todos modos si alguien conoce algún dato sobre la tabla que yo desconozca o haya omitido o esté erróneo agradecería feedback con link al respecto para corregirla. Como puede apreciarse, combinando Vorbis y MP3 podremos ofrecer audio a todos los navegadores mayoritarios.
¿Cómo funciona?
Empotrar un archivo de audio en HTML5 es muy simple:
<audio src="archivo.mp3">
</audio>Como ocurre con todas las etiquetas de HTML5 lo que se encuentre entre las etiquetas audio solo será tenido en cuenta por navegadores que no soportan la nueva etiqueta. Obviamente, el ejemplo anterior es extremadamente simple, la etiqueta audio nos ofrece muchas más posibilidades. Por ejemplo, podemos arruinar completamente nuestras páginas empotrando un archivo de audio que se auto reproduzca por si mismo siendo odiados al instante por cada uno de los usuarios que entren a nuestro sitio:
<audio src="archivo.mp3" autoplay>
</audio>El atributo autoplay es un atributo booleano y por lo tanto no necesita de un valor, sin embargo si quieres escribir tu código al estilo XHTML puedes usar autoplay="true". Si la gente que visita tu sitio web aún no ha decidido cortarse las venas por el autoplay siempre puedes hacerlo mucho más divertido utilizando ademas el atributo loop para que se reproduzca en bucle:
<audio src="archivo.mp3" autoplay loop>
</audio>Controles
Si no queremos provocar un suicidio masivo en la red con nuestros bucles de audio auto reproducidos sin posibilidad de pausa, siempre podemos ofrecerle al usuario que navega por nuestro sitio web de unos controles básicos para el elemento audio:
<audio src="archivo.mp3" controls>
</audio>El atributo controls hace que el navegador nos provea de una interfaz con controles para la reproducción y el control del volumen de forma nativa. Los controles del navegador pueden ser suplantados por nuestros propios controles usando JavaScript a través de una API que nos proporciona métodos para controlar todos los aspectos de la reproducción del archivo de audio:
<audio id="player" src="archivo.mp3">
</audio>
<div>
<button onclick="document.getElementById('player').play();">Reproducir</button>
<button onclick="document.getElementById('player').pause();">Pausa</button>
<button onclick="document.getElementById('player').volume += 0.1;">Subir Volumen</button>
<button onclick="document.getElementById('player').volume -= 0.1;">Bajar Volumen</button>
</div>Buffer
Si queremos que nuestro archivo de audio sea precargado en segundo plano por el navegador, podemos usar el atributo preload que puede tomar tres posibles valores: none, auto y metadata. Safari precarga los archivos de audio por defecto, usando preload="none" podremos asegurarnos de que eso no ocurra en aquellos contextos en los que creamos que no es necesario que el navegador precargue los archivos, por ejemplo, cuando existen muchos archivos en una misma página:
<audio src="archivo.mp3" preload="none">
</audio>Si solo tienes un archivo de audio en tu página, seguramente quieras usar preload="auto"
Especificar más de un formato de archivo a la vez
Nada es perfecto, y claro, la etiqueta audio tampoco se salva de tener sus cosillas en esta ocasión por algo que no es parte de su especificación, el problema de los diferentes formatos soportados por diferentes fabricantes. Aunque el formato MP3 está ampliamente extendido desde hace muchos años, no es un formato abierto y está ligado a patentes. Las tecnologías que decodifican archivos MP3 deben pagar una tasa por la patente.
Eso está muy bien para corporaciones como Apple, Microsoft o Google, pero no lo está para los grupos de código abierto y software libre o las empresas pequeñas. Safari, IE y Chrome puede reproducir archivos MP3 sin problemas, sin embargo ese no es el caso de Firefox y de Opera (aunque Opera puede a través de ffmpeg).
Por suerte, existen otros formatos abiertos como Vorbis que no requieren de patentes para ser utilizados. Firefox, Opera y Chrome lo soportan de forma nativa, IE y Safari no. Además, existe una forma de definir más de un archivo de audio en diferentes formatos utilizando únicamente una etiqueta audio para ello. En lugar de usar el atributo src en la etiqueta de apertura, utilizaremos la etiqueta source para poder definir múltiples archivos:
<audio controls>
<source src="archivo.ogg" type="audio/ogg" />
<source src="archivo.mp3" type="audio/mpeg" />
</audio>Los navegadores que puedan reproducir archivos Ogg Vorbis no buscarán más allá de la primera etiqueta source mientras que los que no lo soporten, avanzarán hasta la siguiente etiqueta. De esta manera podremos complacer las necesidades de todos los usuarios sin discriminar a ningún navegador. Aunque el atributo type no es obligado, siempre es bueno utilizarlo y ayudar a los navegadores. El elemento source es un elemento standalone así que si estás usando sintaxis XHTML puedes utilizar la etiqueta <source /> tal y como he hecho yo.
¿Y los que usamos IE 8 o inferior?
Dejando a un lado la obviedad de que estáis locos, existe una forma de ofreceros esos archivos de audio utilizando Flash para ello. Como bien he apuntado antes, cualquier cosa que haya entre la apertura y cierre de las etiquetas audio será tenido en cuenta solo por navegadores que no soporten aún la nueva especificación por lo que podemos jugar con esto último para seguir utilizando a nuestro gran amigo Flash para estos menesteres:
<audio controls>
<source src="archivo.ogg" type="audio/ogg" />
<source src="archivo.mp3" type="audio/mpeg" />
<object type="application/x-shockwave-flash" data="player.swf?soundFile=archivo.mp3">
<param name="movie" value="player.swf?soundFile=archivo.mp3" />
</object>
</audio>Podemos ir incluso más allá y ofrecer un link directo para aquellos navegadores que no soporten ni la nueva especificación ni flash utilizando la etiqueta object:
<pre class="prettyprint lang-html"><code><audio controls>
<source src="archivo.ogg" type="audio/ogg" />
<source src="archivo.mp3" type="audio/mpeg" />
<object type="application/x-shockwave-flash" data="player.swf?soundFile=archivo.mp3">
<param name="movie" value="player.swf?soundFile=archivo.mp3" />
<a href="archivo.mp3">Descarga el archivo de audio</a>
</object>
</audio>Así estaremos ofreciendo nuestro contenido a todos los navegadores y dispositivos manteniendo unas buenas prácticas en cuanto a accesibilidad del contenido se refiere.
En Genbeta Dev | Introducción a HTML5
Comentarios
Gracias de nuevo por estos tutos sobre HTML5 :-P
"Las tecnologías que decodifican archivos MP3 deben de pagar una tasa por la patente."
Creo que quieres decir "deben pagar". Deber + infinitivo => obligación. Deber de + infinitivo => suposición.
Saludos!
Gracias por tu comentario Jónatan, ya lo he solucionado.
Lo que comentas de pagar por reproducir MP3s me sorprende. No digo que no sea así, pero en Linux he reproducido MP3s infinidad de veces (¿quien no recuerda XMMS, aquél "clon" de Winamp?) y nunca he tenido que pagar ninguna licencia. ¿Cómo se explica esto?
Lo de los codecs "privativos", en fin, la palabrita se las trae. No sé exactamente de qué me priva algo por no ser gratis o por no poder ver su código fuente. ¿Libertad? ¿Significa eso que cualquier coche del mercado, que no es ni gratis ni me dan los planos, es "privativo"? Supongo que es mejor dejar de lado estas puntillitas que acompañana a cada uno de los artículos del autor y centrarnos en HTML5.
PD: Chrome soporta MP3 pero no soporta H.264, el "MP3" de los vídeos, por no ser un codec libre (prefiere apoyar su propio codec, WebM). Curioso e incongruente.
Gracias por comentar Javier.
Claro que te sorprende, y te sorprende por que yo no he dicho tal cosa.
Me auto cito: Las tecnologías que decodifican archivos MP3 deben pagar una tasa por la patente
Tu nunca haas pagado por reproducir un archivo MP3 entre otras cosas por que eres un ser humano y no una tecnología pero te aseguro que quien esté detrás del desarrollo de XMMS debe de tener alguna licencia o sino, estaría incumpliendo varias leyes de propiedad intelectual.
Así es como me lo explico.
Privativo: http://www.wordreference.com/definicion/privativo Software Privativo: http://es.wikipedia.org/w/index.php?title=Software_privativo&redirect=yes
No se que tiene de malo la palabra cuando lleva usándose toda la vida para hacer referencia al software que no es libre o de código abierto. la cuestión es polemizar ¿no?. La tecnología que implementan los coches por cierto, digamos el sistema TDI de Seat - Wolsvagen es una tecnología privativa por que está sujeta a patentes efectivamente, no por que no sea gratis. De hecho, el software libre tampoco es gratis.
Voy a obviar eso que tu llamas "puntillas" por que no tiene ni sentido contestarte a eso.
Chrome soporta MP3 si, y no soporta H.264 no por que no sea abierto sino porque el códec de vídeo H.264 es propiedad de MPEG-LA de la que participan tanto Microsoft como Apple y que tienen encausada a Google por "supuestas violaciones de patentes" ni tan curioso, ni tan incongruente.
Por cierto, hay un códec libre para 264 se llama x264 y esta disponible para ser usado con ffmpeg que a su vez esta disponible para ser usado con Chrome, blanco es y en botella se vende...
A veces está bien lo de informarse antes de hablar.
Saludines.
Menuda respuesta Oscar, creo que deberías tomártelo con más calma hombre.
Mi primera pregunta era sincera, pero veo que te la has tomado por donde no es. Eso sí, me parece un poco cogido por los pelos tu respuesta. Hasta donde yo recuerdo, XMMS no tenía un paquete de pago. ¿De qué vivían entonces, si tenían que pagar las licencias de MP3? Supongo que de donaciones que harían personas comprometidas con el SL como tú.
La palabrita "privativo" tiene poca importancia que se lleve utilizando "toda la vida", como tú dices. Es una palabra tendenciosa y absurda y que ofende a cualquiera cuya opción personal a la hora de utilizar a producir software no se ajuste a la filosofía de SL. Utilizarla y defenderla con ese ahínco sólo pone en duda tu credibilidad.
Ah, y yo no sé dónde he dicho que el SL tenga que ser gratis. No intentes poner en mi boca una frase habitual de aquellos que no conocen el SL.
Y, sobre Chrome, tú te puedes montar todas las pajas mentales que quieras. Yo me limito a comentar las razones esgrimidas por el equipo de Chrome el día que anunciaron que dejaban de dar soporte a H.264: http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html
No veo ahí escrito nada sobre demandas y conspiraciones varias. Simplemente veo a una gente que afirma, y luego reafirmó en posteriores posts, que el no ser un códec libre les había llevado a no soportarlo, ahora que considero legítimo como estrategia si se cumple en cualquier caso (Android sigue soportando H.264 y Chrome sigue soportando Flash, que tampoco es que sea muy libre). Pero vamos, si llego a saber que te iba a sentar tan mal que dijera que Google no es coherente, me lo ahorro.
Y sí, Microsoft forma parte de MPG-LA. Pero, por si no lo sabías, paga el doble de royalties de los que recibe de esta organización, puesto que cada copia de Windows 7 tiene soporte para H.264. Vamos, que no es precisamente un negocio lo que hacen, por si es lo que intentabas insinuar (por supuesto que no ;)).
En fin, nada más por mi parte. Esperaré ansioso otra entrega de interesante contenido técnico sobre HTML5 y divertidas puyas que no vienen a cuento.
Puede ser que nunca hayan pagado tampoco por la licencia de uso de MP3 y eso depende muchas veces del país donde te encuentras.
No lo sé con certeza pero voy a poner un ejemplo. Yo tengo un pequeño proyecto de software con base de operaciones en Nepal; y en Nepal a nadie le importan las patentes de MP3 por lo que no hay ninguna ley que sancione su uso sin previo pago. Pero si soy un proyecto que radica en Estados Unidos entonces sí me puedo meter en un problema; lo mismo si hablamos de una empresa que tiene alcance mundial aunque viva físicamente en las Islas Caimán.
Según entiendo eso de las patentes es bastante relativo, hay muchas que aplican solo para Estados Unidos y tal vez América en general pero en la UE no son nada.
Así podríamos entender por qué, por ejemplo Ubuntu no ofrece soporte nativo para MP3 pero Pardus Linux con base en Turquía lo hace sin problemas.
Saludos de nuevo Javier.
No tengo ni idea de como lo hacía XMMS ni como lo hace liblame, el caso es que el formato MP3 está sujeto a patentes.
Te cito "Supongo que de donaciones que harían personas comprometidas con el SL como tú." después me vienes a hablar de puyas.
No defiendo la palabra privativo de ninguna forma especial, tan solo la uso indistintamente junto a propietario. No veo como afecta eso a la credibilidad de nadie la verdad.
De momento, Google no me da de comer, por lo que puedes atacarlo tanto como gustes, adelante, ancha es castilla.
En cuanto al tema de Chrome y H.264, pues mira, eso que tu llamas pajas mentales es una estrategia de Google con el único objetivo de intentar, de forma un tanto absurda por cierto, dañar a sus competidores directos Microsoft y Apple. Lo que diga Google en su blog de cara a la galería me parece estupendo.
En el futuro, te agradecería que te dirigieras a mi con el mismo respeto con el que yo me dirijo a ti o sencillamente comenzaré a ignorar tus comentarios. No son pajas mentales ni teorías conspiranoicas, es mi opinión (tan válida como la de cualquiera) sobre el asunto después de analizar la información que tengo a mi disposición. Espero que eso haya quedado suficientemente claro.
Lo que haga o deje de hacer Microsoft me es indiferente, me da lo mismo que gane o pierda en MPEG-LA, no he cuestionado en ningún momento a Microsoft ni a su política, estrategia o marketing, solo estaba exponiendo un hecho.
Dices que pongo palabras en tu boca en referencia a que tú no has dicho que el SL sea gratis, y lo malo que tiene la palabra escrita, es que queda registrada claro, te cito: "¿Libertad? ¿Significa eso que cualquier coche del mercado, que no es ni gratis ni me dan los planos, es "privativo"?. Como puedes comprobar, nada más lejos de la realidad.
Salud y buenas noches.
-- editado por última vez a las 00:31
interesante
No te voy a responder a todo por no caer en la reiteración, pero sí en lo que me importa.
La diferencia entre privado y privativo es más que evidente. Privado no tiene ninguna connotación negativa, privativo viene de "privar". El uso de palabras con connotaciones negativas en lugar de aquellas que son neutras, revelan nuestras intenciones (habida cuenta de que presupongo que conoces perfectamente el significado de ambas). De ahí que, cuando insistes en usar privativo en lugar de privado, me transmitas una imagen de subjetividad.
En cuanto al respeto en mis comentarios, te lo tienes que ganar respetando tú los míos. En tu anterior comentario terminaste con un "A veces está bien lo de informarse antes de hablar". A mí esto me parece una falta de respeto hacia mi comentario anterior. Procuro informarme cuando hablo y escribo. Por supuesto, me equivoco, como todo el mundo, bien por falta de entendimiento o por interpretación errónea. Pero, en la medida de mis posibilidades, no me lanzo a comentar sin tener ni idea como tú has insinuado.
En cuanto a tu teoría (¿te gusta más así?) sobre Google, me parece estupenda. Pero lo que han comunicado en público es lo que yo he enlazado, que entra en conflicto con su soporte a MP3.
De todas formas, si te he entendido bien, la razón que esgrimes tú es que H.264 no es soportado no por las razones oficiales (que no sea libre) sino por pertenecer a la MPEG (que les está demandando). Pero MP3 también pertenece a la MPEG, así que también ahí hay cierta incongruencia.
Y sobre el SL, sí, es verdad, tendría que haberme ahorrado lo de gratis. Pero como parecía que para tí lo importante de los codecs libres que estabas nombrando era el no tener que pagar patentes por ellos, de ahí que hiciera esa analogía. Supongo, entonces, que tú también defenderías con el mismo ahínco un codec que fuera libre, pero no gratuito.
Para terminar, un consejo: ya te he visto en posts anteriores sentirte atacado (o actuar como si lo estuvieras siendo) a la primera de cambio. Te recomiendo relax, porque cualquiera que escribe algo está sujeto a que los demás lo critiquen con más o menos ahínco. Es parte del juego de exponerse a la "opinión pública". Los comentaristas también estamos en él, gracias a este invento del karma, y nos tenemos que aguantar. Tu post, por muchas críticas que reciba, no va a difuminarse ni "pseudo-censurarse" como pasa con los comentarios. Así que si nosotros, que venimos aquí gratis, aceptamos de buen grado la situación, creo que tú deberías hacerlo también.
Gracias por tu comentario Javier.
Espero que disfrutes con próximas entregas de la serie.
Un saludo.
A tí por tu interesante respuesta.
Estaré esperando con curiosidad tu siguiente entrega.
"¿Y los que usamos IE 8 o inferior? Dejando a un lado la obviedad de que estáis locos,[...]" Buenísimo, lo que me habré podido reir. La verdad es que si que estarán locos... yo uso Google Chrome y va de maravilla, no lo cambiaria por IE ni loco.
Bueno, yo me refería a que pueden usar IE 9 en lugar de otro inferior ya que éste último tiene mucho mejores prestaciones y características.
El problema lo tiene principalmente la gente que aún usa Windows XP y que no pueden instalar IE 9 aunque si pueden instalar Safari, Opera, Chrome o Firefox.
Salud.
-- editado por última vez a las 20:32
Muchas gracias por el aporte!! Interesante para ir conociendo las nuevas etiquetas!!!! Saludos!!!
Dejando de lado a los trolls que desean que contestes a sus chorradas una y otra vez buena lista de artículos estos de html5.
Pd: No te justifiques por usar privativo, una sencilla búsqueda en cualquier diccionario explica perfectamente el significado en este contexto. El que no quiera entenderlo pues a su plin.
Excelente, no sabia la forma de reproducir una estación de radio shoutcast en el iphone y ipad por la falta de flash pero con html5 funciona a la perfección :D
hey esta muy chido tu post, he estado leyendo este y lo de video, en vdd me has resuelto muchas dudas y no cabe duda que IE se esta haciendo a un lado, el conocimiento es libre y no se tendria por que privatizar, ahora, me surge una duda con todo esto. haber si me puedes resolver... que pasa si quiero reproducir varios archivos de musica??? osea varias canciones, se puese con esta etiqueta?
Hola Óscar, acabo de registrarme en el sitio, he encontrado este artículo buscando información sobre html y como añadir un reproductor accesible en Wordpress.
He de decirte que se te han ocurrido casi todas las maneras para que el usuario tenga acceso al contenido excepto una jeje, ya que en el último ejemplo en el que usas Flash para ofrecer el audio y el enlace de descarga por si no hay soporte de Flash, los usuarios ciegos podemos tener muchas dificultades, ya que la mayor parte de los reproductores Flash no son accesibles, este que se ofrece no lo es por ejemplo. La solución que te ha faltado es poder pasarle una botonera mediante Javascript para poder manejar el Flash al igual que lo has hecho con el . ¿Podrías poner un ejemplo de como se realizaría esto para los que no tenemos ni idea de como hacer JS?
Muchas gracias y felicidades por el artículo.
Hola jortiz.
No es posible controlar el reproductor de flash con JavaScript puesto que como bien dices en tu comentario, flash no es accesible.
Solo seria posible hacerlo si el objeto flash nos proporcionara una API para ello.
Un saludo.
Hola, Óscar, comprendo, entonces por eso en este ejemplo es posible manejar el reproductor de Youtube mediante JS, porque Youtube da esa api ¿no?
http://www.enredar.fundaciononce.es/reproductor.php?vid=PhaF1QGCt8Y&t=Información para preservar nuestra privacidad en las redes sociales
¿Entonces no se te ocurre ninguna forma de realizar un reproductor accesible a los lectores de pantalla que funcione en IE8 utilizando JS?
Muchas gracias.
?
Hola de nuevo Jortiz.
Se puede utilizar Flowplayer que nos brinda una API en JavaScript pero no tengo ni idea de como funciona puesto que nunca la he utilizado.
http://flowplayer.org/documentation/
Un saludo.
Escribir un comentario
Para hacer un comentario es necesario que te identifiques: ENTRA o conéctate con FacebookConnect