L’élément `audio` : `src`, commandes, boucle et lecture automatique
Intégrez des lecteurs audio avec les attributs HTML5 natifs.
L’élément `audio` : `src`, commandes, boucle et lecture automatique est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Audio natif en HTML5
HTML5 a introduit l’élément <audio> pour intégrer du contenu audio sans extension :
<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 -->L’attribut controls
L’attribut controls affiche le lecteur audio intégré au navigateur :
<!-- 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) -->L’attribut loop
L’attribut loop redémarre l’audio lorsqu’il se termine :
<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 -->L’attribut autoplay
L’attribut autoplay commence la lecture au chargement de la page :
<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>L’attribut muted
L’attribut muted démarre l’audio en mode muet :
<!-- 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>L’attribut preload
L’attribut preload indique la quantité de données à charger :
<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) -->Contrôler l’audio avec JavaScript
Contrôlez l’audio avec 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);Événements audio
Événements audio courants :
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'));Lecteur audio personnalisé
Créez un lecteur personnalisé avec JavaScript et 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>Accessibilité de l’audio
Exigences d’accessibilité pour l’audio :
- Fournissez une transcription de tout le contenu audio
- Pour les podcasts : fournissez un lien vers une transcription textuelle
- L’audio en lecture automatique enfreint la règle WCAG 1.4.2 s’il dure plus de 3 secondes
- Vérifiez que les commandes sont accessibles au clavier (les commandes natives le sont)
Élément src et élément source
Indiquez des formats alternatifs avec <source> (leçon suivante) :
<!-- 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>Vérification rapide
Quel attribut audio affiche l’interface du lecteur intégré au navigateur ?
Récapitulatif : élément audio
Éléments essentiels de l’élément audio :
controls— afficher l’interface du lecteur (à inclure presque toujours)loop— redémarrer à la fin de la lectureautoplay— lire au chargement (bloqué par la plupart des navigateurs)muted— démarrer en mode muet (permet la lecture automatique dans la plupart des navigateurs)preload="metadata"— bonne valeur par défaut pour les podcasts et la musique- Fournissez des transcriptions pour l’accessibilité
Questions Fréquemment Posées
La leçon « L’élément `audio` : `src`, commandes, boucle et lecture automatique » est-elle gratuite ?
Oui — le texte complet de « L’élément `audio` : `src`, commandes, boucle et lecture automatique » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « L’élément `audio` : `src`, commandes, boucle et lecture automatique » ?
Intégrez des lecteurs audio avec les attributs HTML5 natifs. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « L’élément `audio` : `src`, commandes, boucle et lecture automatique » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- L’élément `audio` : `src`, commandes, boucle et lecture automatique
- L’élément `video` et le rapport d’aspect
- L’élément `source` pour plusieurs formats
- Sous-titres avec `track` et WebVTT