images - Cours

La balise audio

La balise audio sert à inserrer de la musique et d'une façon générale un son dans un document html.

L'attribut src

L'attribut src (source) est indispensable pour toute balise audio puisque c'est avec cet attribut src que l'on va préciser l'adresse où se situe cette musique.

Cette adresse est indiquée en absolu ou en relatif.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> audio  </title>
         
    </head>
    <body>
         <p> Un morceau de musique avec lien relatif (l'image se trouve dans le dossier audio_musiques) : 
            <audio src="musiques/etudiant.mp3" controls></audio>
        </p>
    </body>
</html>

Lorsqu'il faut remonter dans l'arborescence pour trouver un fichier, on utilise : ../ .

Exemple.
Le fichier dans lequel nous écrivons se trouve dans le répertoire (ou dossier) nommé musiques. Dans ce fichier (il s'agit d'un fichier html), nous voulons créer un lien vers le fichier musique etudiant.mp3 et un lien vers le fichier musique MusiqueAfricaine.mp3.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> audio  </title>
         
    </head>
    <body>
        <p>   L'étudiant de Renaud : 
            <audio src="musiques/etudiant.mp3" alt="Renaud" controls></audio>
        </p>

        <p>   Musique africaine : 
            <audio src="../Divers/MusiqueAfricaine.mp3" alt="Afrique" controls></audio> <br>
            
        </p>
         
    </body>
</html>

Le code ../ signifie que l'on sort du dossier parent (on remonte d'un niveau dans l'arbre).
On peut utiliser plusieurs fois ../ lorsque il est nécessaire de remonter de plusieurs niveaux : ../../../nom_repertoireA/nom_repertoireB/nomfichier.mp3.

L'attribut controls

Si vous utilisez la balise audio sans l'attribut controls vous ne verrez rien ! En effet, le navigateur va seulement télécharger les informations générales sur le fichier (on parle de métadonnées), mais il ne se passera rien de particulier.

L'attribut controls est indispensable dans la balise audio , il vous permet d'ajouter les boutons "Lecture", "Pause" et la barre de défilement. vous vous demandez peut-être pourquoi ça n'y est pas par défaut, mais certains sites web préfèrent créer eux-mêmes leurs propres boutons et commander la lecture avec du Javascript.

Autres attributs

width : pour modifier la largeur de l'outil de lecture audio.

loop : la musique sera jouée en boucle.

autoplay : la musique sera jouée dès le chargement de la page. Evitez d'en abuser, c'est en général irritant d'arriver sur un site qui joue de la musique tout seul !

Les formats

Pour diffuser de la musique ou n'importe quel son, il existe de nombreux formats. La plupart d'entre eux sont compressés (comme le sont les images JPEG, PNG et GIF) ce qui permet de réduire leur poids :

Format MP3 : C'est l'un des plus vieux, mais aussi l'un des plus compatibles (tous les appareils savent lire des MP3), ce qui fait qu'il est toujours très utilisé aujourd'hui.

Format AAC : utilisé majoritairement par Apple sur iTunes, c'est un format de bonne qualité. LesiPod, iPhone et autres iPad savent les lire sans problème.

Format OGG : le format OggVorbis est très répandu dans le monde du logiciel libre, notamment sous Linux. Ce format a l'avantage d'être libre, c'est-à-dire qu'il n'est protégé par aucun brevet.

Format WAV (format non compressé) : évitez de l'utiliser autant que possible, car le son est trèsvolumineux avec ce format. C'est un peu l'équivalent du Bitmap (BMP) pour l'audio. Aucun navigateur ne gère tous ces formats. Retenez surtout la compatibilité pour les MP3 et OGG :

On peut écrire un message ou de proposer une solution de secours pour les navigateurs qui ne gèrent pas cette nouvelle balise

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> format non reconnu </title>
    </head>
    <body>
      <p> afficher un message   : 
            <audio src="musique.mp3" controls>Veuillez mettre votre navigateur à jour !</audio> 
        </p>
    </body>
</html>

Ceux qui ont un navigateur récent ne verront pas le message. Les anciens navigateurs, qui ne comprennent pas la balise, afficheront en revanche le texte qui se trouve à l'intérieur.

Il faut proposer plusieurs versions du fichier audio. Dans ce cas, on va construire notre balise comme ceci :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> plusieurs formats </title>
    </head>
    <body>
      <p> porposition de plusieurs formats   : 
            <audio controls>
				<source src="musique.mp3"></source>
				<source src="musique.ogg"></source>
				<source src="musique.aac"></source>
				<source src="musique.wav"></source>
			</audio> 
        </p>
    </body>
</html>