Coder un lecteur audio sans librairie, avec la Web Audio API

Je suis aussi beatmaker, donc ce portfolio a une page musique. Plutôt que d'embarquer une grosse librairie de lecteur, j'ai voulu le coder à la main. Pas par orgueil : parce qu'un lecteur maison reste léger, se comporte exactement comme je veux, et m'oblige à comprendre ce qui se passe vraiment quand un son joue dans un navigateur.

L'élément audio ne suffit pas (et c'est tant mieux)

Une balise <audio> joue un fichier, point. Pour une vraie expérience — barre de progression fluide, temps qui défile, contrôle précis — il faut piloter la lecture soi-même et synchroniser l'interface avec l'état réel du son.

Le piège classique, c'est de mettre à jour la barre de progression avec un setInterval. Ça marche, mais ça saccade : l'intervalle ne tombe jamais pile sur le rythme de rafraîchissement de l'écran.

requestAnimationFrame, pour une progression fluide

La bonne approche, c'est requestAnimationFrame. Au lieu de dire « mets à jour toutes les 250 ms », on dit « mets à jour à chaque image que le navigateur dessine ». La barre suit alors le son sans à-coups.

function tick() {
  const progress = audio.currentTime / audio.duration;
  bar.style.transform = `scaleX(${progress})`;
  if (!audio.paused) requestAnimationFrame(tick);
}

On lance la boucle au play, on la laisse s'arrêter au pause. Pas de timer qui tourne dans le vide, pas de saccade. L'interface respire au rythme de l'écran.

La Web Audio API, quand on veut plus

Pour aller plus loin qu'une simple lecture — visualiser une forme d'onde, mesurer le volume, appliquer un effet — il faut la Web Audio API. Elle modélise le son comme un graphe : une source (le fichier), des nœuds de traitement, et une sortie (les haut-parleurs).

On branche un AnalyserNode sur la source, et il nous donne en temps réel les données de fréquence ou d'amplitude. C'est ce qui permet de dessiner une forme d'onde qui bouge avec la musique, sans tricher.

Le détail qui compte : l'autoplay bloqué

Les navigateurs interdisent de jouer du son sans interaction de l'utilisateur. Un AudioContext démarre donc « suspendu », et il faut le réveiller au premier clic. Si on l'oublie, le lecteur a l'air cassé : tout semble jouer, mais aucun son ne sort.

C'est exactement le genre de cas limite qu'on ne voit pas en lisant la doc, et qu'on découvre en testant sur un vrai téléphone.

Ce que j'en retiens

Faire un lecteur maison m'a rappelé une chose vue ailleurs, jusque dans le minishell en C : les outils qu'on croit magiques sont faits de décisions simples, empilées avec soin. Une boucle d'animation au bon endroit, un contexte audio réveillé au bon moment, et un gros morceau de l'expérience est déjà là — sans aucune dépendance.

Le reste du concept derrière ce site, je le raconte dans pourquoi mon portfolio est un moteur de recherche.