A web synthesizer built on top of Web Audio API, React and WebMIDI.js
# Install dependencies
npm install
# Start up app in http://localhost:5173
npm run dev
# Run unit tests
npm run test:dev
This synthesizer was intended to be used with a MIDI Controller. Currently all MIDI mappings for controls are hardcoded to fit an Arturia MiniLab MkII (a cool contribution to make would be to have these mappings customisable! 😉).
You can download Noise Maker into your mobile device as an app since it's a PWA! The mobile version of the app shows all controls under the settings section.
You can hit the keys with your mouse (or tap them in mobile), or you can use your keyboard! Lowest key starts at the Q key.
This is a BiquadFilterNode for which type, cutoff and resonance are adjustable. Type can be either high-pass or low-pass.
This is a GainNode, controls general output volume.
This is a StereoPannerNode, controls general output panning.
This is a DynamicsCompressorNode, for which attack, release, knee, ratio and threshold are adjustable.
This is an AnalyserNode, used to render the oscilloscope component.
This synthesizer has 2 LFOs, each consisting of an OscillatorNode connected to a GainNode. Adjustable parameters are:
- waveform and frequency of the OscillatorNode
- gain of the GainNode
- targets: filter cutoff, filter resonance, volume, pan, key detune and LFO1 amplitude and frequency (in the case of LFO2)
This synthesizer comes with a delay effect, built with a DelayNode connected to a GainNode for feedback control. Delay time and feedback gain are both adjustable. Also there's a trails switch that controls whether the delay output remains connected after delay is turned off or not.
Each key in the keyboard consists of an OscillatorNode connected to a GainNode. Each key has a fixed frequency (because of the assigned note), but oscillator's waveform and detune properties are adjustable. The waveform and detune controls affect all keys at once
This project uses React's native hooks for state management by using state reducer pattern. All Web Audio API nodes are instantiated once on app startup and only control values are stored in state. State is lifted up only to the lowest level possible to reach affected components instead of keeping it at root level: this decision is made in order to avoid re-rendering controls that are not related to the control that's being changed.
All contributions, comments and issues are encouraged and more than welcome! Feel free to throw in a pull request or create a new issue!