Post de introducción a la etiqueta de HTML5 audio, esta nueva etiqueta tiene como funcionalidad crear un player/reproductor para reproducir audios en una página web. Establece un estandar para embeber audios.
Hasta la llegada de HTML5 no había ningún estandar para la reproducción de vídeos y audios en la web, por lo que la mayoría de webs optaban por usar el plugin de flash, QuicTime, Windows Media…
Con la etiqueta audio es muy sencillo crear el player para reproducir audios, os muestro una imagen en la que podemos apreciar un audio con su player con tan solo 3 líneas de código.
Otras etiquetas multimedia interesantes son:
¿Qué navegadores soportan HTML5 audio?
La compatibilidad de los principales navegadores con audio en HTML5 es la siguiente:
- Internet Explorer: Desde la versión 9.0 y posteriores.
- Mozilla Firefox: Desde la versión 3.5 y posteriores.
- Google Chrome: Desde la versión 4.0 y posteriores.
- Safari: Desde la versión 4.0 y posteriores.
Formatos de audio compatibles
Tenemos 3 formatos compatibles siendo el MP3 el más soportado por los navegadores:
- MP3: Compatible con Google Chrome, Mozilla Firefox, Safari e Internet Explorer.
- Ogg: Compatible con Google Chrome y Mozilla Firefox.
- Wav: Compatible con Google Chrome, Mozilla Firefox y Safari.
Los media type para referenciar cada uno de estos 3 formatos son:
- MP3: audio/mpeg
- Ogg: audio/ogg
- Wav: audio/wav
Sintaxis básica de la etiqueta de HTML5 audio
Veamos la sintaxis básica extraída de su web oficial:
|
1 2 3 |
<audio> <source src="audio.mp3" type="video/mpeg"> </audio> |
Tal y como se aprecia en el código superior con tan solo 2 etiquetas podemos crear el player:
- Con <audio> indicamos que vamos que se va a embeber un audio.
- Con <source> especificamos la ruta del audio a reproducir.
Ejemplo básico de la etiqueta HTML5 audio
Vamos con un primer ejemplo básico de la etiqueta audio para verla en funcionamiento:
|
1 2 3 4 |
<audio controls> <source src="014-audio-helicoptero.mp3" type="audio/mp3"> Tu navegador no soporta HTML5 audio. </audio> |
Os explico el ejemplo superior:
- Con el atributo controls mostramos los controles del player (play, pause, volumen…).
- En la etiqueta source establecemos la ruta (src) del audio a reproducir y definimos el tipo (audio/mpeg).
- En caso de que el navegador no soporte esta etiqueta mostramos un mensaje por pantalla.
Introducción de subtítulos con la etiqueta track
Para la inserción de subtítulos os recomiendo este post:
Atributos de la etiqueta de HTML5 audio
Os listo los atributos de audio disponibles:
- autoplay: Con este atributo se especifica que el audio comience automáticamente. Se puede especificar de estas 2 maneras autoplay=»autoplay» o autoplay.
- preload: En caso de omisión su valor es «auto». Sirve para especificar si queremos que el audio se vaya cargando independientemente si se da al play o no. Aumentaría el consumo de ancho de banda pero el usuario tendría menos cortes en la reproducción. Tenemos 3 posibles valores para este atributo:
— preload = «none»: El audio no comienza a descargarse hasta que el usuario haga play.
— preload = «metadata»: Solo se cargan los metadatos del audio (dimensiones, primer frame, duración…).
— preload = «auto»: El audio se descarga independientemente de la ejecución del play. - controls: Con este atributo especificamos si se muestran los típicos controles del audio (play, stop, volumen…). Tiene 2 posibles sintaxis: controls=»controls» o controls.
- loop: Especifica la reproducción continua del audio, es decir, una vez acabada la reproducción comienza de nuevo a reproducirse. Tiene 2 posibles sintaxis: loop=»loop» o loop.
- muted: Funcionalidad para quitar el volumen al audio.
- mediagroup: Establece un grupo de reproducción al que pertenece el audio.
- ‘src’ de la etiqueta source: URL/path del audio a reproducir.