<< Retour au sommaire

 

HTML 5, La balise audio, le son

 

 

 

Table des matières

  1. Introduction ;
  2. La syntaxe de base ;
  3. La compatibilité avec les navigateurs ;
  4. Ajout d’un script pour l’accessibilité.

 

 

Introduction

 

La balise <audio> permet d’afficher un lecteur audio à l’ouverture d’une page.

Avec les versions antérieures au HTML 5, la balise <bgsound>, placée dans le bloc « head », ne permettait pas d’afficher un lecteur dans la page, et la seule intervention que l’utilisateur pouvait réaliser, était de stoper la lecture du son en pressant la touche « échappement ».

La balise <audio>, quant à elle, est placée dans le bloc « body », elle affiche un lecteur à partir duquel il est possible d’intervenir, « lecture », « pause », « stop » etc.

La balise <audio> offre de nombreuses possibilités, des propriétés sont disponibles, elles seront traitées ici à travers les différentes leçons de ce manuel.

Mais au préalable, vous devez avoir connaissances de quelques indications fortes propices au bon fonctionnement de cette technologie. En effet, le système de lecture du fichier audio est le streaming, c’est-à-dire que le fichier audio est lu instantanément à fur et à mesure de son chargement sur votre machine. Pour que le fichier soit joué, il vous faut un lecteur spécifique, il s’agit de « Adobe Flash Player ».

Si ce lecteur n’est pas encore installé sur votre machine, voici le lien de téléchargement du programme d’installation :

Cliquez ici pour débuter le téléchargement de Flash Player

 

 

La syntaxe de base

 

Voici la version la plus simple de la balise <audio>.

 

La syntaxe :

<audio src="nom_du_fichier_audio">

Message

</audio>

 

La description :

src="nom_du_fichier_audio" :

 

Par exemple :

<audio src="morceau.mp3">

Échec, la balise audio n’est pas reconnue par votre navigateur

</audio>

 

Par exemple :

<audio src="morceau.mp3" autoplay>

Échec, la balise audio n’est pas reconnue par votre navigateur

</audio>

 

Par exemple :

<audio src="morceau.mp3" autoplay controls>

Échec, la balise audio n’est pas reconnue par votre navigateur

</audio>

 

Par exemple :

<audio src="morceau.mp3" autoplay controls loop>

Échec, la balise audio n’est pas reconnue par votre navigateur

</audio>

 

Voici un exemple qui jouera automatiquement le fichier « morceau.mp3 » en affichant le lecteur dans la page :

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Un peu de musique</title>

</head>

<body>

<!-- affichage du lecteur -->

<audio src="morceau.mp3" controls autoplay loop>

Échec, la balise audio n’est pas reconnue par votre navigateur

</audio>

<!-- Affichage d'une image animée -->

<p align="center">

<img src="phonographe.gif" alt="Un phonographe" title="ça vous plait ?" />

</p>

<!-- affichage d'un texte -->

<p>

bonjour,

<br />

Allez, détendez-vous, vous l'avez bien mérité...

</p>

</body>

</html>

 

Pour tester la page ? Voici le lien :

Cliquez ici pour ouvrir la page

 


La compatibilité avec les navigateurs

 

Comme déjà précisé dans le premier chapitre de ce manuel, tous les navigateurs WEB ne sont pas en mesure de jouer tous les formats audio.

Voici donc la liste des principaux navigateurs du marché, et pour chacun d’entre eux, la liste des formats qui leur sont accessibles :

 

 

Vous l’avez donc deviné, en réponse à ce problème d’incompatibilité, la balise <audio> propose une stratégie efficace.

La balise <audio> est une balise paire, entre l’élément de début et de fin, il est possible de spécifier les 3 formats, ainsi, chaque navigateur WEB n’aura qu’à faire son choix !

Mais pour cela, il est nécessaires de mettre en ligne les fichiers audio correspondants, la plupart des logiciels de conversion audio peuvent aisément vous fabriquer ces 3 formats, c’est le cas par exemple avec « Format Factory » et « DMSI ».

 

La syntaxe :

<audio>

<source src="morceau.mp3" type="audio/mp3" />

<source src="morceau.ogg" type="audio/ogg" />

<source src="morceau.wav" type="audio/wav" />

Échec, la balise audio n’est pas reconnue par votre navigateur

</audio>

 

La description :

Chacune des balises <source> vous permet de spécifier l’un des formats mis en ligne.

Quant à la balise <audio>, il vous est possible d’y placer les propriétés vues dans le chapitre précédent :

<audio autoplay controls loop>

<source src="morceau.mp3" type="audio/mp3" />

<source src="morceau.ogg" type="audio/ogg" />

<source src="morceau.wav" type="audio/wav" />

Échec, la balise audio n’est pas reconnue par votre navigateur

</audio>

 

Voici un exemple concret :

 


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Un peu de musique</title>

</head>

<body>

<!-- affichage du lecteur -->

<audio controls autoplay loop>

<source src="morceau.mp3" type="audio/mp3" />

<source src="morceau.ogg" type="audio/ogg" />

<source src="morceau.wav" type="audio/wav" />

Échec, la balise audio n'est pas reconnue par votre navigateur

</audio>

<!-- Affichage d'une image animée -->

<p align="center">

<img src="phonographe.gif" alt="Un phonographe" title="ça vous plait ?" />

</p>

<!-- affichage d'un texte -->

<p>

bonjour,

<br />

Allez, détendez-vous, vous l'avez bien mérité...

</p>

</body>

</html>

 

Pour tester la page ? Voici le lien :

Cliquez ici pour ouvrir la page


Ajout d’un script pour l’accessibilité

 

Il existe une technique qui force l’affichage d’un bouton « Play/Pause » et en dépit du navigateur utilisé.

En reprenant l’exemple du chapitre précédent, voici ce que ça donne !

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Un peu de musique</title>

</head>

<body>

<!-- affichage du lecteur -->

<audio id="MonLecteur" autoplay>

<source src="morceau.mp3" type="audio/mp3" />

<source src="morceau.ogg" type="audio/ogg" />

<source src="morceau.wav" type="audio/wav" />

Échec, la balise audio n'est pas reconnue par votre navigateur

</audio>

<button type="button" onclick="aud_play_pause()">Lecture/Pause</button>

<script>

function aud_play_pause() {

  var MonLecteur = document.getElementById("MonLecteur");

  if (MonLecteur.paused) {

    MonLecteur.play();

  } else {

    MonLecteur.pause();

  }

}

</script>

<!-- Affichage d'une image animée -->

<p align="center">

<img src="phonographe.gif" alt="Un phonographe" title="ça vous plait ?" />

</p>

<!-- affichage d'un texte -->

<p>

bonjour,

<br />

Allez, détendez-vous, vous l'avez bien mérité...

</p>

</body>

</html>

 

Pour tester la page ? Voici le lien :

Cliquez ici pour ouvrir la page

 

Philippe BOULANGER