La balise HTML <audio> permet d’écouter une musique sur une page web, son principal défaut est de remettre la piste au début à chaque changement de page.

Voici la solution en javascript/jquery afin de démarrer la piste là ou elle s’est arrêtée à la page précédente.

Afin de voir les évènements et accesseurs de la balise html <audio>, nous allons nous servir de la documentation.

Comme vous pouvez le voir sur la documentation officielle, l’attribut currentTime permet de savoir a quelle seconde de lecture la piste en est.

On peux également l’éditer avec du javascript, comme vous pouvez le voir sur le banc de test.

D’autres attributs/fonctions nous seront utiles :

  • duration : Durée totale en secondes de la piste.
  • canplay : Booléen signifiant que la balise audio est prête pour lire.
  • loadedmetadata : Booléen indiquant que la balise audio à reçu les informations du fichier.
  • play() : Fonction permettant lire la piste, peu importe son état.
  • volume :

Ainsi nous avons tous les éléments afin de démarrer la piste là ou elle s’est arrêtée à la page précédente.

Réflexion avant codage

Avant de se lancer tête baissée dans le codage, voici le processus par lequel notre balise audio html devra passé :

  • Première lecture de la page : le lecteur audio se lancera en lecture avec comme currentTime = 0
  • Lors de la lecture, une fonction javascript lira la position du temps de lecture (currentTime) et l’enregistrera dans le navigateur du visiteur toutes les 2 secondes.
  • L’utilisateur change de page, le fait de quitter la page exécute une fonction qui
  • le lecteur attend de recevoir les informations sur le fichier ainsi que l’éventuelle variable de la position du temps de dernière lecture enregistrée.
  • Les données précédentes sont chargées, on va comparer le temps total de la musique avec la position du temps de la dernière lecture enregistré.
  • Si le temps de la dernière lecture enregistrée est a moins de 5 secondes de la fin de la musique, la position de temps de lecture (currentTime) sera mis à 0 secondes, sinon la position de temps de lecture (currentTime) prendra la valeur enregistrée.

En suivant ce processus, la balise html audio devrait démarrer la piste là ou elle s’est arrêtée à la page précédente.

Passons au code

Afin que les données soient enregistrées dans le navigateur du client et ne se réinitialisent pas en ouvrant un autre onglet de cette même page, on va utiliser le localStorage.