Tutoriel HTML5

HTML5

Découvez les bases et les nouveautés du HTML5 dans ce tutoriel.

HTML CSS Dreamweaver Bootstrap PHP

Balise audio en HTML5

Dans ce tutoriel, nous allons aborder l'intégration de fichier audio en HTML5..

La balise audio

La balise <audio> permet de lire du son, elle supporte 3 formats : MP3, Wav, and Ogg

Les formats audios supportés

File Format Media Type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

Exemple

<audio title="Noir Désir" preload="auto" controls loop>
<source src="medias/le_vent_nous_portera.mp3" type="audio/mp3">
<p>Votre navigateur est trop ancien pour lire ce fichier</p>
</audio>

<figure> et <figcaption> avec la balise Audio

La balise <figure> est en fait une unité de contenu, un encart pour isoler un bloc avec un contenu principalement constitué de un ou plusieurs éléments : multimédias, diagrammes, tableaux, illustrations, exemples, codes, images, vidéos, ou carrément du texte.

la balise <figcaption> permet d'afficher une légende ou une description du contenu de la figure.

Exemple

Lire un fichier audio
<figure>
<audio title="Noir Désir" preload="auto" controls loop>
<source src="medias/le_vent_nous_portera.mp3" type="audio/mp3">
<p>Votre navigateur est trop ancien pour lire ce fichier</p>
</audio>
<figcaption>Lire un fichier audio</figcaption>
</figure>

Maximiser la compatibilité

Si tous les navigateurs ne sont pas compatibles avec un même codec, il peut parfois être judicieux de le remplacer par un autre. Dans l'exemple ci-dessous, si on ne peut pas lire le format mp3, on passera au format ogg.

<audio title="Noir Désir" preload="auto" controls loop>
<source src="medias/le_vent_nous_portera.mp3" type="audio/mp3">
<source src="medias/le_vent_nous_portera.ogg" type="audio/ogg">
<p>Votre navigateur est trop ancien pour lire ce fichier</p>
</audio>

Attributs de la balise audio

Attribut Valeur Description
autoplay autoplay Précise si la lecture se lance automatiquement
controls controls Indique si les boutons de contrôles (lecture, arret …) doivent être visibles.
loop loop Indique si le fichier doit tourner en boucle.
preload
  • none = pas de préchargement (économise donc de la bande passante si le contenu audio n’est pas lu)
  •   auto = préchargement
  •   metadata = préchargement mais uniquement des métadonnées du fichier audio.
Permet d’indiquer au navigateur de précharger en arrière plan le fichier media. L’attribut preload peut prendre 3 valeurs :
src url Chemin ver le fichier audio

Ce site est liste dans la categorie Enseignement et formation : Formations professionnelles de l'annuaire Référencement et Dictionnaire

Frédéric création Jardin | Au petit grandeur | Jerico | Solumetal | Comonmarket | Chez Beau J'ai | Beukenne Traiteur | PDP Recouvrement | Agroé - Achat groupé d'énérgie | Achat goupé Sorea | CE LM énergie | placedesenergies.com | Gazon de la Folie | Dépannage pôele à  pellet | Création site web Nord | Rénovation habitat Pas de calais | Cuisine Bois | Créperie à  Valenciennes | Repar Coudre | DNS service | Archis 2 | 3MI | Tests d'orientation professionnels - Solutests | Ircl | Leblan promotion | Formation webmaster, PAO, CAO / DAO | Formateur Web, référencement et PAO | Formateur bureautique |