Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL y htaccess


Etiqueta HTML5 audio: Embeber audios con su propio player

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.

ejemplo de la etiqueta HTML5 audio

Otras etiquetas multimedia interesantes son:

  • SVG para realizar gráficos vectoriales.
  • video que es similar que audio pero para reproducir vídeos.

¿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:

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:

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.

Atributos de la etiqueta de HTML5 audio

Os listo los atributos disponibles, clickando en cada uno de ellos se va al pos correspondiente con ejemplos prácticos:

  • 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.
comments powered by Disqus

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR