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.

L'exemple qui précède illustre le fonctionnement simple d'un élément <audio>, à la façon de ce qui peut être fait pour une image avec l'élément <img> : on inclut un chemin vers la ressource grâce à l'attribut src et on peut ajouter d'autres attributs afin de fournir d'autres informations : lecture automatique, lecture en boucle, utilisation des contrôles par défaut du navigateur, etc

Le contenu présent à l'intérieur des balises <audio></audio> est affiché comme contenu alternatif lorsque le navigateur ne prend pas en charge l'élément.

Les navigateurs ne prennent pas en charge l'ensemble des formats audio et plusieurs sources peuvent être fournies en utilisant des éléments <source> imbriqués. Ainsi, le navigateur sélectionnera la première ressource dont il prend en charge le format:

<audio controls>
  <source src="monAudio.mp3" type="audio/mp3">
  <source src="monAudio.ogg" type="audio/ogg">
  <p>Votre navigateur ne prend pas en charge l'audio HTML. Voici un
     un <a href="myAudio.mp4">lien vers le fichier audio</a> pour le 
     télécharger.</p>
</audio>

Autres notes :

  • Si l'attribut controls n'est pas indiqué, le lecteur audio n'incluera pas les contrôles par défaut du navigateur. Il est possible de créer des contrôles spécifiques en JavaScript grâce à l'API HTMLMediaElement.
  • Afin d'avoir un contrôle précis sur le contenu audio, l'API HTMLMediaElement déclenche de nombreux évènements.
  • Il est aussi possible d'utiliser lAPI Web Audio afin de générer et de manipuler des flux audio en JavaScript.
  • Les éléments <audio> ne peuvent pas avoir de sous-titres contrairement aux éléments <video>. Pour plus d'informations et certaines méthodes de contournements, voir WebVTT et l'audio, écrit par Ian Devlin.

Pour apprendre comment utiliser les éléments liés aux médias, nous vous conseillons de lire le tutoriel sur le contenu audio et vidéo.

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.
crossorigin
Cet attribut à valeur contrainte indique comment le CORS doit être utilisé afin de récupérer la ressource. Les ressources utilisant le CORS peuvent être réutilisées dans un élément  <canvas> sans corrompre celui-ci. Les valeurs autorisées pour cet attribut sont :
anonymous
Une requête multi-origine est envoyée sans information d'authentification. Autrement dit, l'en-tête HTTP Origin est envoyé sans cookie, certificat X.509 ou sans authentification HTTP. Si le serveur ne fournit pas d'information d'authentification au site d'origine (sans indiquer l'en-tête Access-Control-Allow-Origin), la ressource sera corrompue (tainted) et son utilisation sera restreinte.
use-credentials
Une requête multi-origine est envoyée avec une information d'authentification (c'est-à-dire avec un en-tête HTTP Origin: qui contient un cookie, un certificat ou effectuant une authentification HTTP).
Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS et empêche ainsi d'utiliser la ressource dans un <canvas>. Si la valeur fournie est invalide, elle sera considérée comme anonymous. Voir Paramétrage des attributs relatifs au CORS pour plus d'informations.
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.
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
La valeur par défaut peut varier d'un navigateur à l'autre. 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.

Évènements

Nom Condition du déclenchement
audioprocess La mémoire tampon en entrée d'un ScriptProcessorNode peut désormais être traité.
canplay Le navigateur peut lire le média mais estime que trop peu de données ont été chargées pour lire le média jusqu'à sa fin (il faudra vraisemblablement un arrêt pour un chargement en mémoire tampon).
canplaythrough Le navigateur estime qu'il peut lire le média jusqu'à sa fin, sans avoir à interrompre la lecture par du chargement en mémoire tampon.
complete Le rendu d'un OfflineAudioContext est terminé.
durationchange L'attribut duration a été mis à jour.
emptied Le média est devenu vide. Cela peut par exemple se produire lorsque le média a déjà été (partiellement ou complètement) chargé et que la méthode load() est invoquée pour le recharger.
ended La lecture a été interrompue car la fin du média est atteinte.
loadeddata La première frame du média a été chargée.
loadedmetadata Les métadonnées ont été chargées.
pause La lecture a été mise en pause.
play La lecture a démarré.
playing La lecture est prête à être lancée après avoir été mise en pause ou interrompue pour un chargement en mémoire de données.
ratechange La vitesse de lecture a changé.
seeked Une opération de déplacement du curseur de lecture (seek) est terminée.
seeking Une opération de déplacement du curseur de lecture (seek) a été initiée.
stalled L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.
suspend Le chargement des données du média ont été suspendues.
timeupdate Le temps décrit par l'attribut currentTime a été mis à jour.
volumechange Le volume a été modifié.
waiting La lecture a été interrompue en raison d'un manque temporaire de données.

Notes d'utilisation

Mise en forme avec CSS

L'élément <audio> n'a aucun affichage intrinsèque en dehors des contrôles par défaut du navigateur qui sont affichés lorsque l'attribut booléen controls est présent.

Les contrôles par défaut sont affichés avec display qui vaut inline par défaut et il est possible de changer cette valeur en block dans une feuille de style afin de pouvoir placer le contrôle au sein de la disposition, à moins de vouloir le placer en incise.

