Une boîte à musique à bande perforée, comme celles qu’on trouve dans les boutiques de cadeaux : on perce la bande de papier, on tourne la manivelle, et le peigne d’acier joue ce qu’on a écrit.
Vue d’ensemble
Music Box reproduit le mécanisme d’une boîte à musique à carton. Une longue bande quadrillée passe sous un rouleau et devant une rangée de petites roues étoilées. Chaque ligne horizontale de la bande correspond à une lame du peigne. Un clic sur une intersection perce un trou, un second clic le rebouche, et un glissé perce toute une ligne. Quand un trou arrive sous les étoiles, la lame est soulevée, puis relâchée : elle sonne et on la voit vibrer.
La manivelle se tourne à la souris ou au doigt. Sa vitesse fixe le tempo, et tourner vite donne un son plus brillant, comme sur une vraie boîte. En sens inverse, la bande recule sans jouer. Un moteur peut aussi tourner à votre place, à la vitesse choisie, pour écouter la mélodie en entier.
Fonctionnalités
- Deux peignes : 20 lames en gamme de do, comme les mouvements les plus courants, ou 30 lames avec les dièses du médium, comme les modèles « chromatiques » du commerce.
- Une bande à composer : de 2 à 96 mesures, en 4/4 ou en 3/4, qu’on fait défiler à la molette, aux flèches, à deux doigts ou sur la mini-carte du bas. Elle peut tourner en boucle ou s’arrêter au bout.
- Une manivelle qui donne le tempo : la vitesse de rotation règle à la fois le rythme et la clarté du pincement. Le bouton Motor prend le relais à vitesse fixe.
- Neuf mélodies du domaine public : Au clair de la lune, Ah ! vous dirai-je, maman, Frère Jacques en canon, l’Ode à la joie de Beethoven, la Berceuse de Brahms, le Canon de Pachelbel en version courte, la première Gymnopédie de Satie adaptée aux 20 notes, et pour le peigne de 30 lames, Greensleeves et une version courte de la Lettre à Élise.
- Clavier MIDI et fichiers .mid : avec un clavier branché, chaque note jouée perce un trou à la ligne de lecture. Un petit fichier MIDI peut aussi être importé : il est quantifié et transposé pour tomber juste sur le peigne.
- Sauvegarde et partage : la bande est gardée dans le navigateur, encodée dans l’adresse de la page (un lien suffit pour la partager) et exportable en fichier JSON.
Sous le capot
Aucun son n’est enregistré et aucun oscillateur ne joue directement. Chaque lame est simulée par synthèse modale : un petit banc de résonateurs amortis accordés sur les modes de vibration d’une poutre fixée à un bout, dont les fréquences suivent les rapports 1, 6,27, 17,55 et 34,39. Chaque lame est très légèrement désaccordée, comme sur un peigne réel, et les graves résonnent plus longtemps que les aigus. Le pincement est une impulsion de bruit de quelques millisecondes, filtrée plus ou moins selon la vitesse de la manivelle.
Le calcul tourne dans un AudioWorklet, un fil audio dédié du navigateur. Dix lames qui sonnent ensemble coûtent environ 4 % du temps réel, contre plus de 100 % pour la même scène montée avec des filtres Web Audio classiques. Si une lame est pincée alors qu’elle vibre encore, la dent de l’étoile l’étouffe en partie et la fait friser un instant. Le son passe ensuite dans une réverbération par convolution dont la réponse imite une petite caisse en bois, générée par le code.
Contrôles
| Touche / geste | Action |
|---|---|
| Clic ou toucher sur la bande | Percer un trou, ou le reboucher |
| Glisser sur la bande | Percer une ligne de trous |
| Tourner la manivelle | Faire avancer la bande (à l’envers : reculer sans son) |
| Molette, deux doigts, mini-carte | Faire défiler la bande |
| Espace | Moteur marche / arrêt |
| Flèches gauche / droite | Défiler d’un pas (Maj : une mesure) |
| Flèches haut / bas | Tempo |
| Début | Revenir au début de la bande |
| Z | Annuler |
| S | Réglages |
| H | Masquer l’interface |
| F | Plein écran |
Stack technique
- Vanilla JS en modules ES6, aucune dépendance, aucun build
- Web Audio : AudioWorklet de résonateurs modaux, réverbération par convolution générée, compresseur et limiteur
- Canvas 2D : papier texturé, trous aux bords déchirés, lames en métal brossé qui fléchissent et vibrent
- Pointer Events, Web MIDI et lecture de fichiers MIDI standard
Cas d’usage
De quoi préparer une mélodie avant de la percer sur une vraie bande de carton, puisque la grille reprend la disposition des mouvements 20 et 30 notes. On peut aussi s’en servir pour montrer à des enfants comment une partition devient du son, ou simplement envoyer une petite musique à quelqu’un sous la forme d’un lien.
Un trou dans le papier, un tour de manivelle, une note.
