Etape 4

Multiplier les lecteurs :

Tout le monde : "une pause SVP"
Excellente idée ; que diriez-vous de faire un petit canon ?

Commencez par recharger le fichier "page3a.htm" puis sauvegardez-le sous "page4a.htm"
Il nous faut modifier les options du lecteur1 :
On change de fichier son. (C'est beau mais ça lasse quand-même). On remplace le fichier "son1.mp3" par "frere.mp3".

<audio src="frere.wav" loop Id="lecteur1">

Pour faire une toute petite concession à la mise en page nous allons rajouter le nom du lecteur et placer le tout dans un paragraphe centré avec la balise <p>
Voici le code complet à insérer entre les balises body :

<p style="text-align:center;">
Lecteur 1

<audio src="frere.wav" Id="lecteur1" loop></audio>
<input type="button" value="Lecture" onClick="document.getElementById('lecteur1').play();"/>
<input type="button" value="Pause" onClick="document.getElementById('lecteur1').pause();"/>
<br/>
</p>

Pour pouvoir jouer cette mélodie (merci Gustav) en canon il nous faut 3 lecteurs supplémentaires. En se servant du presse-papier pour copier-coller ce sera très vite réalisé.
La balise <br> (line BReak) permet d'insérer un saut de ligne. On peut rajouter une barre oblique pour indiquer qu'il n'y a pas de balise fermante.
Sélectionnez la section de code comprise entre les balises <p> et </p>
Copiez-la dans le presse papier (Ctrl C). Placer le curseur juste avant </p>. Faites 3 fois Ctrl V.
Il reste à modifier les nom des lecteurs : lecteur 1 en lecteur 2 ; De même pour le lecteur 3 et le lecteur 4. Cela donne le code suivant :

<p style="text-align:center;">
Lecteur 1
<audio src="frere.wav" loop Id="lecteur1"></audio>
<input type="button" value="Lecture" onClick="document.getElementById('lecteur1').play();"/>
<input type="button" value="Pause" onClick="document.getElementById('lecteur1').pause();"/>
<br/>
Lecteur 2
<audio src="frere.wav" loop Id="lecteur2"></audio>
<input type="button" value="Lecture" onClick="document.getElementById('lecteur2').play();"/>
<input type="button" value="Pause" onClick="document.getElementById('lecteur2').pause();"/>
<br/>
Lecteur 3
<audio src="frere.wav" loop Id="lecteur3"></audio>
<input type="button" value="Lecture" onClick="document.getElementById('lecteur3').play();"/>
<input type="button" value="Pause" onClick="document.getElementById('lecteur3').pause();"/>
<br/>
Lecteur 4
<audio src="frere.wav" loop Id="lecteur4"></audio>
<input type="button" value="Lecture" onClick="document.getElementById('lecteur4').play();"/>
<input type="button" value="Pause" onClick="document.getElementById('lecteur4').pause();"/>
<br/>
</p>

Enregistrez le fichier sous page4.html et bonne détente.



" Pas si évident que ça pour arriver à synchroniser les 4 lecteurs !"