This project was mostly made as a learning tool for ReactJS, NextJS, Chakra UI, Cypress, WebMidi, ToneJS and others.

Using a midi controller is relatively straightforward. First, make sure your browser support the Midi standard (check here). Then plug your midi controller in, (your browser may prompt you to enable Midi access). Then select it in the drop down menu in the 'Set Controller'panel. You may need to reload the page after plugging in your controller.

If you do not have a midi controller, or a compatible browser, you can still use the web synthesizer. Using the keys: a s d f g h j k , you can emulate the keys C4 to B5 on a real piano. Avoid modifying effects while playing or playing multiple keys quickly as this is currently quite buggy!
In order to view each effect more clearly on the graph, use keys: i o p as the frequency matches the framerate of the graph, making it appear as if it is not moving.

Although frontend testing has been done using Cypress, there are some bugs that are present in the current build.

• Using a keyboard, keys can sometimes stay on even after letting go.
• Playing too many keys, too quickly can reduce performance.
• Changing channel creates a new synth, rather than change the current one, leading to overlapping noise.
• Changing from one synth to another (FM->AM or AM->FM) resets all effects.
• Holding down a key on Linux using Firefox causes the Key Down event to keep firing.

The source code for this project is currently hosted here. If you find any bugs or have feature requests, please create a new issue there. Please keep in mind this is a simple side project so there is no guarantee your issue will be seen or acted on. If you would like to build this project yourself, please follow the instructions in the link above.