Synthétiseur — Remix 3

Un synthétiseur jouable dans le navigateur, construit avec Remix 3 (3.0.0-beta). Il illustre l'approche server-first de Remix : le rendu se fait sur le serveur, et seule la partie interactive (le son) est envoyée au navigateur.

Démarrage

npm install
npm run start

Ouvrir http://localhost:44100/ (le port se change via la variable PORT).

Scripts

Commande	Rôle
npm run start	Lance le serveur.
npm run dev	Lance le serveur en mode watch (redémarre à chaque changement).
npm test	Exécute les tests (tsx --test).
npm run typecheck	Vérifie les types sans compiler.

Structure

server.ts              Point d'entrée : démarre le serveur Node (remix/node-serve).
app/
  routes.ts            Contrat de routes typées (/, /auth, /synth/controls, /assets/*).
  router.ts            Branche chaque route sur son controller + middlewares.
  assets.ts            Asset server : compile les .tsx en JS navigateur à la demande.
  controllers/         Handlers de routes (home, auth, synth-controls).
  ui/                  Composants : Document, layout, et l'UI du synthé (clavier, contrôles).
  data/presets.ts      Presets du synthé (onde, volume, filtre).
  assets/              Moteur audio et notes, chargés côté navigateur.
  utils/render.tsx     Rendu centralisé des réponses HTML.
test/                  Tests unitaires.

Comment ça marche (en bref)

• La page d'accueil / rend le synthétiseur côté serveur → le clavier s'affiche même sans JavaScript.
• Le son est apporté par le moteur audio (app/assets/) hydraté côté navigateur : c'est la partie interactive, marquée clientEntry.

Prérequis

Node.js ≥ 24.3.0.