Etape 5

Insérer un repère de lecture

Nous allons essayer d'aller un peu plus loin dans ce passionnant langage de programmation qu'est le javascript.
Plutôt que de mettre les codes en javascript dans les balises, il peut s'avérer plus pratique de les rassembler dans un même endroit du document. Cela donne plus de clarté au code et évite les répétitions.

Commencez par recharger le fichier "page3b.htm" puis sauvegardez-le sous "page5a.htm".
Nous allons rajouter notre code javascript en fin de document juste avant la balise fermante </body>.
Pour indiquer au navigateur à quels endroits commence et finit le script nous utilisons les balises <SCRIPT> et </SCRIPT>Nous précisons le langage utilisé puisque le javascript n'est pas le seul langage de programmation utilisé dans les pages web.
Nous allons mettre en place les deux fonctions utilisées précédemment. Le mot clé pour déclarer une fonction est function (en minuscules, attention à l'orthographe anglaise "u" au lieu de "o"). Il est suivi du nom de la fonction comportant obligatoirement les parenthèses à la fin.
Le code éxécuté par la fonction doit être mis entre accolades
Le nom des fonctions et des variables est laissé à votre libre choix. Une règle cependant pour que le code soit compatible avec tout navigateur, éviter les caractères accentués et autres caractères spéciaux.

Voici le code complet de la page :

<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
</head>
<body>
<audio  src="frere.wav" Id="lecteur1"></audio>
<p style="text-align:center;">
<input type="button" value="Lecture" onClick="lecture();"/>
<input type="button" value="Pause" onClick="pause();"/>
</P>
<script type="text/javascript">
function lecture()
    {
    document.getElementById("lecteur1").play();
    }
function pause()
    {
   document.getElementById("lecteur1").pause();
    }
</script>
</body>
</html>

"Voilà qui semble bien inutilement compliqué !"
"C'est vrai, pour l'instant on se complique un peu la vie pour se la simplifier plus tard."
Modifiez le code en conséquence puis, après sauvegarde, testez le fichier page5a.htm.


Si ça ne marche pas : Vérifiez également les accolades elles sont indispensables au bon fonctionnement du code. Une accolade ouvrante { au début juste après la déclaration de fonction et une autre accolade fermante à la fin de la fonction. Il arrive que l'on passe des heures à chercher pourquoi un programme ne fonctionne pas alors que l'on a simplement oublié ou mal placé une accolade, un point virgule.

Une fois que tout fonctionne, réenregistrez le fichier sous page5b.htm.
A propos de variable, nous allons utiliser la variable "pos" (nom choisi de façon arbitraire pour désigner cette variable). Elle va nous servir à stocker une position du lecteur et ainsi pouvoir redémarrer la lecture à cet endroit.
Insérez la ligne var pos juste après la balise <SCRIPT>. var (en minuscules) est le mot clé pour déclarer une variable.
Dans la foulée, pour ne pas avoir à réécrire l"expression "document.getElementById("lecteur1")" nous l'affectons à une 2e variable :
var lecteur=document.getElementById("lecteur1")
Par copier-coller nous allons rajouter deux boutons de commande (INPUT) et les appeler" Enregistrer la position" et "Jouer depuis la position". En cliquant sur le bouton "Enregistrer la position" nous affectons la valeur de la position courante de lecture du lecteur1  à la variable pos :
pos=lecteur.currentTime;
En cliquant sur le bouton "Jouer depuis la position" nous récupérons la valeur stockée pour indiquer au lecteur à quel endroit se placer, ensuite nous faisons redémarrer la lecture au cas où le lecteur serait à l'arrêt.
lecteur.currentTime=pos; lecture();
Remarque : Lorsque plusieurs instructions en javascript se suivent dans une même ligne il faut les séparer par des points virgules. Une bonne habitude à prendre est de terminer également chaque ligne par un point virgule. (en php c'est obligatoire).

<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
</head>
<body>
<audio src="frere.wav"  Id="lecteur1" ></audio>
<P style="text-align:center;">
<input type="button" value="Lecture" onClick="lecture();">
<input type="button" value="Pause" onClick="pause();">
<input type="button" value="Enregistrer la position" onClick="pos=lecteur.currentTime;"/>
<input type="button" value="Jouer depuis la position" onClick="lecteur.currentTime=pos;lecture();"/>
</p>
<script type="text/javascript">
var pos;
var lecteur=document.getElementById("lecteur1");
function lecture()
    {
    lecteur.play();
    }
function pause()
    {
    lecteur.pause();
    }
</script>
</body>
</html>