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.