Etape 1

Préparation

Dans le dossier de travail (web&son voir l'introduction) créez un nouveau fichier texte (clic droit, dans la fenêtre qui apparaît puis cliquez sur Nouveau et ensuite sur Document texte. Un nouveau fichier appelé Nouveau Document Texte.txt apparaît. Renommez-le en page1a.html.

Ouvrez ce fichier avec le bloc-note. Une fenêtre vide s'ouvre. Pour en faire une page web. tapez ou copiez-collez ces quelques lignes :

<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
</head>
<body>

</body>
</html>

Et nous pouvons immédiatement passer à ce qui nous intéresse : placer un son.

Dans cet exemple nous utilisons la balise <audio>. L'argument "src" de la balise indique au navigateur quel fichier son doit être utilisé. L'argument "autoplay" fait démarrer la lecture à l'ouverture de la page. Cela donne : <audio src="nom du fichier son à utiliser" autoplay >

Vous pouvez utiliser votre propre fichier audio à la place du fichier son1.wav proposé pourvu qu'il ait un format compatible.
Le format "wav" non compressé est compatible avec un grand nombre de plate-formes et de navigateurs.
(Recopier le fichier désiré dans le dossier de travail web&son, puis modifier le nom du fichier dans la balise audio. Attention à respecter scrupuleusement les majuscules et minuscules.)
Comme pour la plupart des balises HTML il faut également une balise fermante pour audio :</audio>
Exemple complet :

<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
</head>
<body>
<audio src="son1.wav" autoplay>
</audio>
</body>
</html>

Enregistrer le fichier (Ctrl S). Ouvrez ce même fichier avec votre navigateur. Vous devriez entendre une petite mélodie.



Si ça ne marche pas :


Super, ça baigne, mais moi je voudrais que le son boucle !

Vous êtes sûr? Bon !

Pour que le morceau recommence indéfiniment à jouer il faut rajouter l'argument loop dans la balise audio ce qui donne la ligne modifiée :

<audio src="son1.wav" loop>

Après avoir fait la modification enregistrez le fichier sous page1b.html.
( Menu Fichier enregistrer sous Dans la boîte de dialogue qui apparaît sélectionnez pour "Type" l'option "tous les fichiers". tapez page1b.htm)
Ouvrez le fichier page1b.htm avec votre navigateur pour le tester.