On peut tout faire dans un navigateur web aujourd'hui, même du son !

Il y a quelque mois, je me suis lancé un défi : développer un synthétiseur existant en utilisant l'api WebAudio disponible dans tous les navigateurs modernes.

Dans ce talk, on va parler de musique électronique, et du mythique KORG MS-20, d'oscillateurs, de nœuds, de générateur d'enveloppe, de modulation de fréquence...

Mais aussi de technologies web : d'accessibilité, de composants (p)react, de gestion d'état, de signals et de tests automatisés...

## Pré-requis

- besoin d'une sonorisation en sortie de mon poste, mes slides font du son :) (une enceinte bluetooth peut-faire l'affaire)

## Ressources

- C'est quoi un MS-20 ? : https://en.wikipedia.org/wiki/Korg_MS-20
- Slides disponibles ici : https://benjilegnard.github.io/a-synthesizer-in-your-browser/ ( pageup / pagedown pour naviguer + certains slides sont interactifs )
- Sources des slides, ressources et plan plus détaillé sur github : https://github.com/benjilegnard/a-synthesizer-in-your-browser?tab=readme-ov-file#maman-jai-d%C3%A9velopp%C3%A9-un-synth%C3%A9tiseur-dans-mon-navigateur
Le projet en question, même si encore en cours de développement, est visible ici : https://gotloop.github.io/ms-20/

### Plan

- 1. Pourquoi ?
- a. tester preact
- b. apprendre l'api webaudio
- c. expérimenter une nouvelle stack
- d. c'est quoi un MS-20
- 2. Stack technique
- a. vite et vitest
- b. tests d'accessibilité avec axe-core
- c. tests de performance avec lighthouse
- d. la CI
- 3. Let's dive into code
- a. le clavier
- b. les fréquences
- c. touch event + state
- d. les composants : knob
- e. les composants : select
- f. organiser tout ça en containers
- 4. l'api webaudio
- a. les oscillateurs
- b. le graphe audio
- c. connect it all
- 5. le boss final : patch block
- a. drag and drop
- b. connect more stuff
- c. un moteur de physique ? parce que pourquoi pas
- 6. conclusion / questions

En vérité, je parlerai plus de comment fonctionne un synthétiseur que de tech front pure.