HTML Audio(Audio)
La lecture audio en HTML peut se faire de différentes manières.
Problèmes et solutions
La lecture audio en HTML n'est pas facile !
Vous devez maîtriser de nombreuses techniques pour vous assurer que votre fichier audio est lu dans tous les navigateurs (Internet Explorer, Chrome, Firefox, Safari, Opera) et sur tous les matériels (PC, Mac, iPad, iPhone).
Dans ce chapitre, le Tutoriel pour Débutants résume les problèmes et les solutions.
Utilisation des plugins
Un plugin de navigateur est un petit programme informatique qui étend les fonctions standard d'un navigateur.
Les plugins peuvent être utilisés pour ajouter du contenu externe (non-HTML) à une page à l'aide de la balise <object> ou de la balise <embed>.
Ces balises définissent le conteneur pour des ressources (généralement des ressources non-HTML) et, selon le type, elles sont affichées par le navigateur ou par un plugin externe.
Utilisation de l'élément <embed>
La balise <embed> définit le conteneur pour le contenu externe (non-HTML).
Exemple
Problème :
- La balise <embed> n'est pas valide en HTML 4. La page ne peut pas passer la validation HTML 4.
- Différents navigateurs prennent en charge différents formats audio.
- Si le navigateur ne prend pas en charge le format de fichier et qu'il n'y a pas de plugin, l'audio ne peut pas être lu.
- Si l'ordinateur de l'utilisateur ne dispose pas d'un plugin, l'audio ne peut pas être lu.
- Si le fichier est converti dans un autre format, il ne peut toujours pas être lu dans tous les navigateurs.
Utilisation de l'élément <object>
La balise <object> peut également définir le conteneur pour du contenu externe (non-HTML).
Exemple
Différents navigateurs prennent en charge différents formats audio.
- Si le navigateur ne prend pas en charge le format de fichier et qu'il n'y a pas de plugin, l'audio ne peut pas être lu.
- Si l'ordinateur de l'utilisateur ne dispose pas d'un plugin, l'audio ne peut pas être lu.
- Si le fichier est converti dans un autre format, il ne peut toujours pas être lu dans tous les navigateurs.
- Utilisation de l'élément <audio> HTML5
Utilisation de l'élément <audio> HTML5
Compatibilité des navigateurs
L'élément <audio> fonctionne dans tous les navigateurs modernes.
Compatibilité des navigateurs
Élément
| Exemple | |||||
|---|---|---|---|---|---|
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Exemple
Exemple
<source src="horse.mp3.html" type="audio/mpeg">
<source src="horse.ogg.html" type="audio/ogg">
Votre navigateur ne prend pas en charge ce format audio.
</audio>
Essayez-le !
Problème :
- La balise <audio> n'est pas valide en HTML 4. Votre page ne peut pas passer la validation HTML 4.
- Vous devez convertir le fichier audio dans un autre format.
- L'élément <audio> ne fonctionne pas dans les anciens navigateurs.
Meilleure solution HTML
L'exemple suivant utilise deux formats audio différents. L'élément <audio> HTML5 essaiera de lire l'audio au format mp3 ou ogg. Si cela échoue, le code se rabattra sur l'élément <embed> pour afficher un message d'erreur.
Exemple
<source src="horse.mp3.html" type="audio/mpeg">
<source src="horse.ogg.html" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3.html">
</audio>
Essayez-le !
Problème :
- Vous devez convertir le fichier audio dans un autre format.
- L'élément <embed> ne dispose pas de solution de repli pour afficher un message d'erreur.
Utilisation des hyperliens
Si une page web contient des hyperliens vers des fichiers multimédias, la plupart des navigateurs utiliseront l'« application d'assistance » pour lire le fichier.
Exemple
Descriptions de son intégré
Lorsque vous incluez du son dans une page web, ou dans le cadre d'une page web, on parle de son intégré.
Si vous prévoyez d'utiliser du son intégré dans une application web, vous devez savoir que beaucoup de personnes trouvent le son intégré agaçant. Veuillez également noter que les utilisateurs ont peut-être déjà désactivé l'option de son intégré dans leur navigateur.
Notre meilleur conseil est de n'inclure du son intégré que là où les utilisateurs veulent l'entendre. Un exemple positif est d'ouvrir une page et de lire un enregistrement lorsqu'un utilisateur a besoin d'entendre un enregistrement et clique sur un lien.
Balises multimédia HTML
Nouveau: Nouvelles balises HTML5
| Balise | Définition |
|---|---|
| <embed> | Définit un objet intégré. Non recommandé en HTML4, autorisé en HTML5. |
| <object> | Définit un objet intégré. |
| <param> | Définit les paramètres d'un objet. |
| <audio>Nouveau | Définit le contenu sonore. |
| <video>Nouveau | Définit une vidéo ou un film. |
| <source>Nouveau | Définit les ressources multimédias pour l'élément multimédia (<video> et <audio>). |
| <track>Nouveau | Définit les fichiers de sous-titres ou d'autres fichiers texte pour l'élément multimédia (<video> et <audio>). |