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

Exemple

<embed height="50" width="100" src="horse.mp3.html">

Essayez-le !

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

Exemple

<object height="50" width="100" data="horse.mp3"></object>

Problème :

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

<audio controls>
  <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

<audio controls height="100" width="100">
  <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

Exemple

<a href="horse.mp3.html">Lire le son</a>

Essayez-le !


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>).
Autres extensions