diff options
| author | tristantheb <tristantheb@users.noreply.github.com> | 2021-06-19 10:25:05 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-06-19 10:25:05 +0200 |
| commit | a47584de1bd47788cb5aa6178fa88b31977b2a8e (patch) | |
| tree | 1c153a5dd0e939a3ef819df87d6b988da950352f /files/fr/web/html/element/audio | |
| parent | 1b0940218952a8132ceb9e4b56792ad47e94d552 (diff) | |
| download | translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.tar.gz translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.tar.bz2 translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.zip | |
UPDATE: Update translation of the HTML elements — 🛠 Priority work area (#500)
* UPDATE: Updating pages starting with A
* FIX: Update missing KS to html anchor
* Review HTML Element a
* Review HTML Element abbr
* Review HTML Element acronym
* Review HTML Element address
* Review HTML Element applet
* Review HTML Element area
* Review HTML Element article
* Review HTML Element aside
* Review HTML Element audio
* UPDATE: Updating pages wtarting with B
* Review HTML Element b
* Review HTML Element base
* Review HTML Element basefont
* Review HTML Element bdi
* Review HTML Element bdo
* Review HTML Element big
* Review HTML Element blink
* Review HTML Element blockquote
* Review HTML Element body
* Review HTML Element br
* Review HTML Element button
* Review HTML Element button - rm HTMLRef
* Review HTML Element button - lint link
* UPDATE: Updating pages starting with C
* UPDATE: Updating pages starting with D
* UPDATE: Refresh the reference page
* UPDATE: Updating pages starting with E
* Review HTML Element canvas
* Review HTML Element caption
* Review HTML Element center
* Review HTML Element cite
* UPDATE: Updating pages starting with F
* BCD: Update all updated pages with new BCD format
* FIX: add missing bracket
* Review - HTML element - code
* Review - HTML Element - col
* Review - HTML Element - colgroup
* Review - HTML Element - content
* Review - HTML Element - data
* Review - HTML Element - datalist
* Review - HTML Element - dd
* Review - HTML Element - del
* Review - HTML Element
* Review - HTML Element - dfn
* Review - HTML Element - dialog
* Review - HTML element - dir
* Review - HTML Element div
* Review - HTML Element - dl
* Review - HTML Element - dt
* Review - HTML Element - em
* Review - HTML Element - embed
* Review - HTML Element - fieldset
* Review - HTML Element - figcaption
* Review - HTML Element - figure
* Review - HTML Element - font
* Review - HTML Element - footer
* Review - HTML Element - form
* Review - HTML Element - frame
* Review - HTML Element - frameset
* Review updates since PR start - A
* Review updates since PR start - B
* Review updates since PR start - C
* Review updates since PR start - D
* Review updates since PR start - F
Co-authored-by: julieng <julien.gattelier@gmail.com>
Diffstat (limited to 'files/fr/web/html/element/audio')
| -rw-r--r-- | files/fr/web/html/element/audio/index.html | 533 |
1 files changed, 275 insertions, 258 deletions
diff --git a/files/fr/web/html/element/audio/index.html b/files/fr/web/html/element/audio/index.html index 4a5ff5cbae..17d0fba0fd 100644 --- a/files/fr/web/html/element/audio/index.html +++ b/files/fr/web/html/element/audio/index.html @@ -2,224 +2,242 @@ title: '<audio> : l''élément audio embarqué' slug: Web/HTML/Element/audio tags: + - Audio - Element - HTML + - HTML embedded content + - HTML5 + - HTML:Embedded content + - HTML:Flow content + - HTML:Phrasing content + - Media - Multimedia - Reference - Web + - sound translation_of: Web/HTML/Element/audio +browser-compat: html.elements.audio --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><audio></code></strong> 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 <code>src</code> ou l'élément {{HTMLElement("source")}}. S'il y a plusieurs sources, l'agent utilisateur choisira celle qui convient le mieux.</p> +<p class="summary">L'élément HTML <strong><code><audio></code></strong> 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 <code>src</code> ou l'élément <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a> : le navigateur choisira celle qui convient le mieux. Il peut également être la destination de médias diffusés en continu, en utilisant un <a href="/fr/docs/Web/API/MediaStream"><code>MediaStream</code></a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> - -<p>L'exemple qui précède illustre le fonctionnement simple d'un élément <code><audio></code>, à la façon de ce qui peut être fait pour une image avec l'élément {{htmlelement("img")}} : on inclut un chemin vers la ressource grâce à l'attribut <code>src</code> 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</p> +<p>L'exemple qui précède illustre le fonctionnement simple d'un élément <code><audio></code>, à la façon de ce qui peut être fait pour une image avec l'élément <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> : on inclut un chemin vers la ressource grâce à l'attribut <code>src</code> 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.</p> <p>Le contenu présent à l'intérieur des balises <code><audio></audio></code> est affiché comme contenu alternatif lorsque le navigateur ne prend pas en charge l'élément.</p> -<p>Les navigateurs ne prennent pas en charge l'ensemble des <a href="/fr/docs/Web/Media/Formats/Audio_codecs">formats audio</a> et plusieurs sources peuvent être fournies en utilisant des éléments {{htmlelement("source")}} imbriqués. Ainsi, le navigateur sélectionnera la première ressource dont il prend en charge le format:</p> +<h2 id="attributes">Attributs</h2> -<pre class="brush: html"><audio controls> - <source src="monAudio.mp3" type="audio/mpeg"> - <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></pre> +<p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p> -<p>Autres notes :</p> +<dl> + <dt><strong id="attr-autoplay"><code>autoplay</code></strong></dt> + <dd>Un attribut booléen : s'il est spécifié, l'audio commencera automatiquement la lecture dès qu'il pourra le faire, sans attendre la fin du téléchargement de l'ensemble du fichier audio. + + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Les sites qui diffusent automatiquement de l'audio (ou des vidéos avec une piste audio) peuvent s'avérer désagréables pour les utilisateurs et doivent donc être évités dans la mesure du possible. Si vous devez offrir une fonctionnalité de lecture automatique, vous devez la soumettre au choix de l'utilisateur. Cependant, cela peut être utile lors de la création d'éléments médias dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur. Consultez notre <a href="/fr/docs/Web/Media/Autoplay_guide">guide sur la lecture automatique</a> pour obtenir des informations supplémentaires sur la manière d'utiliser correctement la fonction <i>autoplay</i>.</p> + </div> + </dd> + <dt><strong id="attr-controls"><code>controls</code></strong></dt> + <dd>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.</dd> + <dt><strong id="attr-crossorigin"><code>crossorigin</code></strong></dt> + <dd>Cet attribut à valeur contrainte indique comment le CORS doit être utilisé afin de récupérer la ressource. <a href="/fr/docs/Web/HTML/CORS_enabled_image">Les ressources utilisant le CORS</a> peuvent être réutilisées dans un élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> sans corrompre celui-ci. Les valeurs autorisées pour cet attribut sont : + <dl> + <dt><code>anonymous</code></dt> + <dd>Une requête multi-origine est envoyée sans information d'authentification. Autrement dit, l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Origin"><code>Origin</code></a> 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 <a href="/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a>), la ressource sera corrompue (<em>tainted</em>) et son utilisation sera restreinte.</dd> + <dt><code>use-credentials</code></dt> + <dd>Une requête multi-origine est envoyée avec une information d'authentification (c'est-à-dire avec un en-tête HTTP <code>Origin:</code> qui contient un cookie, un certificat ou effectuant une authentification HTTP).</dd> + </dl> + 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 <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a>. Si la valeur fournie est invalide, elle sera considérée comme <code>anonymous</code>. Voir <a href="/fr/docs/Web/HTML/Attributes/crossorigin">Paramétrage des attributs relatifs au CORS</a> pour plus d'informations.</dd> + <dt><strong id="attr-disableRemotePlayback"><code>disableRemotePlayback</code></strong> {{experimental_inline}}</dt> + <dd>Un attribut booléen utilisé pour désactiver la capacité de lecture à distance dans les appareils qui sont connectés à l'aide de câbles (HDMI, DVI, etc.) et sans fil (Miracast, Chromecast, DLNA, AirPlay, etc.). Voir <a href="https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute">cette proposition de spécification</a> pour plus d'informations. + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Dans Safari, vous pouvez utiliser <a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html"><code>x-webkit-airplay="deny"</code></a> comme solution de repli.</p> + </div> + </dd> + <dt><strong id="attr-loop"><code>loop</code></strong></dt> + <dd>Un attribut booléen. S'il est renseigné, la lecture du fichier se fera en boucle.</dd> + <dt><strong id="attr-muted"><code>muted</code></strong></dt> + <dd>Un attribut booléen, indiquant si le son de l'élément audio est initialement coupé. Sa valeur par défaut est <code>false</code>.</dd> + <dt><strong id="attr-preload"><code>preload</code></strong></dt> + <dd>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 :<br> + + <ul> + <li><code>none</code> : Indique que l'élément audio ne devrait pas être mis en cache</li> + <li><code>metadata</code> : Indique que seules les méta-données (comme la durée) sont préchargées</li> + <li><code>auto</code> : Indique que tout le fichier peut être téléchargé, même s'il n'est pas certain que l'utilisateur le lira</li> + <li><code>""</code> (chaîne de caractères vide) : Un synonyme de <code>auto</code></li> + </ul> + + <p>La valeur par défaut peut varier d'un navigateur à l'autre. Les spécifications recommandent la valeur <code>metadata</code>.</p> + + <div class="notecard note"> + <p><b>Note :</b></p> + <ul> + <li>L'attribut <code>autoplay</code> a la priorité sur <code>preload</code>. Si <code>autoplay</code> est spécifié, le navigateur devrait évidemment commencer à télécharger l'audio pour le lire.</li> + <li>La spécification n'oblige pas le navigateur à suivre la valeur de cet attribut ; il s'agit d'une simple indication.</li> + </ul> + </div> + </dd> + <dt><strong id="attr-src"><code>src</code></strong></dt> + <dd>L'URL du fichier audio à intégrer. Cet élément est soumis aux <a href="/fr/docs/Web/HTTP/CORS">contrôles d'accès HTTP</a>. Cet attribut est facultatif ; vous pouvez utiliser l'élément <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a> dans le bloc audio pour spécifier l'audio à intégrer.</dd> +</dl> -<ul> - <li>Si l'attribut <code>controls</code> 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 {{domxref("HTMLMediaElement")}}.</li> - <li>Afin d'avoir un contrôle précis sur le contenu audio, l'API <code>HTMLMediaElement</code> déclenche de nombreux<a href="/fr/docs/Web/Guide/DOM/Events/evenement_medias"> évènements</a>.</li> - <li>Il est aussi possible d'utiliser <a href="/fr/docs/Web/API/Web_Audio_API">lAPI Web Audio</a> afin de générer et de manipuler des flux audio en JavaScript.</li> - <li>Les éléments <code><audio></code> ne peuvent pas avoir de sous-titres contrairement aux éléments <code><video></code>. Pour plus d'informations et certaines méthodes de contournements, voir <a href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio">WebVTT et l'audio</a>, écrit par Ian Devlin.</li> -</ul> +<h2 id="events">Évènements</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nom de l'évènement</th> + <th scope="col">Condition du déclenchement</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/fr/docs/Web/Reference/Events/audioprocess">audioprocess</a></td> + <td>La mémoire tampon en entrée d'un <a href="/fr/docs/Web/API/ScriptProcessorNode"><code>ScriptProcessorNode</code></a> peut désormais être traité.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/canplay_event"><code>canplay</code></a></td> + <td>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).</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/canplaythrough_event"><code>canplaythrough</code></a></td> + <td>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.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/Reference/Events/complete">complete</a></td> + <td>Le rendu d'un <a href="/fr/docs/Web/API/OfflineAudioContext"><code>OfflineAudioContext</code></a> est terminé.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/durationchange_event"><code>durationchange</code></a></td> + <td>L'attribut <code>duration</code> a été mis à jour.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/emptied_event"><code>emptied</code></a></td> + <td>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 <a href="/fr/docs/Web/API/HTMLMediaElement/load" rel="internal"><code>load()</code></a> est invoquée pour le recharger.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/ended_event"><code>ended</code></a></td> + <td>La lecture a été interrompue car la fin du média est atteinte.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/loadeddata_event"><code>loadeddata</code></a></td> + <td>La première <em>frame</em> du média a été chargée.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/loadedmetadata_event"><code>loadedmetadata</code></a></td> + <td>Les métadonnées ont été chargées.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/pause_event"><code>pause</code></a></td> + <td>La lecture a été mise en pause.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/play_event"><code>play</code></a></td> + <td>La lecture a démarré.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/playing_event"><code>playing </code></a></td> + <td>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.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/ratechange_event"><code>ratechange</code></a></td> + <td>La vitesse de lecture a changé.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/seeked_event"><code>seeked</code></a></td> + <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) est terminée.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/seeking_event"><code>seeking</code></a></td> + <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) a été initiée.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/stalled_event"><code>stalled</code></a></td> + <td>L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/suspend_event"><code>suspend</code></a></td> + <td>Le chargement des données du média ont été suspendues.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/timeupdate_event"><code>timeupdate</code></a></td> + <td>Le temps décrit par l'attribut <code>currentTime</code> a été mis à jour.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/volumechange_event"><code>volumechange</code></a></td> + <td>Le volume a été modifié.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/waiting_event"><code>waiting</code></a></td> + <td>La lecture a été interrompue en raison d'un manque temporaire de données.</td> + </tr> + </tbody> +</table> -<p>Pour apprendre comment utiliser les éléments liés aux médias, nous vous conseillons de lire <a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">le tutoriel sur le contenu audio et vidéo</a>.</p> +<h2 id="usage_notes">Notes d'utilisation</h2> -<h2 id="Attributs">Attributs</h2> +<p>Les navigateurs ne prennent pas tous en charge les mêmes <a href="/fr/docs/Web/Media/Formats/Containers">types de fichiers</a> et <a href="/fr/docs/Web/Media/Formats/Audio_codecs">codecs audio</a> ; vous pouvez fournir plusieurs sources à l'intérieur d'éléments <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a> imbriqués, et le navigateur utilisera alors le premier qu'il comprend :</p> -<p>Comme tous les autres éléments HTML, cet élément possède <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<pre class="brush: html"><audio controls> + <source src="myAudio.mp3" type="audio/mpeg"> + <source src="myAudio.ogg" type="audio/ogg"> + <p>Votre navigateur ne prend pas en charge l'audio HTML5. + Voici un <a href="myAudio.mp3">lien vers le fichier audio</a> + à la place.</p> +</audio></pre> -<dl> - <dt>{{htmlattrdef("autoplay")}}</dt> - <dd> - <p>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.</p> - - <div class="note"><strong>Note :</strong> 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 <em>a posteriori</em>.</div> - </dd> - <dt>{{htmlattrdef("controls")}}</dt> - <dd>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.</dd> - <dt>{{htmlattrdef("crossorigin")}}</dt> - <dd>Cet attribut à valeur contrainte indique comment le CORS doit être utilisé afin de récupérer la ressource. <a href="/en-US/docs/CORS_Enabled_Image">Les ressources utilisant le CORS</a> peuvent être réutilisées dans un élément {{HTMLElement("canvas")}} sans corrompre celui-ci. Les valeurs autorisées pour cet attribut sont : - <dl> - <dt><code>anonymous</code></dt> - <dd>Une requête multi-origine est envoyée sans information d'authentification. Autrement dit, l'en-tête HTTP {{HTTPHeader("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 {{HTTPHeader("Access-Control-Allow-Origin")}}), la ressource sera corrompue (<em>tainted</em>) et son utilisation sera restreinte.</dd> - <dt><code>use-credentials</code></dt> - <dd>Une requête multi-origine est envoyée avec une information d'authentification (c'est-à-dire avec un en-tête HTTP <code>Origin:</code> qui contient un cookie, un certificat ou effectuant une authentification HTTP).</dd> - </dl> - 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 {{HTMLElement('canvas')}}. Si la valeur fournie est invalide, elle sera considérée comme <code>anonymous</code>. Voir <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">Paramétrage des attributs relatifs au CORS</a> pour plus d'informations.</dd> - <dt>{{htmlattrdef("loop")}}</dt> - <dd>Attribut booléen. S'il est renseigné, la lecture du fichier se fera en boucle.</dd> - <dt>{{htmlattrdef("muted")}}</dt> - <dd>Attribut booléen, indiquant si le son de l'élément audio est initialement coupé. Sa valeur par défaut est <code>false</code>.</dd> - <dt>{{htmlattrdef("preload")}}</dt> - <dd>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 :<br> - - <ul> - <li><code>none</code> : l'élément audio ne devrait pas être mis en cache</li> - <li><code>metadata</code> : seules les méta-données (comme la durée) sont préchargées</li> - <li><code>auto</code> : tout le fichier peut être téléchargé, même s'il n'est pas certain que l'utilisateur le lira</li> - <li><code>"" </code>(chaîne de caractères vide) : synonyme de <code>auto</code></li> - </ul> - La valeur par défaut peut varier d'un navigateur à l'autre. Les spécifications recommandent la valeur <code>metadata</code>.</dd> -</dl> +<p>Nous proposons un <a href="/fr/docs/Web/Media/Formats">guide substantiel et complet des types de fichiers médias</a> et des <a href="/fr/docs/Web/Media/Formats/Audio_codecs">codecs audio qui peuvent être utilisés en leur sein</a>. Est également disponible <a href="/fr/docs/Web/Media/Formats/Video_codecs">un guide des codecs supportés pour la vidéo</a>.</p> -<div class="note"><strong>Notes d'utilisation :</strong> +<p>Autres notes d'utilisation :</p> <ul> - <li>L'attribut <code>autoplay</code> est prioritaire sur cet attribut. Si le navigateur a besoin de jouer cet élément, il le téléchargera automatiquement</li> - <li>La spécification n'impose pas au navigateur de prendre en compte cet attribut. Il n'a qu'une valeur indicative.</li> + <li>Si vous ne spécifiez pas l'attribut <code>controls</code>, le lecteur audio n'inclura pas les contrôles par défaut du navigateur. Vous pouvez toutefois créer vos propres contrôles personnalisés en utilisant JavaScript et l'API <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a>.</li> + <li>Pour permettre un contrôle précis de votre contenu audio, les <code>HTMLMediaElement</code> retournent de nombreux <a href="/fr/docs/Web/API/HTMLMediaElement#events">événements</a> différents. Cela fournit également un moyen de surveiller le processus de récupération de l'audio afin que vous puissiez surveiller les erreurs ou détecter quand suffisamment de ressources sont disponibles pour commencer à les lire ou à les manipuler.</li> + <li>Vous pouvez également utiliser l'API <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio</a> pour générer et manipuler directement des flux audio à partir du code JavaScript plutôt que de diffuser des fichiers audio préexistants.</li> + <li>Les éléments <code><audio></code> ne peuvent pas avoir de sous-titres ou de légendes associés de la même manière que les éléments <code><video></code>. Voir <a href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio">WebVTT and Audio</a> <small>(en)</small> par Ian Devlin pour des informations utiles et des solutions de contournement.</li> </ul> -</div> -<dl> - <dt>{{htmlattrdef("src")}}</dt> - <dd>L'URL du fichier audio à intégrer. Cet attribut suit les <a href="/fr/docs/HTTP/Access_control_CORS">spécifications du CORS</a>. Il est optionnel; on peut lui préférer l'élément {{HTMLElement("source")}} dans le bloc de l'élément sur lequel il est défini.</dd> -</dl> +<p>Une bonne source générale d'informations sur l'utilisation de <code><audio></code> est le tutoriel sur le <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">contenu vidéo et audio</a>.</p> -<h2 id="Évènements">Évènements</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Nom</th> - <th scope="col">Condition du déclenchement</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{Event("audioprocess")}}</td> - <td>La mémoire tampon en entrée d'un {{DOMxRef("ScriptProcessorNode")}} peut désormais être traité.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td> - <td>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).</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td> - <td>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.</td> - </tr> - <tr> - <td>{{Event("complete")}}</td> - <td>Le rendu d'un {{DOMxRef("OfflineAudioContext")}} est terminé.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td> - <td>L'attribut <code>duration</code> a été mis à jour.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td> - <td>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 <a href="/fr/docs/Web/API/HTMLMediaElement/load" rel="internal"><code>load()</code></a> est invoquée pour le recharger.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td> - <td>La lecture a été interrompue car la fin du média est atteinte.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td> - <td>La première <em>frame</em> du média a été chargée.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td> - <td>Les métadonnées ont été chargées.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td> - <td>La lecture a été mise en pause.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td> - <td>La lecture a démarré.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td> - <td>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.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td> - <td>La vitesse de lecture a changé.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td> - <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) est terminée.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td> - <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) a été initiée.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td> - <td>L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td> - <td>Le chargement des données du média ont été suspendues.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td> - <td>Le temps décrit par l'attribut <code>currentTime</code> a été mis à jour.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td> - <td>Le volume a été modifié.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td> - <td>La lecture a été interrompue en raison d'un manque temporaire de données.</td> - </tr> - </tbody> -</table> - -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> - -<h3 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h3> +<h3 id="styling_with_css">Mise en forme avec CSS</h3> <p>L'élément <code><audio></code> 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 <code>controls</code> est présent.</p> -<p>Les contrôles par défaut sont affichés avec {{cssxref("display")}} qui vaut <code>inline</code> par défaut et il est possible de changer cette valeur en <code>block</code> dans une feuille de style afin de pouvoir placer le contrôle au sein de la disposition, à moins de vouloir le placer en incise.</p> +<p>Les contrôles par défaut sont affichés avec <a href="/fr/docs/Web/CSS/display"><code>display</code></a> qui vaut <code>inline</code> par défaut et il est possible de changer cette valeur en <code>block</code> dans une feuille de style afin de pouvoir placer le contrôle au sein de la disposition, à moins de vouloir le placer en incise.</p> -<p>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 {{cssxref("border")}}, {{cssxref("border-radius")}}, {{cssxref("padding")}}, {{cssxref("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.</p> +<p>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 <a href="/fr/docs/Web/CSS/border"><code>border</code></a>, <a href="/fr/docs/Web/CSS/border-radius"><code>border-radius</code></a>, <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, 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.</p> -<p>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 {{domxref("HTMLMediaElement")}} pour manipuler les différentes fonctionnalités.</p> +<p>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 <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> pour manipuler les différentes fonctionnalités.</p> <p><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Le guide sur la mise en forme des lecteurs vidéo</a> fournit quelques techniques utiles, bien qu'écrit à propos de l'élément <code><video></code>, certains concepts peuvent tout à fait s'appliquer aux éléments <code><audio></code>.</p> -<h3 id="Détecter_l'ajout_et_la_suppression_de_pistes">Détecter l'ajout et la suppression de pistes</h3> +<h3 id="detecting_addition_and_removal_of_tracks">Détecter l'ajout et la suppression de pistes</h3> -<p>Il est aussi possible de détecter lorsque des pistes sont ajoutées et supprimées sur un élément <code><audio></code> en écoutant les évènements {{event("addtrack")}} et {{event("removetrack")}}. Toutefois, ces évènements ne sont pas directement envoyés sur l'élément <code><audio></code> mais sur l'objet représentant la liste de pistes de l'élément <code><audio></code> et rattaché à l'élément {{domxref("HTMLMediaElement")}}.</p> +<p>Il est aussi possible de détecter lorsque des pistes sont ajoutées et supprimées sur un élément <code><audio></code> en écoutant les évènements <a href="/fr/docs/Web/API/AudioTrackList/addtrack_event"><code>addtrack</code></a> et <a href="/fr/docs/Web/API/AudioTrackList/removetrack_event"><code>removetrack</code></a>. Toutefois, ces évènements ne sont pas directement envoyés sur l'élément <code><audio></code> mais sur l'objet représentant la liste de pistes de l'élément <code><audio></code> et rattaché à l'élément <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a>.</p> <dl> - <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt> - <dd>Un objet {{domxref("AudioTrackList")}} contenant l'ensemble des pistes audio associées à l'élément. Un écouteur <code>addtrack</code> peut être associé à l'objet afin d'alerter lorsque de nouvelles pistes audio sont ajoutées à l'élément.</dd> - <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt> - <dd>Un écouteur <code>addtrack</code> peut être ajouté à cet objet {{domxref("VideoTrackList")}} afin d'alerter lorsque de nouvelles pistes vidéo sont ajoutées à l'élément.</dd> - <dt>{{domxref("HTMLElement.textTracks")}}</dt> - <dd>Un écouteur <code>addtrack</code> peut être ajouté à cet objet {{domxref("TextTrackList")}} afin d'alerter lorsque de nouvelles pistes de texte sont ajoutées à l'élément.</dd> + <dt><a href="/fr/docs/Web/API/HTMLMediaElement/audioTracks"><code>HTMLMediaElement.audioTracks</code></a></dt> + <dd>Un objet <a href="/fr/docs/Web/API/AudioTrackList"><code>AudioTrackList</code></a> contenant l'ensemble des pistes audio associées à l'élément. Un écouteur <code>addtrack</code> peut être associé à l'objet afin d'alerter lorsque de nouvelles pistes audio sont ajoutées à l'élément.</dd> + <dt><a href="/fr/docs/Web/API/HTMLMediaElement/videoTracks"><code>HTMLMediaElement.videoTracks</code></a></dt> + <dd>Un écouteur <code>addtrack</code> peut être ajouté à cet objet <a href="/fr/docs/Web/API/VideoTrackList"><code>VideoTrackList</code></a> afin d'alerter lorsque de nouvelles pistes vidéo sont ajoutées à l'élément.</dd> + <dt><a href="/fr/docs/Web/API/HTMLMediaElement/textTracks"><code>HTMLMediaElement.textTracks</code></a></dt> + <dd>Un écouteur <code>addtrack</code> peut être ajouté à cet objet <a href="/fr/docs/Web/API/TextTrackList"><code>TextTrackList</code></a> afin d'alerter lorsque de nouvelles pistes de texte sont ajoutées à l'élément.</dd> </dl> -<div class="note"> -<p><strong>Note :</strong> Bien qu'on parle ici d'un élément <code><audio></code>, 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.</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Bien qu'on parle ici d'un élément <code><audio></code>, 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.</p> </div> <p>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 <code><audio></code> :</p> -<pre class="brush: js">var elem = document.querySelector("audio"); +<pre class="brush: js">let elem = document.querySelector("audio"); elem.audioTrackList.onaddtrack = function(event) { trackEditor.addTrack(event.track); @@ -227,24 +245,27 @@ elem.audioTrackList.onaddtrack = function(event) { elem.audioTrackList.onremovetrack = function(event) { trackEditor.removeTrack(event.track); -}; -</pre> +};</pre> <p>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.</p> -<p>Il est aussi possible d'utiliser {{domxref("EventTarget.addEventListener", "addEventListener()")}} afin d'écouter les évènements {{event("addtrack")}} et {{event("removetrack")}}.</p> +<p>Il est aussi possible d'utiliser <a href="/fr/docs/Web/API/EventTarget/addEventListener"><code>addEventListener()</code></a> afin d'écouter les évènements <a href="/fr/docs/Web/API/AudioTrackList/addtrack_event"><code>addtrack</code></a> et <a href="/fr/docs/Web/API/AudioTrackList/removetrack_event"><code>removetrack</code></a>.</p> -<h2 id="Exemples">Exemples</h2> +<h2 id="examples">Exemples</h2> -<h3 id="Utilisation_simple">Utilisation simple</h3> +<h3 id="basic_usage">Utilisation simple</h3> <pre class="brush: html"><!-- 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 src="AudioTest.ogg" autoplay> + Votre navigateur ne supporte pas l'élément <code>audio</code>. </audio> </pre> -<h3 id="Utilisation_de_l'élément_<source>">Utilisation de l'élément <code><source></code></h3> +<p>Pour savoir quand l'autoplay fonctionne, comment obtenir la permission d'utiliser l'autoplay, et comment et quand il est approprié d'utiliser l'autoplay, consultez notre <a href="/fr/docs/Web/Media/Autoplay_guide">guide sur l'autoplay</a>.</p> + +<h3 id="audio_element_with_source_element">Utilisation de l'élément <code><source></code></h3> + +<p>Cet exemple précise quelle piste audio intégrer en utilisant l'attribut <code>src</code> sur un élément <code><source></code> imbriqué plutôt que directement sur l'élément <code><audio></code>. Il est toujours utile d'inclure le type MIME du fichier à l'intérieur de l'attribut <code>type</code>, car le navigateur est capable de dire instantanément s'il peut lire ce fichier, et de ne pas perdre de temps dessus dans le cas contraire.</p> <pre class="brush: html"><audio controls="controls"> <source src="toto.wav" type="audio/wav"> @@ -252,7 +273,7 @@ elem.audioTrackList.onremovetrack = function(event) { </audio> </pre> -<h3 id="Utilisation_de_plusieurs_éléments_<source>">Utilisation de plusieurs éléments <code><source></code></h3> +<h3 id="audio_with_multiple_source_elements">Utilisation de plusieurs éléments <code><source></code></h3> <p>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) :</p> @@ -262,13 +283,15 @@ elem.audioTrackList.onremovetrack = function(event) { <source src="toto.mp3" type="audio/mpeg"/> </audio></pre> -<h2 id="Accessibilité">Accessibilité</h2> +<h2 id="accessibility_concerns">Accessibilité</h2> -<p>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.</p> +<p>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, qui sont spécifiés à l'aide de <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a>, ils 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.</p> <p>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.</p> -<p>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) :</p> +<p>L'élément <code><audio></code> ne prend pas directement en charge le WebVTT. Vous devrez trouver une bibliothèque ou un framework qui vous offre cette capacité, ou écrire le code pour afficher les sous-titres vous-même. Une option consiste à lire votre audio à l'aide d'un élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, qui prend en charge WebVTT.</p> + +<p>En plus des dialogues parlés, les sous-titres et les transcriptions doivent également identifier la musique et les effets sonores qui communiquent des informations importantes. Cela inclut l'émotion et le ton. Par exemple, dans le WebVTT ci-dessous, notez l'utilisation de crochets pour donner un ton et un aperçu émotionnel au spectateur ; cela peut aider à établir l'ambiance autrement fournie par la musique, les sons non verbaux et les effets sonores cruciaux, et ainsi de suite.</p> <pre>1 00:00:00 --> 00:00:45 @@ -280,92 +303,86 @@ 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 ? +[sur un ton énervé] Vous rendez la poulette ou c'est plus vous qui donnez à manger aux lapins ?</pre> + +<p>Une autre bonne pratique consiste à fournir du contenu comme un lien de téléchargement comme méthode alternative pour les personnes qui utilisent un navigateur qui ne prend pas en charge <code><audio></code> :</p> + +<pre class="brush: html"><audio controls> + <source src="monAudio.mp3" type="audio/mpeg"> + <source src="monAudio.ogg" type="audio/ogg"> + <p> + Votre navigateur ne prend pas charge l'audio HTML. + Voici <a href="monAudio.mp3">un lien de téléchargement</a> à la place. + </p> +</audio> + </pre> <ul> - <li><a href="/en-US/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">Sous-titrage sur le web</a></li> - <li><a href="/fr/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li> - <li><a href="https://webaim.org/techniques/captions/"><em>WebAIM: Captions, Transcripts, and Audio Descriptions</em> (en anglais)</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Comprendre les règles WCAG 1.2</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html"><em>Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html"><em>Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li> + <li><a href="/fr/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">Sous-titrage sur le web</a></li> + <li><a href="/fr/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li> + <li><a href="https://webaim.org/techniques/captions/">WebAIM: Captions, Transcripts, and Audio Descriptions</a> (en anglais)</li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.2_—_providing_text_alternatives_for_time-based_media">Comprendre les règles WCAG 1.2</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html">Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</a> (en anglais)</li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</a> (en anglais)</li> </ul> -<h2 id="Résumé_technique">Résumé technique</h2> +<h2 id="technical_summary">Résumé technique</h2> <table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_int.C3.A9gr.C3.A9">contenu intégré</a>.<br> - Si l'attribut {{htmlattrxref("controls", "audio")}} est utilisé : <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a> et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td>Si l'élément possède un attribut {{htmlattrxref("src", "audio")}} : zéro ou plusieurs éléments {{HTMLElement("track")}}, suivis par du contenu transparent ne contenant pas d'éléments média, c'est-à-dire des éléments qui ne soient pas {{HTMLElement("audio")}} ou {{HTMLElement("video")}}<br> - Sinon : zéro ou plusieurs éléments {{HTMLElement("source")}} suivis par un élément {{HTMLElement("track")}}, suivi par du contenu transparent ne contenant pas d'éléments média (ni {{HTMLElement("audio")}} ni {{HTMLElement("video")}}).</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du contenu intégré.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("application")}}</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLAudioElement")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row"><dfn><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></dfn></th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content">contenu intégré</a>. Si l'attribut <a href="#attr-controls"><code>controls</code></a> est utilisé : <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a> et <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Si l'élément possède un attribut <a href="#attr-src"><code>src</code></a> : zéro ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/track"><code><track></code></a>, suivis par du contenu transparent ne contenant pas d'éléments média, c'est-à-dire des éléments qui ne soient pas <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> ou <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>. Sinon : zéro ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a> suivis par un élément <a href="/fr/docs/Web/HTML/Element/track"><code><track></code></a>, suivi par du contenu transparent ne contenant pas d'éléments média (ni <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> ni <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>).</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément acceptant du contenu intégré.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td><a href="https://w3c.github.io/aria/#application"><code>application</code></a></td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLAudioElement"><code>HTMLAudioElement</code></a></td> + </tr> + </tbody> </table> -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-audio-element', '<audio>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-audio-element', '<audio>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +<h2 id="specifications">Spécifications</h2> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{Specifications}}</p> -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("html.elements.audio")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/Media/Formats/Audio_codecs">Guide sur les codecs audio utilisés sur le Web</a></li> - <li><a href="/fr/docs/Web/HTML/formats_media_support">Formats de média pris en charge par les éléments <code>audio</code> et <code>video</code></a></li> - <li><a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a></li> - <li>{{domxref("HTMLAudioElement")}}</li> - <li><a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li> - <li>{{htmlelement("source")}}</li> - <li>{{htmlelement("video")}}</li> - <li><a href="/fr/docs/Web/HTML/Utilisation_d'audio_et_video_en_HTML5">Utiliser les éléments HTML5 <code>audio</code> et <code>video</code></a></li> - <li>L'élément <code>audio</code> selon <a href="https://www.whatwg.org/specs/web-apps/current-work/#audio">la spécification HTML5</a></li> - <li><a href="/fr/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">Utiliser des médias audio pour les différents navigateurs</a></li> + <li><a href="/fr/docs/Web/Media">Technologies media Web</a> + <ul> + <li><a href="/fr/docs/Web/Media/Formats/Containers">Formats des conteneurs medias (types de fichiers)</a></li> + <li><a href="/fr/docs/Web/Media/Formats/Audio_codecs">Guide des codecs audio utilisés sur le web</a></li> + </ul> + </li> + <li>L'API <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio</a></li> + <li><a href="/fr/docs/Web/API/HTMLAudioElement"><code>HTMLAudioElement</code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Apprentissage : Contenu vidéo et audio</a></li> + <li><a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics">Les bases de l'audio multi-navigateur</a></li> </ul> |