Lecteur audio: <audio>

L'insertion d'un lecteur audio se fait à l'aide d'un élément <audio>. Celui-ci est un élément d'information dans une page qu'il faut placer au même niveau que les titres et les paragraphes.

				
<audio>
   <source file="docs/lune.mp3"/>
</audio>

Ce qui donne :

Source(s) audio

La source audio est mentionnée grâce à un élément <source> qui doit possèder un lien hypertexte (href, file...) pointant vers le fichier audio à charger dans le lecteur.

Une ou plusieurs sources audio peuvent être mentionnées: la première source compatible avec le lecteur et le navigateur sera utilisée.

Largeur du lecteur audio

Par défaut, le lecteur audio prend toute la largeur de la zone où il est placé (comme le montre l'exemple ci-dessus). Vous pouvez changer cela grâce à un attribut largeur placé sur l'élément <audio>.

Cet attribut peut contenir une valeur entière (par exemple largeur="100") qui déterminera le nombre de pixels à utiliser, ou un pourcentage (par exemple largeur="80%") qui déterminera la taille par rapport à l'endroit où le lecteur est placé.

Position du lecteur audio

Par défaut, comme on peut le voir ci-dessus, le lecteur audio est centré dans la zone où elle se trouve (dans la page, le bloc, la colonne, etc.).

Pour contrôler cette position, on utilise comme pour les images, un attribut position qui peut valoir gauche, droite, centre, gauche-texte et droite-texte.

On peut ainsi placer le lecteur audio à gauche (c'est la valeur par défaut), à droite, le centrer au milieu de la page, ou faire en sorte que le lecteur vienne se placer à gauche ou à droite au sein même du texte contenu dans la page.

							
<p>Texte qui précède la vidéo.</p>
<audio position="gauche"  largeur="200">
   <source file="docs/lune.mp3"/>
</audio>
<p>Texte placé après la vidéo.</p>

						

							
<audio position="droite" largeur="200">
   <source file="docs/lune.mp3"/>
</audio>

						

							
<audio position="centre">
   <source file="docs/lune.mp3" largeur="200"/>
</audio>

						

							
<audio position="gauche-texte">
   <source file="docs/lune.mp3" largeur="200"/>
</audio>
<p>Ce texte vient se placer...</p>

						

							
<audio position="droite-texte" largeur="200">
   <source file="docs/lune.mp3"/>
</audio>
<p>Ce texte vient se placer...</p>