Audio HTML

La leçon video a montré les clips avec image. Audio est le cousin son seul : podcasts, notes vocales, intros de leçon et effets courts. L’élément est audio. Commencez avec controls pour que les visiteurs lancent la lecture eux-mêmes — la même politesse que pour video — sans poster, cadre visuel ni boîte vidéo réservée. Une barre fine charge un fichier depuis media/ et garde la mise en page plus calme qu’un clip complet.

Ce que fait audio

audio demande au navigateur de récupérer un fichier son et d’afficher un lecteur compact. Vous pouvez fixer un fichier avec src, ou lister plusieurs enfants <source> pour que le navigateur choisisse un format qu’il comprend. Il n’y a pas de toile visuelle comme pour video ; avec controls, on voit en général une barre fine. La timeline, le mute et le volume comptent encore, car le son interrompt une pièce calme autant qu’une vidéo forte. Traitez le lecteur comme un outil que le visiteur pilote, pas comme un fond qui démarre seul.

Réponse directe

Écrivez <audio controls src="sound.mp3"> ou imbriquez plusieurs balises <source> pour des formats comme MP3 et Ogg. Incluez un court texte de repli (et éventuellement un lien de téléchargement) dans l’élément. Préférez des fichiers compressés pour le web. Évitez l’autoplay surprise avec du son. Si le clip enseigne par la parole, prévoyez une transcription ou des notes claires à côté du lecteur.

Formats que voit un débutant

Les navigateurs ne préfèrent pas tous le même codec. Les débutants démarrent souvent avec MP3 puis ajoutent Ogg en second candidat. WAV convient à l’édition locale mais est souvent trop lourd comme seule copie web. Le tableau ci-dessous est une carte de départ pratique — pas une encyclopédie des codecs.

Audio simple avec controls

Un court MP3 plus controls suffit pour beaucoup de pages d’entraînement. Placez le fichier sous media/, vérifiez le chemin comme pour les URL d’images. Si la barre apparaît sans lecture, ouvrez les outils développeur ou testez l’URL du fichier — les chemins cassés échouent en silence.

Lecture de l’exemple simple

• controls expose lecture, pause, recherche et souvent le volume
• src pointe vers le fichier relatif à la page (ici sous media/)
• Le texte intérieur est un repli si l’élément ne peut pas lire
• Pas de poster ici — cela appartient à video
• Pour une barre audio basique, vous n’avez en général pas besoin de width comme pour la vidéo

Sources multiples et lien de téléchargement

Lister Ogg et MP3 avec des valeurs MIME dans type augmente la chance qu’un navigateur trouve un candidat lisible. L’ordre compte : le navigateur parcourt la liste jusqu’à pouvoir décoder quelque chose. Un lien de téléchargement aide en cas d’échec ou pour enregistrer le fichier. En exportant deux formats, gardez le même contenu de leçon dans chaque fichier.

Lecture de l’exemple multi-sources

• Les sources sont essayées dans l’ordre jusqu’à une lecture possible
• type aide à ignorer rapidement les formats non pris en charge
• Le lien de téléchargement est un repli humain dans audio
• Gardez noms et dossiers exacts — une faute dans src ressemble à un « lecteur cassé »
• Vous pouvez encore garder un seul src pour de minuscules démos ; le multi-source est la montée en robustesse

Respecter les oreilles et la bande passante

L’autoplay sonore sans action claire de l’utilisateur est souvent bloqué et généralement impoli. Sans controls, le visiteur ne peut pas mettre en pause honnêtement. Un long WAV non compressé gaspille les données mobiles quand un MP3 compact enseigne la même idée. Exportez de l’audio taille web comme de la vidéo taille web. La musique de fond plus tard est une décision de conception séparée avec consentement et mute — pas le défaut d’une page débutant.

Transcriptions quand la parole enseigne

Si le clip explique un concept avec des mots, prévoyez une transcription ou des notes claires sur la page. audio n’utilise pas alt comme img. L’accessibilité de la parole, c’est des alternatives texte, des titres clairs près du lecteur et le contrôle utilisateur — pas une image poster. Même un court paragraphe qui reformule le conseil parlé aide ceux qui ne peuvent pas écouter maintenant.

Audio vs video vs embeds

• Fichier son auto-hébergé → audio
• Clip auto-hébergé avec image → video
• Page lecteur d’un autre site → souvent iframe (leçon ultérieure sur les embeds style YouTube)
  Ne mettez pas un podcast dans video seulement parce que vous y avez vu controls d’abord. N’enveloppez pas un MP3 local dans un iframe quand audio suffit. Associez l’élément au type de média.

Pratique dans l’éditeur

1. Ajoutez un court .mp3 sous media/ (dix à trente secondes suffisent).
2. Intégrez-le avec audio controls et un chemin relatif correct.
3. Lisez, mettez en pause, cherchez et réglez le volume avec l’UI du navigateur.
4. Optionnel : ajoutez un second type source et un lien de téléchargement.
5. Écrivez une phrase de transcription ou de notes à côté du lecteur si le clip parle.
6. Vérifiez que la page a encore du sens si personne n’appuie sur lecture.

Erreurs faciles

• Autoplay sonore sans action claire de l’utilisateur
• Absence de controls
• Lier un énorme WAV non compressé quand un MP3 suffit
• Attendre un poster sur audio
• Oublier le texte de repli ou le chemin de téléchargement
• Confondre les embeds iframe style YouTube avec des fichiers audio auto-hébergés
• Contenu parlé différent dans chaque source pendant les tests
• Chemin media/ cassé et blâmer le navigateur

Résumé

• audio intègre des fichiers son que vous hébergez
• Utilisez controls pour lecture, pause et recherche
• Plusieurs formats source avec type améliorent le support
• Préférez des fichiers compressés et une lecture démarrée par l’utilisateur
• Prévoyez une transcription ou des notes quand la parole porte la leçon
• Audio pour le son, video pour image+son, iframe pour les lecteurs externes