Audio HTML
- Page précédente Objets HTML
- Page suivante Vidéo HTML
Il y a de nombreuses méthodes pour jouer du son en HTML.
Problèmes, problèmes et solutions
Il n'est pas facile de jouer de l'audio en HTML !
Vous devez maîtriser de nombreuses techniques pour vous assurer que vos fichiers audio puissent être joués sur tous les navigateurs (Internet Explorer, Chrome, Firefox, Safari, Opera) et sur tous les appareils (PC, Mac, iPad, iPhone).
Dans ce chapitre, CodeW3C.com vous résume les problèmes et les solutions.
Utilisez les plugins
Un plugin de navigateur est un petit programme informatique qui étend les fonctionnalités standard du navigateur.
Les plugins ont de nombreuses utilisations : lire de la musique, afficher des cartes, vérifier des comptes bancaires, contrôler les entrées, etc.
Vous pouvez utiliser les tags <object> ou <embed> pour ajouter des plugins à une page HTML.
Ces tags définissent des conteneurs pour les ressources (généralement des ressources non HTML), selon le type, ils peuvent être affichés par le navigateur ou par un plugin externe.
Utilisez l'élément <embed>
Le tag <embed> définit un conteneur pour le contenu externe (non HTML) (c'est un tag HTML5, il est invalide dans HTML4, mais fonctionne dans tous les navigateurs).
Le code suivant peut afficher le fichier MP3 intégré dans la page web :
Exemple
<embed height="100" width="100" src="song.mp3" />
Problème :
- Le tag <embed> n'est pas valide dans HTML 4. La page ne peut pas passer la validation HTML 4.
- Les navigateurs diffèrent dans leur prise en charge des formats audio.
- Si le navigateur ne prend pas en charge le format de fichier, il ne peut pas lire l'audio sans plugin.
- Si l'utilisateur n'a pas installé le plugin, il ne peut pas lire l'audio.
- Si le fichier est converti dans un autre format, il ne peut toujours pas être lu dans tous les navigateurs.
Remarque :Utilisez <!DOCTYPE html> (HTML5) pour résoudre les problèmes de validation.
Utilisez l'élément <object>
Le tag <object> peut également définir un conteneur pour le contenu externe (non HTML).
Le code suivant peut afficher le fichier MP3 intégré dans la page web :
Exemple
<object height="100" width="100" data="song.mp3"></object>
Problème :
- Les navigateurs diffèrent dans leur prise en charge des formats audio.
- Si le navigateur ne prend pas en charge le format de fichier, il ne peut pas lire l'audio sans plugin.
- Si l'utilisateur n'a pas installé le plugin, il ne peut pas lire l'audio.
- Si le fichier est converti dans un autre format, il ne peut toujours pas être lu dans tous les navigateurs.
Utilisez l'élément <audio> HTML5
L'élément <audio> est un élément HTML5, il est invalide dans HTML 4, mais fonctionne dans tous les navigateurs.
Exemple
<audio controls="controls"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> Votre navigateur ne prend pas en charge ce format audio. </audio>
L'exemple ci-dessus utilise un fichier mp3, donc il fonctionne dans Internet Explorer, Chrome et Safari.
Pour que cette audio fonctionne également dans Firefox et Opera, un fichier de type ogg a été ajouté. Si cela échoue, un message d'erreur s'affichera.
Problème :
- Le tag <audio> n'est pas valide dans HTML 4. Votre page ne peut pas passer la validation HTML 4.
- Vous devez convertir le fichier audio dans un format différent.
- L'élément <audio> ne fonctionne pas dans les navigateurs anciens.
Remarque :Utilisez <!DOCTYPE html> (HTML5) pour résoudre les problèmes de validation.
La meilleure solution HTML
Exemple
<audio controls="controls" height="100" width="100"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> <embed height="100" width="100" src="song.mp3" /> </audio>
L'exemple ci-dessus utilise deux formats d'audio différents. L'élément <audio> HTML5 essaiera de jouer l'audio en mp3 ou ogg. Si cela échoue, le code essaiera de revenir à l'élément <embed>.
Problème :
- Vous devez convertir l'audio dans un format différent.
- L'élément <audio> ne peut pas passer la validation HTML 4 et XHTML.
- L'élément <embed> ne peut pas passer la validation HTML 4 et XHTML.
- L'élément <embed> ne peut pas revenir pour afficher un message d'erreur.
Remarque :Utilisez <!DOCTYPE html> (HTML5) pour résoudre les problèmes de validation.
La manière la plus simple d'ajouter de l'audio à un site web
Quelle est la manière la plus simple d'ajouter de l'audio à une page web ?
Le lecteur de médias Yahoo! est certainement l'un des meilleurs.
Utiliser le lecteur de médias Yahoo! est une autre approche. Vous n'avez qu'à laisser Yahoo! s'occuper de la lecture des chansons.
Il peut lire des fichiers mp3 et une série d'autres formats. En ajoutant une seule ligne de code, vous pouvez le intégrer dans une page web et transformer facilement une page HTML en une liste de lecture professionnelle.
Lecteur de médias Yahoo!
Exemple
<a href="song.mp3">Jouer le son</a> <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> </script>
L'utilisation du lecteur Yahoo! est gratuite. Pour l'utiliser, vous devez insérer ce segment JavaScript en bas de la page web :
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
Ensuite, il suffit de lier le fichier MP3 à votre HTML, JavaScript créera automatiquement un bouton de lecture pour chaque chanson :
<a href="song1.mp3">Jouer la chanson 1</a> <a href="song2.mp3">Jouer la chanson 2</a> ... ... ...
Le lecteur de médias Yahoo! fournit à vos utilisateurs un petit bouton de lecture, plutôt qu'un lecteur complet. Cependant, lorsque vous cliquez sur ce bouton, un lecteur complet s'ouvre.
Veuillez noter que ce lecteur est toujours ancré en bas de la fenêtre. Il suffit de cliquer dessus pour le faire glisser hors de la fenêtre.
Utilisation des liens
Si une page web contient des liens vers des fichiers multimédias, la plupart des navigateurs utilisent une "application d'assistance" pour lire le fichier.
Le fragment de code suivant montre un lien vers un fichier mp3. Si l'utilisateur clique sur ce lien, le navigateur démarre une "application d'assistance" pour lire le fichier :
Exemple
<a href="song.mp3">Jouer le son</a>
Son en ligne
Lorsque vous incluez un son dans une page web ou qu'il fait partie de la page, il est appelé son en ligne.
Si vous envisagez d'utiliser des sons en ligne dans une application web, vous devez être conscient que beaucoup de gens trouvent les sons en ligne irritants. En outre, notez que l'utilisateur peut avoir désactivé l'option des sons en ligne dans le navigateur.
Notre meilleur conseil est de ne les inclure que lorsque l'utilisateur souhaite entendre un son en ligne. Un exemple positif serait, lorsque l'utilisateur doit entendre une enregistrement et cliquer sur un lien, l'ouverture de la page puis la lecture de l'enregistrement.
Balises multimédias HTML 4.01
Balise | Description |
---|---|
Balise <applet> | Non recommandé. Définir l'applet intégré. |
Balise <embed> | Non recommandé dans HTML4, autorisé dans HTML5. Définir l'objet intégré. |
Balise <object> | Définir l'objet intégré. |
Balise <param> | Définir les paramètres de l'objet. |
Balises multimédias HTML 5
Balise | Description |
---|---|
Balise <audio> | La balise <embed> définit des sons, comme de la musique ou d'autres flux audio. |
Balise <embed> | Les balises définissent le contenu intégré, comme les plugins. |
- Page précédente Objets HTML
- Page suivante Vidéo HTML