Etape 6
Indicateur de position (utilisation de la temporisation)
Maintenant que nous commençons à être des pros du javascript, nous pouvons encore envisager un dernier perfectionnement (un indicateur de position) avant de passer à un autre type d'utilisation du son sur une page.
Rechargez le fichier page5a.html et enregistrez-le sous page6.html.
Commençons à créer la zone d'affichage.
Insérez une nouvelle balise après "<p style="text-align:center;">" :
<input type="button" value="0.0" Id="compteur">
Pour modifier cycliquement la valeur affichée par ce compteur il nous faut créer une nouvelle fonction. Juste avant la balise de fin de script </script> veuillez insérer le code suivant :
function affichage()
{
document.getElementById('compteur').value=lecteur.currentTime;
}
Pour obtenir un fonctionnement cyclique nous faisons
appel à la temporisation.
Il s'agit d'afficher une position variable de la tête
de lecture. Il faut donc pouvoir renouveler cet affichage automatiquement à
intervalles réguliers.
La fonction de temporisation fournie par javascript
s'appelle setTimeout() (timeout signifie compte à rebours).
Au bout d'un intervalle de temps défini (ici 100 millisecondes) cette fonction va déclencher une action de votre choix
: la fonction affichage().
En plaçant cette temporisation à l'intérieur
même de la fonction affichage() elle va donc s'appeler elle-même
et nous obtenons le fonctionnement cyclique désiré.
La variable idTemp contient la référence du compte à rebours déclenché. Comme pour pos et lecteur il faudra la déclarer en début de script.
idTemp=setTimeout("affichage();",100);
Il nous reste encore à pouvoir déclencher
cet affichage lors de la lecture.
Pour cela il faut faire appel à cette fonction affichage()
dans la fonction lecture(). Rien de plus simple puisque pour cela
il nous suffit d'ajouter la ligne affichage();
dans la fonction lecture().
Pour éviter que cette boucle ne tourne indéfiniment nous rajoutons l'instruction : clearTimeout(idTemp); dans la fonction pause.
Voici le code complet :
<!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="0.0" Id="compteur"/><br>
<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");
var idTemp;
function lecture()
{
lecteur.play();
affichage();
}
function pause()
{
clearTimeout(idTemp);
lecteur.pause();
}
function affichage()
{
document.getElementById('compteur').value=lecteur.currentTime;
idTemp=setTimeout("affichage();",100);
}
</script>
</body>
</html>
"C'est hideux, ce contrôle qui change
de taille sans arrêt et qui affiche des valeurs avec 36 chiffres significatifs"
"Merci beaucoup"
A l'étape suivante vous serez à même de corriger cela vous-même.
Donc avant d'aborder d'autres aspects comme l'insertion
d'une image et la création de zones sensibles je vous propose une séance
de révision vous permettant de vous mettre à l'épreuve.