HTML5 : La balise audio

La balise audio de HTML5 est donc la bienvenue. Il y avait cependant un petit bémol ...
Pour que le navigateur puisse lire un fichier audio il doit disposer du codec correspondant au format de la vidéo. Or seul le navigateur Chrome avait intégré tous les codec ...

Cette situation aboutissait à devoir proposer deux formats dans le conteneur AUDIO pour que votre fichier audio puisse être lue par n'importe quel navigateur récent !

J'emploie le passé car bonne nouvelle j'ai constaté au que la dernière version de Firefox est désormais capable de lire les fichiers audio au format mp3. Donc il ne sera plus nécessaire dans un futur proche de proposer deux sources à la balise audio. C'est d'ailleurs ce que je fais dans mon code. Donc les utilisateurs de Firefox qui n'arrivent pas à lire le fichier audio de cette page savent qu'ils doivent installer une version plus récente de ce navigateur.

Exemple d'utilisation d'un fichier audio

Le code correspondant

Le code CSS :

img, audio {display : block ; margin : 10px auto 10px auto ; }

La balise audio n'est pas nativement de type block (comme la balise img). Il faut donc la transformer en boîte (display :block) pour que le centrage horizontal soit effectif.

Le code HTML :

<img src ='../images/foret.jpg' width ='80%'> <audio controls > <source src = "../audio_video/automne.mp3" > <p>votre navigateur est obsolète et ne peut lire le fichier audio</p> </audio>

La balise AUDIO ne dispose pas (à la différence de la balise VIDEO) des attributs width, height, poster. C'est pour cette raison que l'on a utilisé la balise img en plus de la balise audio. D'ailleurs il aurait été préférable de grouper ces deux balises dans le nouveau conteneur figure ... (voir page suivante qui porte sur ce nouveau conteneur).

Par contre la balise AUDIO dispose (comme la balise VIDEO) des attributs loop (exécuter en boucle), autoplay (démarrage automatique), controls et preload
Si vous utilisez IE8 le navigateur va se contenter d'afficher le message : "votre navigateur est obsolète ... ".
A partir du moment qu'une seule source vidéo peut être lue par tous les navigateurs il n'est plus nécessaire d'utiliser à l'intérieur du conteneur audio la balise source. Il suffit d'utiliser dans la balise audio l'attribut src pour préciser le chemin relatif du fichier vidéo.
Retour menu