Como HTML5 introduce soporte de audio, ya no hay necesidad de usar peliculas Flash para reproducir audio en nuestras páginas web, Con HTML5 dos opciones se abren, por una parte está el elemento “audio”, y por otro “video”, la cual en este tutorial vamos a exponer el método de audio.
A continuación un ejemplo sencillo para insertar música en nuestra página utilizando etiquetas de HTML5:
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:
audio.js: MP3s y HTML5 en todos los navegadores
Insertar audio en un sitio web con HTML5
Introducción al elemento audio de HTML5
HTML5: Insertar música sin flash
Como poner audio en HTML5
Audio Data API
A continuación un ejemplo sencillo para insertar música en nuestra página utilizando etiquetas de HTML5:
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.
Más Información