Les API multimédia et graphiques en HTML5, exemples avec <audio/>, <video/> et <canvas/>

Insérer du son

SyntaxeBalise <audio>

HTML5 a prévu une balise spéciale pour insérer du son : <audio>.

L'utilisation standard de la balise requiert d'indiquer le nom du fichier source via l'attribut src.

Le format mp3 est reconnu par l'ensemble des navigateurs. D'autres formats sont possibles selon les navigateurs, comme wav ou ogg notamment.

ExempleInsertion d'un fichier audio

1
<audio src="maChanson.mp3"></audio>

À ce stade, la source audio est bien intégrée mais le lecteur n'apparaît pas. Il faut pour cela ajouter l'attribut "controls" dans la balise <audio>.

1
<audio src="maChanson.mp3" controls>Veuillez mettre à jour votre navigateur !</audio>

Les anciens navigateurs qui ne comprennent pas la balise afficheront le texte qui se trouve à l'intérieur.

ExempleInsertion de plusieurs versions d'un fichier audio

Il est possible de proposer plusieurs sources dans différents formats en précisant à chaque fois le MIME type avec l'attribut "type".

1
<audio controls>
2
    <source src="maChanson.ogg" type="audio/ogg">
3
    <source src="maChanson.mp3" type="audio/mp3">
4
</audio>

Le navigateur choisira le format qu'il reconnaît.

PrécédentPrécédentSuivantSuivant
AccueilAccueilImprimerImprimer Rihab Hachem, Cindy Pinvin, Baptiste Perraud, 2014-2016 (Contributions : Stéphane Crozat, les étudiants de l'UTC) Paternité - Partage des Conditions Initiales à l'IdentiqueRéalisé avec Scenari (nouvelle fenêtre)