Les contrôles par défaut peuvent être mis en forme grâce à des propriétés qui influent sur l'ensemble du bloc. On peut ainsi utiliser border, border-radius, padding, margin, etc. Toutefois, il n'est pas possible de mettre en forme chacun des composants individuel du contrôle (on ne peut pas, par exemple, modifier la taille d'un des boutons ou leurs icones). Chaque navigateur peut avoir des contrôles par défaut qui soient différents.

Pour obtenir un aspect identique dans les différents navigateurs, il vous faudra créer vos propres contrôles afin de les baliser et de les mettre en forme à votre convenance puis d'utiliser JavaScript et l'API HTMLMediaElement pour manipuler les différentes fonctionnalités.

Le guide sur la mise en forme des lecteurs vidéo fournit quelques techniques utiles, bien qu'écrit à propos de l'élément <video>, certains concepts peuvent tout à fait s'appliquer aux éléments <audio>.

Détecter l'ajout et la suppression de pistes

Il est aussi possible de détecter lorsque des pistes sont ajoutées et supprimées sur un élément <audio> en écoutant les évènements addtrack et removetrack. Toutefois, ces évènements ne sont pas directement envoyés sur l'élément <audio> mais sur l'objet représentant la liste de pistes de l'élément <audio> et rattaché à l'élément HTMLMediaElement.

HTMLMediaElement.audioTracks
Un objet AudioTrackList contenant l'ensemble des pistes audio associées à l'élément. Un écouteur addtrack peut être associé à l'objet afin d'alerter lorsque de nouvelles pistes audio sont ajoutées à l'élément.
HTMLMediaElement.videoTracks
Un écouteur addtrack peut être ajouté à cet objet VideoTrackList afin d'alerter lorsque de nouvelles pistes vidéo sont ajoutées à l'élément.
HTMLElement.textTracks
Un écouteur addtrack peut être ajouté à cet objet TextTrackList afin d'alerter lorsque de nouvelles pistes de texte sont ajoutées à l'élément.

Note : Bien qu'on parle ici d'un élément <audio>, il est possible qu'un tel élément possède des pistes vidéo et des pistes texte bien que la cohérence des interfaces puisse être mise à mal.

Ainsi, on pourra utiliser un fragment de code analogue à celui qui suit pour détecter si de nouvelles pistes sont ajoutées ou supprimées d'un élément <audio> :

var elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = function(event) {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = function(event) {
  trackEditor.removeTrack(event.track);
};

Ce code permet de surveiller lorsque de nouvelles pistes audio sont ajoutées et supprimées. Lorsque c'est le cas, une fonction (non décrite ici) est invoquée afin de mettre à jour l'éditeur présenté à l'utilisateur avec la liste des pistes disponibles.

Il est aussi possible d'utiliser addEventListener() afin d'écouter les évènements addtrack et removetrack.

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
audioChrome Support complet 3Edge Support complet OuiFirefox Support complet 3.5
Notes
Support complet 3.5
Notes
Notes For Firefox to play audio, the server must serve the file using the correct MIME type.
IE Support complet 9Opera Support complet 10.5Safari Support complet 3.1WebView Android Support complet 3Chrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet 4
Notes
Support complet 4
Notes
Notes For Firefox to play audio, the server must serve the file using the correct MIME type.
Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
autoplayChrome Support complet 3Edge Support complet OuiFirefox Support complet 3.5IE Support complet 9Opera Support complet 10.5Safari Support complet 3.1WebView Android Support complet 3Chrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
bufferedChrome ? Edge Support complet OuiFirefox Support complet 4IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android ?
controlsChrome Support complet 3Edge Support complet OuiFirefox Support complet 3.5IE Support complet 9Opera Support complet 10.5Safari Support complet 3.1WebView Android Support complet 3Chrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
loopChrome Support complet 3Edge Support complet OuiFirefox Support complet 11IE Support complet 9Opera Support complet 10.5Safari Support complet 3.1WebView Android Support complet 3Chrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet 14Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
mozcurrentsampleoffset
Non-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 3.5IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Support complet 4Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
mutedChrome ? Edge Support complet OuiFirefox Support complet 11IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 14Opera Android ? Safari iOS ? Samsung Internet Android ?
playedChrome Support complet 49Edge Support complet 14Firefox Support complet 15IE Support complet 11Opera Support complet 46Safari Support complet 9.1WebView Android Support complet 49Chrome Android Support complet 49Edge Mobile Support complet 14Firefox Android Support complet 15Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet 5.0
preloadChrome Support complet 3
Notes
Support complet 3
Notes
Notes Defaults to metadata in Chrome 64.
Edge Support complet OuiFirefox Support complet 4
Support complet 4
Aucun support 3.5 — 4
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : autobuffer
IE Support complet 9Opera Support complet 15
Notes
Support complet 15
Notes
Notes Defaults to metadata in Opera 51.
Aucun support 10.5 — 15
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : autobuffer
Safari Support complet 3.1WebView Android Support complet 3
Notes
Support complet 3
Notes
Notes Defaults to metadata in Chrome 64.
Chrome Android Support complet 18
Notes
Support complet 18
Notes
Notes Defaults to metadata in Chrome 64.
Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 15
Notes
Support complet 15
Notes
Notes Defaults to metadata in Opera 51.
Aucun support ? — 14
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : autobuffer
Safari iOS Support complet OuiSamsung Internet Android Support complet Oui
srcChrome Support complet 3Edge Support complet OuiFirefox Support complet 3.5IE Support complet 9Opera Support complet 10.5Safari Support complet 3.1WebView Android Support complet 3Chrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
volumeChrome ? Edge Support complet OuiFirefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : mdnwebdocs-bot,