HTML 5 insérer des Audios dans une page web

HTML5 fournit une norme pour la lecture des fichiers audio. Il n’y avait pas de norme pour la lecture des fichiers audio sur une page web.
Aujourd'hui, la plupart des fichiers audio sont lues par un plug-in (comme flash). Toutefois, différents navigateurs peuvent avoir différents plug-ins.
HTML5 définit un nouvel élément qui spécifie un moyen standard pour incorporer un fichier audio dans une page web : l'élément <audio>.

La balise audio

HTML5 cours tutorial Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge l'élément <audio>.

Remarque : Internet Explorer 8 et versions antérieures, ne supportent pas l'élément <audio>.


Formats audio et prise en charge des  navigateurs

Actuellement, il existe 3 formats de fichiers pris en charge pour l'élément <audio> : MP3, Wav et Ogg .

Le tableau suivant montre les formats prisent en charge par les navigateurs les plus utilisées :

Navigateur

MP3

WAV

OGG

Internet Explorer 9

OUI

NON

NON

Firefox 4.0

NON

OUI

OUI

Google Chrome 6

OUI

OUI

OUI

Apple Safari 5

OUI

OUI

NON

Opéra 10.6

NON

OUI

OUI

Le tableau montre qu’aucun des navigateurs ne prend en charge les trois formats 


HTML5 Audio - Comment ça marche

Pour lire un fichier audio en HTML5, tout ce dont vous avez besoin est la balise <audio> et la balise <source>, sans installer quoi que ce soit et sans ajouter de plug-in dans le navigateur.

Exemple :

Sélectionner le code

              <audio controls="controls">
                <source src="horse.ogg" type="audio/ogg">
                <source src="horse.mp3" type="audio/mpeg">
              Ce navigateur ne prend pas en charge la balise audio
              </audio>
            

L'attribut controle ajoute des contrôles audio, tels que lecture, pause et volume.

Vous devez également insérer un contenu textuel entre  les balises <audio> et </audio> pour les navigateurs qui ne prennent pas en charge l'élément <audio>.

L'élément <audio> permet de multiples éléments <source>.

On peut utiliser plusieurs éléments source avec différents fichiers audio. Le navigateur utilisera le premier format reconnu.


HTML5 Balises Audio

Tag

Description

<audio>

Définit le contenu sonore

<source>

Définit plusieurs ressources de support pour les éléments multimédias, tels que <video> et <audio>

Par carabde 10 juin 2014

chapitre précédent

sommaire

chapitre suivant