HTML 5 permet nativement d’intégrer de l’audio dans vos pages web grace à la balise <audio>. Avant, il fallait le faire via un plugin comme flash.
Pour intégrer/lire un fichier audio sur votre page web, il suffit d’utliser la balise <audio> comme suit :
<audio controls=""> <source src="audio.ogg" type="audio/ogg"> <source src="audio.mp3" type="audio/mpeg"> <p>Votre navigateur ne prend pas en charge l'élément audio</p> </audio>
Expliquons certains attributs :
- controls : permet d’ajouter à votre lecteur des contrôles audio comme la lecture, la pause et le volume
- source : permet au navigateur de choisir le fichier audio à lire. Le navigateur va essayer de lire le premier fichier et s’il ne peut pas (pas compatible par exemple), il essaiera avec le deuxième et ainsi de suite. Par contre, lorsqu’il arrive à lire un fichier, il s’occupera plus des suivants.
- src : permet d’indiquer le chemin du fichier à lire
- type : il s’agit du media/type qui accompagne le format de l’audio. Ainsi audio/mpeg pour mp3, audio/ogg pour ogg et audio/wav pour wav.
Les navigateurs supportant la balise audio
Navigateur | Chrome | IE / Edge | Firefox | Safari | Opera |
Version | A partir de la version 4.0 | A partir de la version 9.0 | A partir de la version 3.5 | A partir de la version 4.0 | A partir de la version 10.5 |
Compatibilité Navigateur / format audio
En HTML5, les formats audio pris en charge sont : MP3, WAV et OGG.
Navigateur | Chrome | IE / Edge | Firefox | Safari | Opera |
MP3 | OUI | OUI | OUI | OUI | OUI |
WAVE | OUI | NON | OUI | OUI | OUI |
OGG | OUI | NON | OUI | NON | OUI |