El elemento audio: src, controls, loop y autoplay
Inserte reproductores de audio con atributos nativos de HTML5
El elemento audio: src, controls, loop y autoplay es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Audio nativo en HTML5
HTML5 introdujo el elemento <audio> para insertar audio sin plugins:
<audio src="podcast.mp3" controls>
Your browser does not support audio.
</audio>
<!-- controls: show the default player UI (play, pause, volume) -->
<!-- Fallback text is shown to browsers that don't support audio -->El atributo controls
El atributo controls muestra el reproductor de audio integrado del navegador:
<!-- Without controls: audio plays but no UI is visible -->
<audio src="bg-music.mp3"></audio>
<!-- With controls: browser shows play/pause, volume, scrubber -->
<audio src="podcast.mp3" controls></audio>
<!-- Always include controls for user-accessible audio
Unless it is a background ambient sound (use controls anyway for accessibility) -->El atributo loop
El atributo loop reinicia el audio cuando termina:
<audio src="bg-music.ogg" controls loop></audio>
<!-- loop is a boolean attribute -->
<!-- Good for: background music, demo soundscapes -->
<!-- Bad UX: loops without user consent are annoying -->El atributo autoplay
El atributo autoplay comienza la reproducción cuando se carga la página:
<audio src="alert.mp3" autoplay></audio>
<!-- Most modern browsers BLOCK autoplay for audio by default -->
<!-- Exception: autoplay + muted is allowed -->
<!-- Browsers allow autoplay if the user has interacted with the page -->
<!-- The muted workaround: -->
<audio src="bg.mp3" autoplay muted loop></audio>El atributo muted
El atributo muted inicia el audio silenciado:
<!-- Muted audio can autoplay in most browsers: -->
<audio src="ambient.mp3" autoplay muted loop></audio>
<!-- User can unmute with the controls -->
<audio src="ambient.mp3" autoplay muted loop controls></audio>El atributo preload
El atributo preload indica cuántos datos se deben cargar:
<audio src="podcast.mp3" controls preload="none">...</audio>
<!-- none: don't preload anything (saves bandwidth on mobile) -->
<audio src="short-clip.mp3" controls preload="auto">...</audio>
<!-- auto: preload the entire file (browser decides) -->
<audio src="song.mp3" controls preload="metadata">...</audio>
<!-- metadata: preload only duration and basic info (good default) -->Controlar el audio con JavaScript
Controle el audio con JavaScript:
const audio = document.getElementById('my-audio');
// Play:
audio.play();
// Pause:
audio.pause();
// Current time (seconds):
audio.currentTime = 30; // jump to 30 seconds
// Volume (0 to 1):
audio.volume = 0.5;
// Duration:
console.log(audio.duration);Eventos de audio
Eventos de audio habituales:
audio.addEventListener('play', () => console.log('Playing'));
audio.addEventListener('pause', () => console.log('Paused'));
audio.addEventListener('ended', () => console.log('Finished'));
audio.addEventListener('timeupdate', () => {
console.log('Position:', audio.currentTime);
});
audio.addEventListener('error', () => console.log('Error loading audio'));Reproductor de audio personalizado
Construya un reproductor personalizado con JavaScript y CSS:
<div class="audio-player">
<audio id="player" src="podcast.mp3" preload="metadata"></audio>
<button id="play-btn" aria-label="Play">▶</button>
<input type="range" id="scrubber" value="0" min="0" max="100">
<span id="time">0:00</span>
</div>
<script>
const audio = document.getElementById('player');
document.getElementById('play-btn').addEventListener('click', () => {
audio.paused ? audio.play() : audio.pause();
});
</script>Audio accesible
Requisitos de accesibilidad para el audio:
- Proporcione una transcripción de todo el contenido de audio
- En el caso de los podcasts: incluya un enlace a una transcripción de texto
- El audio que se reproduce automáticamente infringe WCAG 1.4.2 si dura más de 3 segundos
- Asegúrese de que los controles sean accesibles mediante el teclado (los controles nativos lo son)
Elemento src frente a source
Especifique alternativas de formato con <source> (en la siguiente lección):
<!-- Single format: -->
<audio controls src="podcast.mp3">...</audio>
<!-- Multiple formats: -->
<audio controls>
<source src="podcast.opus" type="audio/ogg; codecs=opus">
<source src="podcast.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>Comprobación rápida
¿Qué atributo de audio muestra la interfaz del reproductor integrado del navegador?
Recapitulación: elemento audio
Aspectos esenciales del elemento audio:
controls— muestra la interfaz del reproductor (inclúyalo casi siempre)loop— reinicia la reproducción al terminarautoplay— reproduce al cargar la página (la mayoría de los navegadores lo bloquean)muted— inicia el audio silenciado (permite autoplay en la mayoría de los navegadores)preload="metadata"— valor predeterminado adecuado para podcasts y música- Proporcione transcripciones para garantizar la accesibilidad
Preguntas frecuentes
¿La lección «El elemento audio: src, controls, loop y autoplay» es gratis?
Sí — el texto completo de «El elemento audio: src, controls, loop y autoplay» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «El elemento audio: src, controls, loop y autoplay»?
Inserte reproductores de audio con atributos nativos de HTML5 Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «El elemento audio: src, controls, loop y autoplay»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El elemento audio: src, controls, loop y autoplay
- El elemento video y la relación de aspecto
- El elemento source para varios formatos
- Subtítulos con track y WebVTT