Une vraie boîte à rythmes/sampler dans le navigateur : 16 pads, séquenceur multi-patterns, rack FX complet et export WAV — jouable à la souris, au clavier, à la webcam ou en MIDI.
Vue d’ensemble
Quick Swing MPC est un groovebox web complet : 16 pads répartis sur 4 banques de samples, jouables à la souris, au clavier physique (AZERTY/QWERTY commutable), à la webcam (MediaPipe Hands, « pinch to hit ») ou en MIDI avec Note Off, vélocité et MIDI-learn. Un séquenceur pas-à-pas multi-patterns (A/B/C/D) gère des longueurs différentes par pattern et même par pad pour de la polyrythmie, avec song mode, swing et enregistrement live quantisé.
Le son passe par un rack d’effets complet sur le bus master — compressor, EQ 3 bandes, distortion, bitcrusher, delay synchronisé au tempo avec ducker sidechain — plus une reverb et un filtre en send séparés, et peut être exporté en WAV via un rendu offline identique au son live. Projets, échantillons enregistrés au micro et sessions sont sauvegardés localement (localStorage + IndexedDB), sans aucun backend.
Fonctionnalités
- 16 pads sur 4 banques dynamiques — le contenu de chaque banque est scanné côté serveur depuis les fichiers présents, aucun mapping en dur dans le code.
- Quatre façons de jouer — souris, clavier (AZERTY/QWERTY), webcam (pinch-to-hit MediaPipe Hands) et MIDI (Note On/Off, vélocité, Note Repeat, MIDI-learn sur les macros).
- Séquenceur multi-patterns A/B/C/D — longueurs 8/12/16/32 par pattern et par pad, song mode, swing, LIVE REC quantisé.
- Export WAV du pattern — rendu offline qui rejoue exactement la même topologie audio que le live.
- Rack FX complet — compressor, EQ 3 bandes, distortion, bitcrusher (AudioWorklet), delay synchronisé au BPM avec ducker sidechain, plus reverb et filtre CUTOFF en send.
- Édition de samples et SAMPLING — waveform, trim, reverse, normalize, prise micro ou fichier avec pré-écoute avant assignation.
- Projets et enregistrements persistés — sauvegarde/export/import JSON, et panneau RECORDINGS à 4 emplacements FIFO (IndexedDB).
Sous le capot
Le bus audio est construit une seule fois par une fonction partagée : filtre passe-bas CUTOFF → rack FX → gain MAIN VOLUME, avec la reverb en envoi parallèle. Cette même fonction, dans sa variante offline, sert à l’export WAV sur un OfflineAudioContext — ce qui garantit que le rendu exporté est identique au son entendu en live, toute modification du graphe devant obligatoirement passer par ces fonctions partagées. Le bitcrusher tourne dans un AudioWorkletProcessor dédié, avec deux paramètres au taux k-rate (nombre de bits et sous-échantillonnage).
Le séquenceur tourne sur un scheduler à anticipation (interrogation toutes les 25 ms, horizon de planification de 100 ms), avec un ducker sidechain qui creuse le bus master à chaque coup du pad source choisi. L’attribution des fichiers aux pads repose sur une convention de nommage : un préfixe numérique dans le nom du fichier désigne directement le pad cible, ce qui permet de changer le contenu d’une banque sans toucher au code — un sample nommé avec « loop » déclenche même un bouclage automatique dès son déclenchement.
Contrôles
| Touche / geste | Action |
|---|---|
| Grille de pads (AZERTY par défaut) | Q W E R / A S D F / Z X C V / B N M , |
| M | Stop — coupe tous les sons en cours |
| , | Active / désactive la webcam (pinch-to-hit) |
Stack technique
- Web Audio API — AudioContext, AudioWorklet (bitcrusher), OfflineAudioContext (export WAV)
- Web MIDI API — Note On/Off, vélocité, MIDI-learn
- MediaPipe Hands — déclenchement des pads par pincement devant la webcam
- IndexedDB — recordings et samples de projet persistés
- localStorage — projets, mapping clavier, macros MIDI
- PHP (endpoint minimal) — scan dynamique des banques de samples côté serveur
- Vanilla HTML/CSS/JS — zéro build, zéro dépendance npm
Cas d’usage
Composer un beat directement dans le navigateur, jouer en live avec un contrôleur MIDI, ou simplement démontrer une architecture Web Audio poussée dans un portfolio — sans rien installer ni se connecter à un serveur.
Seize pads, quatre façons de les frapper — souris, clavier, doigts en l’air ou clavier MIDI.
