HARDTEK / LAB / Expérience musicale · Web AudioV1 locale
01 / CommencerChoisir une sensation avant un réglage
LE PROJET EN 30 SECONDESAlex ATC / Product Engineer
01L’intention
Construire un premier drop en écoutant plutôt qu’en lisant une théorie.
02Ma contribution
Cadrer une progression sound-first en six missions : sentir, sculpter, ajouter, programmer, tendre, lâcher.
03Ce qui existe
Un débutant peut passer d’un tempo choisi à un drop structuré sans connaître le vocabulaire de production.
01 / Fonctionnalités
J’ai conçu un instrument guidé qui transforme six missions courtes en un morceau hardtek de trente secondes.
HARDTEK / LAB fait choisir une sensation de tempo, sculpter un kick, ajouter un rumble, programmer un groove, construire une tension puis déclencher un drop. Le produit garde le débutant dans l’écoute : chaque étape ajoute une décision sonore avant d’ouvrir les réglages avancés.
StackReact · TypeScript · Web Audio API · Vite · Vitest
06missions guidées
16 passéquenceur de groove
30 sarrangement et export WAV
01 / Fonctionnalités
Ce que l’expérience rend visible.
Les fonctionnalités sont décrites à partir des projets locaux. Les preuves indiquent ce que l’utilisateur peut réellement observer, sans transformer un prototype en produit déjà déployé.
01 / Commencer
Choisir une sensation avant un réglage
Quatre cartes de tempo — 145, 155, 165 et 175 BPM — déclenchent un kick à l’écoute. Le premier choix passe par le corps et le mouvement avant de devenir une valeur technique.
145 · 155 · 165 · 175 BPM · pré-écoute
02 / Sculpter
Rendre chaque source sonore manipulable
Kick, rumble, hats, clap, percussion et FX sont synthétisés localement. Les knobs relient hardness, punch, body, distortion, tail et les réglages de rumble à un retour sonore immédiat.
6 pistes · kick · rumble · synthèse locale
03 / Construire
Passer d’un loop à une tension puis un drop
Le séquenceur 16 pas propose presets, mute, solo, accents, vélocité et probabilité. La timeline relie intro, groove, build, tension et drop dans un arrangement de trente secondes.
Presets · mute/solo · accents · timeline
04 / Comparer
Ouvrir les contrôles quand l’oreille est prête
FREE MODE ajoute swing, humanisation, densité, drive, espace et delay. Les snapshots A/B permettent de comparer une sensation et de revenir à une version avant mutation.
FREE MODE · swing · A/B · mutation
05 / Exporter
Garder le projet et son rendu localement
Le projet se sauvegarde dans le navigateur, avec undo/redo, import/export JSON et rendu WAV via OfflineAudioContext. Aucun sample ni appel réseau audio n’est nécessaire.
localStorage · JSON · WAV offline · sans samples
02 / Ma contribution
Concevoir la boucle, puis la rendre lisible.
Ce que j’ai pris en charge
01
Cadrer une progression sound-first en six missions : sentir, sculpter, ajouter, programmer, tendre, lâcher.
02
Modéliser le projet musical, les pistes, les pas, les sections, les métriques et les snapshots A/B.
03
Construire un moteur Web Audio séparé de React avec scheduling look-ahead et visualisation AnalyserNode.
04
Rendre les contrôles avancés accessibles sans imposer un mini-DAW complet dès le premier clic.
03 / Périmètre
Ce qui est établi, ce qui reste à relier.
La version auditée est une V1 locale, sans URL publique ni synchronisation cloud. L’audio dépend des API Web Audio et les sons sont synthétiques ; aucune métrique d’usage ou de qualité musicale n’est revendiquée.
UN POSTE / UNE MISSION / UN ÉCHANGE
Paris / À distance
Faisons avancer votre prochain produit.
Dites-moi ce que vos utilisateurs doivent faire, ce qui les bloque et ce que vous voulez construire. Nous pouvons partir de là.