Etape 3

Un lecteur personnalisé

"Sans vous vexer, ne serait-il pas possible d'avoir la même chose sans que le lecteur s'affiche avec juste quelques boutons pour démarrer ou arrêter le son ?"
Pas de problème
Commencez par recharger le fichier "page2.html" puis sauvegardez-le sous "page3.html".
Pour notre projet il s'agit de donner un identifiant au lecteur, par exemple lecteur1.

<audio src="son1.wav" Id="lecteur1"></audio>

Puis après la balise audio fermante,</audio>, rajouter la ligne suivante :
<input type="button" value="Lecture" onClick="document.getElementById('lecteur1').play();"/> qui va faire apparaître un bouton affichant "Lecture".
Il s'agit d'une nouvelle balise input dont l'action est, lorsque l'on clique sur ce bouton, de faire jouer l'élément de la page dont l'Id (identifiant) est lecteur1 .
Vous noterez l'utilisation d'apostrophes pour 'lecteur1' à l'intérieur d'une expression déjà entourée de guillemets.
Comme la balise input ne nécessite pas de balise fermante, on peut rajouter une barre oblique à la fin : "/>.
Ajoutez un retour chariot.
Pour le bouton pause, sélectionnez la ligne insérée précédemment avec la souris et copiez-la dans le presse-papier (Ctrl C) puis coller le contenu dans la ligne suivante (Ctr V)
Modifiez l'étiquette : value="Pause" et l'action : onClick="document.getElementById('Lecteur1').pause();"
Voici le code complet entre les deux balises body :

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

Enregistrez et testez.



Vous savez que vous venez de faire vos premiers pas en Javascript ? En effet le code entre guillemets après la commande onClick est du javascript.
Wouah, félicitations !