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


Todos los atributos de audio HTML5 y sus funcionalidades

En este nuevo post vamos a ver los atributos de audio HTML5 que podemos usar en nuestros desarrollos para controlar la reproducción de nuestros audios.

Otros post de HTML5 con una temática similar son:

A continuación tenemos un player sencillo de audio.

atributos de audio HTML5

Todos los atributos de audio HTML5

Vamos con el listado de los atributos de audio HTML5 que son casi los mismos que los de vídeo en HTML5:

  • 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.

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
Aviso de cookies