Post image

See it live:

Browse the repo:

All of the audio is processed by Tone.js which is an abstraction on top of the web audio API. It allows to connect together signal sources and processors much like you would in a modular synthesizer. So I built one. A noisy one.

Apart from that the project is using React and Astroturf for CSS-in-JS. It heavily uses CSS variables both for theming and animation. The overall layout is built using CSS Grid. It would profit from subgrids, because most of the encoders are grouped using nested components. Which does not align well with CSS grid, which only does layout for its immediate children. All of the encoders build on react circular input, but wrap it in a component that adds some ARIA to make it a tad more accessible.

What I learned building this is that web audio signal and event processing is pretty smart, because it allows to schedule events for the near future, so that they are executed in sync with the rest of the music. This is why a lot of the state is handed from React to Tone.js at some point. That feels unnatural at first, but it allows to do things like modulation via LFO (Basically turning knobs with a waveform) in a very precise matter.

The synth can be controlled via MIDI in Chrome via an Allen & Heath Xone K2. Because I have one lying around and turning real knobs is fun.

Source link

Write A Comment