Skip to content
Updated Synthesizer and drum machine demo project using RxJS 6 and Angular 6, WebAudio, Chrome MIDI
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A simple synth demo, with built-in MIDI controller. This is not perfect, I've used it with a IoT board for midi input; see the `services/pipeline/inputs/midi-input.service.ts for details on hooking up your own midi controller. If you have a touch-screen laptop (Surface Book, etc) you can play the keyboard onscreen with your fingers. It is multi-touch enabled.

This was updated to version 6 of Angular and 6 of RxJS in August 2018.


git clone
npm install


npm run start


  • Use a touch input screen, or use Chrome Developer Tools' device emulation (pick any mobile device, touch inputs will work)
  • Play with the super-lame sequencer - records messages from MIDI and plays back in real time using a captured array.
  • Look at the midi input service, wire up your own USB-class-compliant MIDI controller and tweak. This isn't the most stable thing, as I've seen it crash with my Bare Conductive Touch Board.

Things to check out in the code

  • Services supporting an RxJS message pipeline from input -> outputs
  • Piped subscriptions to transform data from one format to another
  • The WebAudio API - you can gut this and replace with a better audio API (there are a number out there)
  • Synth controls - various controller messages trigger wave changes (if configured), volume changes, and mod wheel settings.


Ken Rimple, Chariot Solutions @RimpleOnTech

You can’t perform that action at this time.