La etiqueta HTML `audio`

Descubra los conceptos básicos para trabajar con HTMLaudioetiqueta

losaudioLa etiqueta le permite incrustar contenido de audio en sus páginas HTML.

Este elemento puede transmitir audio, tal vez usando un micrófono a través degetUserMedia(), o puede reproducir una fuente de audio a la que hace referencia mediante elsrcatributo:

<audio src="file.mp3" />

De forma predeterminada, el navegador no muestra ningún control para este elemento. Lo que significa que el audio se reproducirá solo si está configurado en reproducción automática (más sobre esto más adelante) y el usuario no puede ver cómo detenerlo, o controlar el volumen o moverse por la pista.

Para mostrar los controles integrados, puede agregar elcontrolsatributo:

<audio src="file.mp3" controls />

Los controles pueden tener una máscara personalizada.

Puede especificar el tipo MIME del archivo de audio utilizando eltypeatributo. Si no se configura, el navegador intentará determinarlo automáticamente:

<audio src="file.mp3" controls type="audio/mpeg" />

Un archivo de audio por defecto no se reproduce automáticamente. Añade elautoplayatributo para reproducir el audio automáticamente:

<audio src="file.mp3" controls autoplay />

Nota: los navegadores móviles no permiten la reproducción automática

losloopEl atributo reinicia la reproducción de audio a las 0:00 si está configurado; de lo contrario, si no está presente, el audio se detiene al final del archivo:

<audio src="file.mp3" controls autoplay loop />

También puede reproducir un archivo de audio silenciado con elmutedatributo (no estoy realmente seguro de cuál es la utilidad de esto):

<audio src="file.mp3" controls autoplay loop muted />

CORS

El audio está sujeto aCORSya menos que lo permita en el lado del servidor, un archivo de audio no se puede reproducir en origen cruzado.

Precarga del audio

Si no configurasautoplay, la especificación dice que los navegadores solo descargarán los metadatos de audio (para averiguar la longitud, por ejemplo) pero no descargarán el audio en sí.

Puede forzar la precarga del audio usando

<audio src="song.mp3" preload="auto" />

Visualización de contenido siaudiono es apoyado

losaudiola etiqueta esmuy bien apoyado, hasta IE9, por lo que hoy en día no debería haber necesidad de tener un texto de marcador de posición, pero tenemos esta opción. Simplemente agregue una etiqueta de cierre e inserte texto entre la etiqueta de apertura y cierre:

<audio src="song.mp3">Audio tag not supported</audio>

Agregar controles nativos

En lugar de reproducir automáticamente el audio en segundo plano, puede optar por pedirle al navegador que muestre un conjunto de controles para permitir que el usuario reproduzca el audio cuando lo desee, tenga alguna indicación de la duración, establezca el volumen y le permita navegar por la pista:

<audio src="song.mp3" controls />

Así es como se ve en Chrome:

Audio element

Puede diseñar controles usando CSS, aunque esto está fuera del alcance de esta introducción.

Agregar múltiples fuentes

Los navegadores pueden implementar un códec de audio pero no otro. Tal vez desee utilizar un estándar más nuevo que reduzca el tamaño del archivo a la mitad, pero aún desea admitir navegadores más antiguos.

Lo haces con elsourceetiqueta:

<audio controls>
 <source src="song.opus" type="audio/ogg; codecs=opus"/>
 <source src="song.ogg" type="audio/ogg; codecs=vorbis"/>
 <source src="song.mp3" type="audio/mpeg"/>
</audio>

Trabajar con eventos de audio

Podemos escuchar eventos en cadaaudioelemento usando JavaScript, para crear proyectos e interfaces interesantes. Hay muchos eventos diferentes para jugar.

losplayEl evento se activa cuando comienza la reproducción de audio:

document.querySelector('video').addEventListener('play', () => {
  alert('Audio is playing!!!')
})

También puede agregar directamente este evento (como los demás) utilizando elon<event>atributo directamente en el elemento HTML:

<audio src="song.mp3" controls onplay="playing()" />
const playing = () => {
  alert('Audio is playing!!!')
}

Estos son algunos eventos que puede escuchar:

  • playel audio comenzó a reproducirse
  • pauseel audio se pausó
  • endedreproducción de audio completada
  • timeupdateel usuario interactuó con la línea de tiempo de reproducción y avanzó / retrocedió
  • volumechangeel usuario cambió el volumen

Hay muchos más eventos relacionados con la carga de audio ypuedes encontrar la lista completa en MDN.

Descarga mi gratisManual HTML


Más tutoriales de HTML: