Check out this Abletech Tech Talk on how to control MIDI hardware from your browser. Kalo’s built a web-based, matrix-style MIDI sequencer. Watch the video for the details, and the sounds 🎶
WebStep
The purpose of Kalo’s app is to control external hardware synthesizers or samplers. WebStep should work fine with any MIDI enabled synthesizer or sampler that’s visible to your operating system.
How does it work?
MIDI is a messaging protocol so you hook-up devices, to each other, and send MIDI Messages over that link.
MIDI allows for an instrument/device to use up to 16 channels; messages are sent to a device and target a specific channel.
Messages are able to communicate all sorts of things, for example:
-
NoteOn / NoteOff
-
Synthesizer parameter changes
-
Timing information (MIDI Clock)
Messages are hexadecimal and made up of three bytes.
Tech stuff
-
WebMIDI API
-
React / Redux
-
JS / ES6 + Babel + Webpack
-
Node
-
Gulp
-
UI Library: material-ui
Conclusions
-
React is great!
-
Redux is great!
-
The WebMIDI API is great!
-
Timing is hard
-
Webpack config isn’t much fun
-
I need to learn about styling and layouts
Future plans
Version 2
-
UI re-design to accommodate new features
-
Additional grid tools
-
Optimisations — overhaul data structure and data/component bindings
-
Per-grid swing settings and step resolution (polyrhythms!)
Version 3 and beyond…
-
Firebase Auth and Persistence (save sessions, grid presets etc)
-
WebAudio API >>Synthesizer Engine
-
Longer, more varied sequences
Head over to Kalo’s WebStep github page for more detail on his web-based, matrix-style MIDI sequencer.
Catch another Abletech Tech Talk on Rails Girls, Turbolinks or Learning Elixir.
