Introduction

A JavaScript web-app for a WebAudio based synthesizer.

Written in React + Redux starting with the create-react-app project.

Uses SCSS for styling as an additional to the React stuff: Adding Sass or Scss to Create-React-App

Also uses Eslint along with the Airbnb Style Guide

Deployed on Glitch - https://microsynth.glitch.me/

Remixing & Running on Glitch

See the create-react-app-demo project for more information. Also see this support post

To create and serve a production version of your app:

Run npm run build using the Logs > Console
Set NODE_ENV=production in the .env file

Then Glitch will serve the production build version of your app!

If you need to develop again, just unset the NODE_ENV variable and wait a bit for the modules to be installed.

To Run locally

Use npm install or yarn to setup the packages.

First build the CSS with npm run build-css or yarn build-css.

Then run npm start or yarn start will start the create-react-app gubbins and launch the page in you r browser.

To watch and recompile CSS changes, also run npm run watch-css or yarn watch-css

Tests

One component has unit tests...

• Chromium 65.0.3325.181 (Linux) behaving
• Firefox 59.0.2 (Linux) behaving - no Midi
• MotoG3 Chrome Browser - plays notes, slightly laggy with lots of input.

Todo

Things that I'd like to do.

• Have some testing of components, particularly the RotaryKnob. Need to work on Actions / Reducers along with other components.

• Functionality

  • Only the keyboard works on touch-screen, the other controls are quite small.
  • Better rotary controls - these don't feel right in browser. They might be okay on a touch screen, but don't respond to touch. (Working in android, but scroll issues / need to handle 'zoom')
  • Ability to save and load a 'patch' - use local-storage or similar.

• Code

  • Change to use Immutable props in the components rather than converting these to POJO's

• Consider drying up repetition of components where we could just build them from a config in an automatic way. Dry isn't necessarily the right word because some 'consistent repetition' is okay - following patterns, etc.

• Styling:

  • Consider a more tight framework approach. The alignment of components and their style works okay and it's moving towards an ITCSS approach.
  • Midi device selector (it's a select and needs to be progressively enhanced)
  • Nicer buttons - indicators for wave shape, etc. (Icons & leds like https://darker-things.glitch.me/ ?)
  • More responsive - keyboard doesn't collapse because we scroll it.

• MIDI

  • (Partially done) MIDI controller inputs - make these 'configurable', but default to standards.
  • Move the midi device lookup into the actions (as a thunk)
  • (Partially done) Move the other midi actions out of the midi-input (need to keep the event listeners somewhere though!)
  • needs to handle disconnect and reconnect possibly.
  • Normalise value ranges - probably between 0 & 128 so these map nicely to Midi.

• Audio

  • Some audio FX on the synth...

  • Fatten up the oscillator sounds.

  • Add an LFO

  • Polyphony (with Envelopes for each!)?

  • Drop in synth configurations, e.g. a JSON graph describing the modules and settings (modular heaven or hell?)

  • Code

  • Eslint is fixed at 5.6.0 although there is a newer release - CRA doesn't like the newer one.