<audio> : Démo HTML5
Mise à jour : 2017-01-27
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
WAV | ||||
OGG | ||||
MP3 | ||||
AAC | ||||
AIFF | ||||
AU | ||||
FLAC |
Notes sur le tuto
- Limitations :
- Edge acquiert le support du format WAV.
- Le format AAC est supporté dans ses versions Apple et Dolby, par Chrome, Edge et Safari, mais pas par IE, ni Firefox qui ne supportent que la version Apple.
- Safari sous iOS ne démarre pas automatiquement la lecture des sons.
- 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.
- Librairie JavaScript pour les navigateur ne supportant pas le format FLAC : flac.js
Exemple de code HTML5
WAV : (loop)<br> <audio src="media/sample.wav" autoplay controls loop> <span class="ko"><audio> non supportée !</span></audio><br><br> OGG : (loop)<br> <audio src="media/sample.ogg" autoplay controls loop> <span class="ko"><audio> non supportée !</span></audio><br><br> MP3 : (loop)<br> <audio src="media/recit.mp3" autoplay controls loop> <span class="ko"><audio> non supportée !</span></audio><br><br> AAC : (version Apple)<br> <audio src="media/warOfTheWorlds.m4b" autoplay controls> <span class="ko"><audio> non supportée !</span></audio><br><br> AAC : (version Dolby)<br> <audio src="media/sample.aac" autoplay controls> <span class="ko"><audio> non supportée !</span></audio><br><br> FLAC :<br> <audio src="media/recit16bit.flac" autoplay controls> <span class="ko"><audio> non supportée !</span></audio><br><br> AIFF :<br> <audio src="media/sample.aiff" controls> <span class="ko"><audio> non supportée !</span></audio><br><br> AU :<br> <audio src="media/sample.au" controls> <span class="ko"><audio> non supportée !</span></audio><br><br> MIDI :<br> <audio src="media/missionImpossible2.mid" controls> <span class="ko"><audio> non supportée !</span></audio><br><br> WMA :<br> <audio src="media/recit16bit.wma" controls> <span class="ko"><audio> non supportée !</span></audio>
Démonstration du résultat HTML5
WAV : (loop)
OGG : (loop)
MP3 : (loop)
AAC : (version Apple)
AAC : (version Dolby)
FLAC :
AIFF :
AU :
MIDI :
WMA :