L'élément HTML <audio> est utilisé afin d'intégrer un contenu sonore dans un document. Il peut contenir une ou plusieurs sources audio représentées avec l'attribut src ou l'élément <source>. S'il y a plusieurs sources, l'agent utilisateur choisira celle qui convient le mieux.

Attributs

Comme tous les autres éléments HTML, cet élément possède les attributs universels.

autoplay

Attribut booléen. Si celui-ci est renseigné (même avec une valeur "false"), l'élément audio sera joué automatiquement dès qu'assez de données seront chargées.

Note : la lecture automatique peut être source de nuisance pour les utilisateurs. Mieux vaut l'éviter lorsque c'est possible ou proposer à l'utilisateur de pouvoir choisir cette option. Cette valeur peut être utile lorsqu'on crée des fichiers audio dont la source sera définie a posteriori.
controls
Si l'attribut est présent, le navigateur affichera des contrôles pour que l'utilisateur puisse gérer la lecture, le volume, et le déplacement du curseur de lecture.
loop
Attribut booléen. S'il est renseigné, la lecture du fichier se fera en boucle.
muted
Attribut booléen, indiquant si le son de l'élément audio est initialement coupé. Sa valeur par défaut est false.
played
Un objet TimeRanges indiquant tous les fragments de l'élément audio qui ont déjà été joués.
preload
Cet attribut indique au navigateur ce que l'auteur du code html pense de l'utilisation optimale de cet élément. Il accepte uniquement les valeurs suivantes :
 
  • none :  l'élément audio ne devrait pas être mis en cache
  • metadata : seules les méta-données (comme la durée) sont préchargées
  • auto : tout le fichier peut être téléchargé, même s'il n'est pas certain que l'utilisateur le lira
  • "" (chaîne de caractères vide) : synonyme de auto
Si cet attribut n'est pas renseigné, la valeur par défaut sera celle du navigateur (chaque navigateur pouvant définir sa propre valeur). Les spécifications recommandent la valeur metadata.
Notes d'utilisation :
  • L'attribut autoplay est prioritaire sur cet attribut. Si le navigateur a besoin de jouer cet élément, il le téléchargera automatiquement
  • La spécification n'impose pas au navigateur de prendre en compte cet attribut. Il n'a qu'une valeur indicative.
src
L'URL du fichier audio à intégrer. Cet attribut suit les spécifications du CORS. Il est optionnel; on peut lui préférer l'élément <source> dans le bloc de l'élément sur lequel il est défini.

Notes d'utilisation

Bases

Il est possible d'intégrer un contenu alternatif entre la balise ouvrante <audio> et la balise fermante </audio> pour afficher du contenu dans les navigateurs qui ne prennent pas en charge l'élément <audio>.

Les contrôles basiques pour la lecture sont accessibles grâce à l'attribut controls (voir ci-après). Pour effectuer des manipulations plus avancées et afficher des contrôles spécifiques, on peut utiliser l'API HTML Media et les fonctions spécifiques définies par l'interface HTMLAudioElement.

Flux audio / API Web Audio

L'API Web Audio peut être utilisée pour manipuler et générer des flux audio grâce à du code JavaScript. Pours plus d'informations à ce sujet, on pourra consulter la documentation de l'API Web Audio.

<audio> et les sous-titres

Bien que les éléments <video> puissent embarquer des sous-titres grâce à l'élément <track> (cf. Ajouter des légendes et sous-titres aux vidéos HTML5), cela n'est pas possible pour les éléments <audio>. Les éléments <track> inclus dans les balises <audio> seront purement ignorés. Pour plus d'informations et des méthodes de contournement, consulter WebVTT et l'audio, un billet (en anglais) écrit par Ian Devlin.

Exemples

Utilisation simple

<!-- Simple lecture audio -->
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
  Votre navigateur ne supporte pas l'élément <code>audio</code>.
</audio>

Utilisation de l'élément <source>

<audio controls="controls">
  <source src="toto.wav" type="audio/wav">
  Votre navigateur ne prend pas en charge l'élément <code>audio</code>.
</audio>

Utilisation de plusieurs éléments <source>

Dans l'exemple qui suit, le navigateur essaiera de jouer le premier fichier correspondant au premier élément (celui avec le codec Opus) : s'il peut le lire, il n'interprète pas les suivants ; s'il ne peut pas le lire, il tente de lire le deuxième puis, si ce n'est toujours pas possible, le troisième (au format MP3) :

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

Accessibilité

Les éléments audio contenant des dialogues parlés doivent fournir des sous-titres et des transcriptions qui décrivent précisément le contenu. Les sous-titres permettent aux personnes souffrant de troubles auditifs ou ne pouvant pas utiliser le son de l'appareil de lire le fichier. Les transcriptions permettent aux personnes ayant besoin de plus de temps pour lire le contenu d'utiliser un format plus adéquat.

Si un service de sous-titre automatique est utilisé, il est nécessaire de vérifier le contenu généré afin de s'assurer qu'il correspond correctement à la source audio.

En plus des dialogues, les sous-titres et transcriptions devraient également permettre d'identifier les musiques et effets sonores qui véhiculent des informations importantes (dont l'émotion et le ton) :

1
00:00:00 --> 00:00:45
[Musique avec des trompettes sonnantes]

2 
00:00:46 --> 00:00:51
Elle est où la poulette ?

16
00:00:52 --> 00:01:02
[sur un ton énervé] Vous rendez la poulette ou c'est plus vous qui donnez à manger aux lapins ?

Résumé technique

Catégories de contenu Contenu de flux, contenu phrasé, contenu intégré.
Si l'attribut controls est utilisé : contenu interactif et contenu tangible.
Contenu autorisé Si l'élément possède un attribut src : zéro ou plusieurs éléments <track>, suivis par du contenu transparent ne contenant pas d'éléments média, c'est-à-dire des éléments qui ne soient pas <audio> ou <video>
Sinon : zéro ou plusieurs éléments <source> suivis par un élément <track>, suivi par du contenu transparent ne contenant pas d'éléments média (ni <audio> ni <video>).
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément acceptant du contenu intégré.
Rôles ARIA autorisés application
Interface DOM HTMLAudioElement

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<audio>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<audio>' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple3 Oui3.51910.53.1
autoplay3 Oui3.5910.53.1
buffered ? Oui4 ? ? ?
controls3 Oui3.5910.53.1
loop3 Oui11910.53.1
mozcurrentsampleoffset Non Non3.5 Non Non Non
muted ? Oui11 ? ? ?
played49141511469.1
preload3 Oui

4

3.5 — 42

9

15

10.5 — 152

3.1
src3 Oui3.5910.53.1
volume ? Oui ? ? ? ?
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple318 Oui41 Oui Oui Oui
autoplay318 Oui4 Oui Oui Oui
buffered ? ? Oui4 ? ? ?
controls318 Oui4 Oui Oui Oui
loop318 Oui14 Oui Oui Oui
mozcurrentsampleoffset Non Non Non4 Non Non Non
muted ? ? Oui14 ? ? ?
played49491415 Oui Oui5.0
preload318 Oui4

15

Oui — 142

Oui Oui
src318 Oui4 Oui Oui Oui
volume ? ? Oui ? Oui Oui ?

1. For Firefox to play audio, the server must serve the file using the correct MIME type.

2. Supported as autobuffer.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : SphinxKnight,