Latest web development tutorials

audio HTML (Audio)

Son en HTML peut jouer de différentes manières.


Problèmes et solutions

Lecture audio en HTML est pas facile!

Vous avez besoin de beaucoup de conseils familiers pour faire en sorte que vos fichiers audio dans tous les navigateurs (Internet Explorer, Chrome, Firefox, Safari, Opera), et tout le matériel (PC, Mac, iPad, iPhone) peuvent être lus.

Dans ce chapitre, W3CSchool vous résumer les problèmes et les solutions.


L'utilisation de plug-in

Browser plug-in est une extension du navigateur standard dispose d'un petit programme informatique.

Plug-ins peuvent utiliser balise <object> ou <embed> ajouté à la page.

Ces étiquettes définissent la ressource (généralement des ressources non-HTML) contenant, selon le type, ils seront affichés par le navigateur qui est également affiché par les plug-ins externes.


Utilisation de l'élément <embed>

Balise <embed> définit un contenu externe de conteneur (non-HTML). (Ceci est un balises HTML5 dans HTML4 est illégal, mais tous les navigateurs sont valides).

Le fragment de code suivant peut afficher un fichier MP3 intégré dans une page web:

Exemples

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

Essayez »

problème:

  • Balise <embed> en HTML 4 est invalide. Page ne peut pas être vérifiée par HTML 4.
  • Différents navigateurs prennent en charge différents formats audio pour.
  • Si votre navigateur ne supporte pas le format de fichier, pas de plug-ins, alors vous ne pouvez pas lire les fichiers audio.
  • Si l'ordinateur de l'utilisateur ne sont pas plug-in installé, vous ne pouvez pas lire des fichiers audio.
  • Si le fichier est converti en d'autres formats, ne peut toujours pas jouer dans tous les navigateurs.

Utiliser élément <object>

<Balise Object> peut également être défini en dehors du conteneur (non-HTML) contenu.

Le fragment de code suivant peut afficher un fichier MP3 intégré dans une page web:

Exemples

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

Essayez »

problème:

  • Différents navigateurs prennent en charge différents formats audio pour.
  • Si votre navigateur ne supporte pas le format de fichier, pas de plug-ins, alors vous ne pouvez pas lire les fichiers audio.
  • Si l'ordinateur de l'utilisateur ne sont pas plug-in installé, vous ne pouvez pas lire des fichiers audio.
  • Si le fichier est converti en d'autres formats, ne peut toujours pas jouer dans tous les navigateurs.

Utilisez HTML5 élément <audio>

HTML5 <audio> élément est un élément HTML5 en HTML 4 est illégal, mais dans tous les navigateurs sont valides.

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

Ci-dessous, nous allons utiliser la balise <audio> pour décrire les fichiers MP3 (Internet Explorer, Chrome et Safari est efficace), a également ajouté les types de fichiers OGG (Firefox et Opera efficace). Si elle échoue, il affiche une erreur texte:

Exemples

<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>

Essayez »

problème:

  • <Audio> dans HTML 4 est invalide. Votre page ne peut pas être vérifiée par HTML 4.
  • Vous devez convertir des fichiers audio vers différents formats.
  • <Audio> élément ne fonctionne pas dans les anciens navigateurs.

Meilleure solution de HTML

L'exemple suivant utilise deux formats audio différents. HTML5 élément <audio> essaie de jouer ogg en mp3 ou audio. Si cela échoue, le code tente de rollback élément <embed>.

Exemples

<audio controls height="100" width="100">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>

Essayez »

problème:

  • Vous devez être converti en un format audio différent.
  • Élément <embed> ne peut pas être annulée pour afficher un message d'erreur.

Yahoo Media Player - un moyen simple d'ajouter de l'audio sur votre site

Joueur en utilisant Yahoo est gratuit. Pour l'utiliser, vous devez mettre cette JavaScript dans le bas de la page:

Yahoo lecteur peut lire les MP3 et divers autres formats. Vous avez seulement besoin d'ajouter une ligne de code à votre page ou blog, vous pouvez facilement faire votre page HTML dans une playlist professionnelle:

Exemples

<a href="horse.mp3">Play Sound</a>

<script src="http://mediaplayer.yahoo.com/latest"></script>

Essayez »

Si vous voulez l'utiliser, vous devez mettre cette JavaScript dans le bas de la page:

<script src="http://mediaplayer.yahoo.com/latest"></script>

Il suffit ensuite de mettre un lien vers vos fichiers MP3 au format HTML, JavaScript crée automatiquement le bouton de lecture pour chaque chanson:

<a href="song1.mp3"> Jouer Chanson 1 </a>
<a href="song2.wav"> Lecture Song 2 </a>
...
...

Yahoo lecteur multimédia pour vos utilisateurs est un petit bouton de lecture à la place du joueur complet. Toutefois, lorsque vous cliquez sur ce bouton fait apparaître un joueur complet.

S'il vous plaît noter que ce joueur est toujours amarré au fond du cadre de la fenêtre. Il suffit de cliquer dessus, vous pouvez faire glisser hors.


Utilisation des hyperliens

Si la page contient un lien hypertexte pointant vers des fichiers multimédias, la plupart des navigateurs utiliser "application d'aide" pour lire le fichier.

Le fragment de code suivant montre des liens vers des fichiers mp3. Si l'utilisateur clique sur le lien, le navigateur va lancer "application d'aide" pour lire le fichier:

Exemples

<a href="horse.mp3">Play the sound</a>

Essayez »


Description de inline son

Lorsque vous incluez son dans une page Web, ou comme partie d'une page Web, il est appelé son inline.

Si vous prévoyez d'utiliser inline sons dans vos applications Web, vous devez réaliser que beaucoup de gens trouvent en ligne sonnent ennuyeux. A noter également que les utilisateurs peuvent avoir fermé votre navigateur l'option inline sonore.

Notre meilleur conseil est de seulement lorsque l'utilisateur veut entendre endroits inline sonores contiennent eux. Un exemple positif est que lorsque l'utilisateur a besoin d'entendre l'enregistrement et cliquer sur un lien pour ouvrir la page et lire l'enregistrement.


HTML tag multimédia

Nouveau: HTML5 nouveau label

标签 描述
<embed> 定义内嵌对象。HTML4 中不赞成,HTML5 中允许。
<object> 定义内嵌对象。
<param> 定义对象的参数。
<audio> New 定义了声音内容
<video> New 定义一个视频或者影片
<source> New 定义了media元素的多媒体资源(<video> 和 <audio>)
<track> New 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)