Mise à jour : 2013-01-18
Une balise dédiée permet l'intégration de l'audio.
Cela devient plus facile et plus intuitif d'intégrer de l'audio (aussi facile que pour une image).
L'auteur d'une page web ne doit plus se soucier de savoir si l'utilisateur possède les bons codecs, car ceux-ci sont inclus de manière native.

<audio>

  • src : URL du fichier audio.
  • autoplay : joue le fichier automatiquement.
  • loop : joue en boucle.
  • controls : affiche les contrôles.

Formats


Formats supportés
  Logo Chrome Logo Firefox Logo Internet Explorer Logo Opera Logo Safari
WAV Item supporté Item non supporté Item non supporté Item supporté Item supporté
OGG Item supporté Item supporté Item non supporté Item supporté Item non supporté
MP3 Item supporté Item non supporté Item supporté Item non supporté Item supporté
AAC Item supporté Item non supporté Item non supporté Item non supporté Item supporté
AIFF Item non supporté Item non supporté Item non supporté Item non supporté Item supporté
AU Item non supporté Item non supporté Item non supporté Item non supporté Item supporté

Notes sur le tuto

  • Limitations :
    • Le format AAC est supporté dans sa version Apple par Chrome et dans sa version Dolby par Safari.
      IE9 ne supporte plus le format AAC (les 2 versions) depuis la pré-release 9.0.8080.16413.
    • Firefox interprète l'attribut "loop" depuis la v12, mais a perdu le support du format WAV depuis la v17.
    • Opera 11.11 ne supporte plus le format Ogg.
    • Safari ne supporte cette balise que si QuickTime est installé (par défaut lors de l'installation du navigateur, cf. forum), ce qui lui permet de supporter plus de formats, par contre l'ouverture simultanée de plusieurs instances de QuickTime au sein du navigateur est très lourde et le fait planter.
  • Implémentation d'un lecteur Ogg Vorbis en HTML5 : mtAudioPlayer
  • Tout ce que vous devez savoir sur l'audio et la vidéo en HTML5.
  • Fichiers "sample" ci-dessous empruntés sur NCH Software et fichiers "recit" empruntés sur Linn Records.

Exemple de code HTML5

WAV : (loop)<br/>
<audio src="media/sample.wav" autoplay controls loop>
	<span class="ko">&lt;audio&gt; non supportée !</span></audio><br/><br/>

OGG : (loop)<br/>
<audio src="media/sample.ogg" autoplay controls loop>
	<span class="ko">&lt;audio&gt; non supportée !</span></audio><br/><br/>

MP3 : (loop)<br/>
<audio src="media/recit.mp3" autoplay controls loop>
	<span class="ko">&lt;audio&gt; non supportée !</span></audio><br/><br/>

AAC : (version Apple)<br/>
<audio src="media/warOfTheWorlds.m4b" autoplay controls>
	<span class="ko">&lt;audio&gt; non supportée !</span></audio><br/><br/>

AAC : (version Dolby)<br/>
<audio src="media/sample.aac" autoplay controls>
	<span class="ko">&lt;audio&gt; non supportée !</span></audio><br/><br/>

AIFF :<br/>
<audio src="media/sample.aiff" controls>
	<span class="ko">&lt;audio&gt; non supportée !</span></audio><br/><br/>

AU :<br/>
<audio src="media/sample.au" controls>
	<span class="ko">&lt;audio&gt; non supportée !</span></audio><br/><br/>

FLAC :<br/>
<audio src="media/recit16bit.flac" controls>
	<span class="ko">&lt;audio&gt; non supportée !</span></audio><br/><br/>

MIDI :<br/>
<audio src="media/missionImpossible2.mid" controls>
	<span class="ko">&lt;audio&gt; non supportée !</span></audio><br/><br/>

WMA :<br/>
<audio src="media/recit16bit.wma" controls>
	<span class="ko">&lt;audio&gt; non supportée !</span></audio>

Démonstration du résultat HTML5


WAV : (loop)


OGG : (loop)


MP3 : (loop)


AAC : (version Apple)


AAC : (version Dolby)


AIFF :


AU :


FLAC :


MIDI :


WMA :