English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriel de base HTML

Média HTML

Manuel de référence HTML

HTML5 Tutoriel de base

HTML5 API

HTML5 Média

Audio HTML

Les sons peuvent être joués de différentes manières dans HTML.

Problèmes et solutions

Il n'est pas facile de lire un 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, le tutoriel de base résume les problèmes et les solutions.

Utilisez les modules complémentaires

Un module complémentaire de navigateur est un petit programme informatique qui étend les fonctionnalités standard du navigateur.

Les modules complémentaires peuvent être ajoutés à la page à l'aide de la balise <object> ou <embed>.

Ces balises définissent des conteneurs de ressources (généralement des ressources non HTML), selon le type, elles sont affichées par le navigateur ou par un module complémentaire externe.

Utilisez l'élément <embed>

Le balise <embed> définit un conteneur de contenu externe (non HTML)。（C'est un HTML5 balise, dans HTML4 est illégal, mais fonctionne dans tous les navigateurs).

Le fragment de code suivant peut afficher MP intégré dans la page Web3 Fichier :

Exemple en ligne

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial(oldtoolbag.com)</<title>　
</<head>
<body>
<object　height="50" width="100"　data="/run/html/horse.mp3></object>
<p>Si vous ne pouvez pas entendre l'audio, il est possible que votre ordinateur ou navigateur ne prennent pas en charge le format de fichier.</p>
<p>ou vous n'avez pas ouvert le haut-parleur.</p>
</body>
</html>
Vérifiez pour voir ‹/›

Problème:

  • Le balise <embed> dans HTML 4 est invalide. La page ne peut pas passer par HTML 4 Vérification.

  • Différents navigateurs prennent en charge les formats audio de différentes manières.

  • Si le navigateur ne prend pas en charge le format de fichier, il ne peut pas lire l'audio sans module complémentaire.

  • Si l'utilisateur n'a pas installé le module complémentaire, il ne peut pas lire l'audio.

  • Si le fichier est converti en un autre format, il ne peut toujours pas être lu dans tous les navigateurs.

Utilisez l'élément <object>

Le balise <object tag> peut également définir un conteneur de contenu externe (non HTML).

Le fragment de code suivant peut afficher MP intégré dans la page Web3 Fichier :

Exemple en ligne

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial(oldtoolbag.com)</<title>　
</<head>
<body>
<object　height="50" width="100"　data="/run/html/horse.mp3></object>
<p>Si vous ne pouvez pas entendre l'audio, il est possible que votre ordinateur ou navigateur ne prennent pas en charge le format de fichier.</p>
<p>ou vous n'avez pas ouvert le haut-parleur.</p>
</body>
</html>
Vérifiez pour voir ‹/›

Problème:

  • Différents navigateurs prennent en charge les formats audio de différentes manières.

  • Si le navigateur ne prend pas en charge le format de fichier, il ne peut pas lire l'audio sans module complémentaire.

  • Si l'utilisateur n'a pas installé le module complémentaire, il ne peut pas lire l'audio.

  • Si le fichier est converti en un autre format, il ne peut toujours pas être lu dans tous les navigateurs.

utilise HTML5 L'élément <audio>

HTML5 Le balise <audio> est un élément HTML5 élément, dans HTML 4 est illégal, mais fonctionne dans tous les navigateurs.

L'élément <audio> 　 fonctionne dans tous les navigateurs modernes.

Compatibilité du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété.

élémentChromeIEFirefoxSafariOpera
<audio>4.09.03.54.010.5

Nous allons utiliser le balise <audio> pour décrire MP3 fichier (valide dans Internet Explorer, Chrome et Safari), a également ajouté un fichier de type OGG (valide dans Firefox et Opera navigateurs). Si l'échec, il affichera un message d'erreur texte:

Exemple en ligne

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial(oldtoolbag.com)</<title>　
</<head>
<body>
<audio controls>
　　<source src="/run/html/horse.mp3" type="audio/mpeg">
　　<source src="/run/html/horse.ogg" type="audio/ogg">
　　Votre navigateur ne prend pas en charge ce format audio.
</audio>
</body>
</html>
Vérifiez pour voir ‹/›
Problème:

  • le balise <audio> dans HTML 4 est invalide. Votre page ne peut pas passer par HTML 4 Vérification.

  • Vous devez convertir le fichier audio en un format différent.

  • L'élément <audio> ne fonctionne pas dans les navigateurs anciens.

La meilleure solution HTML

Le exemple suivant utilise deux formats audio différents. HTML5 L'élément <audio> essaiera de lire l'audio en mp3 ou ogg pour lire l'audio. Si cela échoue, le code essaiera d'utiliser l'élément <embed>.

Exemple en ligne

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial(oldtoolbag.com)</<title>　
</<head>
<body>
<audio controls>
　　<source src="/run/html/horse.mp3" type="audio/mpeg">
　　<source src="/run/html/horse.ogg" type="audio/ogg">
　　<embed height="50" width="100" src="/run/html/horse.mp3">
</audio>
</body>
</html>
Vérifiez pour voir ‹/›
Problème:

  • Vous devez convertir l'audio dans un format différent.

  • L'élément <embed> ne peut pas afficher un message d'erreur.

Utilisation des liens

Si une page web contient un lien vers un fichier média, la plupart des navigateurs utilisent un "application d'assistance" pour lire le fichier.

Le code suivant montre un lien vers un fichier mp3 Lien vers le fichier. Si l'utilisateur clique sur ce lien, le navigateur démarre un "application d'assistance" pour lire le fichier :

Exemple en ligne

<a href="/run/html/horse.mp3">Play the sound</a>
Vérifiez pour voir ‹/›

Description du son intégré

Lorsque vous incluez un son dans une page web ou que ce son fait partie de la page, il est appelé son intégré.

Si vous envisagez d'utiliser des sons intégrés dans une application web, vous devez être conscient que beaucoup de gens trouvent les sons intégrés irritants. En outre, notez que l'utilisateur peut avoir désactivé l'option des sons intégrés dans le navigateur.

Notre meilleur conseil est de ne les inclure que lorsque l'utilisateur souhaite entendre un son intégré. Un exemple positif est, lorsque l'utilisateur a besoin d'écouter une enregistrement et de cliquer sur un lien, la page s'ouvre et la lecture de l'enregistrement commence.

Balises multimédias HTML

New : 　HTML5 Nouvelle balise

BaliseDescription
<embed>Définit un objet intégré. HTML4 Non recommandé dans HTML5 Permet dans
<object>Définit un objet intégré.
<param>Définit les paramètres de l'objet.
<audio>HTML5Définit le contenu sonore
<video>HTML5Définit une vidéo ou un film
<source>HTML5Définit les ressources multimédias de l'élément media (<video> et <audio>)
<track>HTML5Définir le fichier de sous-titres du élément media ou d'autres fichiers contenant du texte (video et audio)
Lecture de vidéo HTML (Video)Plugiciels HTML