La etiqueta HTML `audio`

Descubra los conceptos básicos para trabajar con la etiqueta `audio` de HTML

La audioetiqueta 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 de getUserMedia(), o puede reproducir una fuente de audio a la que haga referencia usando el srcatributo:

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 se configura la reproducción automática (más información sobre esto más adelante) y el usuario no puede ver cómo detenerlo, controlar el volumen o avanzar por la pista.

Para mostrar los controles integrados, puede agregar el controlsatributo:

audio src="file.mp3" controls /

Los controles pueden tener una apariencia personalizada.

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

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

Un archivo de audio no se reproduce automáticamente de forma predeterminada. Agregue el autoplayatributo para reproducir el audio automáticamente:

audio src="file.mp3" controls autoplay /

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

El loopatributo reinicia la reproducción del 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 puedes reproducir un archivo de audio silenciado usando el mutedatributo (no estoy muy seguro de cuál es la utilidad de esto):

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

CORS

El audio está sujeto a CORS y, a menos que lo permita en el lado del servidor, un archivo de audio no se puede reproducir en todos los orígenes.

Precarga de audio

Si no lo configura autoplay, la especificación dice que los navegadores solo descargarán los metadatos de audio (para saber la duración, por ejemplo), pero no descargarán el audio en sí.

Puedes forzar la precarga del audio usando

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

Mostrar contenido si audiono es compatible

La audioetiqueta tiene un gran soporte hasta en IE9, por lo que hoy en día no debería ser necesario tener un texto de marcador de posición, pero tenemos esta opción. Solo hay que agregar una etiqueta de cierre e insertar texto entre la etiqueta de apertura y la de cierre:Te recomendamos 🍌 Películas Porno en Español, Estrenos, Inglés, Parodias, Hentai XXX Online Gratis

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

Agregar controles nativos

En lugar de reproducir automáticamente el audio en un segundo plano, puede optar por solicitarle al navegador que muestre un conjunto de controles para permitir al usuario reproducir el audio cuando lo desee, tener alguna indicación de la duración, configurar el volumen y permitirle navegar por la pista. :

audio src="song.mp3" controls /

Así es como se ve en Chrome:

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

Agregar múltiples fuentes

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

Lo haces con la sourceetiqueta:

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 cada audioelemento usando JavaScript para crear proyectos e interfaces interesantes. Hay muchos eventos diferentes con los que podemos jugar.

El playevento se activa cuando comienza la reproducción de audio:

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

También puedes agregar directamente este evento (como los demás) usando el oneventatributo directamente en el elemento HTML:

audio src="song.mp3" controls onplay="playing()" /

const playing = () = { alert('Audio is playing!!!')}

Estos son algunos eventos que puedes escuchar:

• playEl audio empezó a reproducirse.
• pauseEl audio se ha pausado
• endedreproducción de audio completada
• timeupdateEl usuario interactuó con la línea de tiempo de reproducción y avanzó o retrocedió.
• volumechangeEl usuario cambió el volumen

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

Tips de HTML

Tal vez te puede interesar:

1. La etiqueta HTML `iframe`
2. Cómo cargar una imagen en un lienzo HTML
3. Cómo utilizar insertAdjacentHTML
4. Cómo cambiar la URL de una imagen HTML en modo oscuro

La etiqueta HTML `audio`

CORSPrecarga de audioMostrar contenido si audiono es compatibleAgregar controles nativosAgregar múltiples fuentesTrabajar con eventos de audio

programar

es

2025-01-21

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente