Construire un moteur sonore à partir de zéro est un rite de passage. Vous voulez comprendre l’horloge. Le timing. La logique brute qui transforme le silence en rythme. Un séquenceur est cette logique. C’est une grille. Vous placez des notes. Vous avancez.
La plupart des tutoriels ignorent la partie la plus difficile. Ils vous montrent une bibliothèque. Ils vous montrent une interface graphique. Ils ne vous montrent pas comment gérer la dérive. Les erreurs de timing qui surviennent lorsque vous suivez manuellement le temps.
Réparons cela.
Nous construisons un séquenceur pas à pas de base. Il fonctionnera sur une simple boucle. Cela déclenchera des sons. Il gardera le temps sans regarder devant lui. Cette approche évite la sensation « saccadée » que vous ressentez lorsque vous utilisez « setTimeout » pour de longues boucles.
Le concept de base : le timing par étapes
Un séquenceur fonctionne par pas. Pas des secondes. Mesures.
Si votre tempo est de 120 BPM, chaque battement dure 0,5 seconde. Si vous disposez de 16 étapes, chaque étape dure 0,125 seconde. La magie opère lorsque vous vous fixez sur ces intervalles.
“Le temps n’est pas un flux continu dans un séquenceur. C’est une série d’événements discrets. La synchronisation avec ces événements est primordiale.”
Nous avons besoin d’un moyen de calculer le moment où chaque étape se produit. Pas en devinant. Par les mathématiques.
Configuration de l’horloge
Vous avez besoin d’un point de référence. L’heure de début.
En JavaScript, Date.now() ou performance.now() vous donne des millisecondes. Vous l’utilisez pour calculer la dérive.
- Définissez le tempo.
- Calculez la durée de l’étape.
- Démarrez une boucle.
Voici le squelette. Ce n’est pas joli. Ça marche.
Ce code est basique. Il utilise setTimeout. Ce n’est pas parfait. Mais c’est un début.
Pourquoi c’est important
Pourquoi le construire soi-même ?
Les bibliothèques comme Tone.js ou les wrappers de l’API Web Audio sont excellentes. Ils gèrent la planification complexe. Ils compensent la latence.
Mais vous n’apprenez pas comment ils fonctionnent en les utilisant. Vous apprenez en voyant où ils échouent.
Lorsque setTimeout dérive, votre rythme vacille. Cela semble humain. Cela semble faux.
Gérer la dérive
La vérification « if (nextStepTime < Date.now()) » est critique.
Il
