How to create a javascript sequencer using Web MIDI and a MIDI controller

Опубликовано: 25 Февраль 2026
на канале: Floyd Steinberg
10,629
431

Here's how to create a simple 16 step, 8 track, 8 patterns MIDI sequencer using JavaScript and Web MIDI (and some simple math). Table of contents:

00:00 introduction
00:51 midi basics
01:34 binary numbers
03:30 midi commands: note on
04:47 note off command
05:37 web midi
06:29 web workers
07:23 basic idea how to create the sequencer, and math basics
09:05 how to swing
10:19 document object model
12:13 how to use my sequencer
18:13 conclusion

Links:
My sequencer: https://www.floydsteinberg.com/extens... (right click and show source for more info)
Main script: https://www.floydsteinberg.com/extens...
MIDI specification: http://www.gweep.net/~prefect/eng/ref...
Web MIDI API: https://developer.mozilla.org/en-US/d...



Join us on Woody Piano Shack's Discord server:   / discord  

Get 7% off on DistroKid with this link http://distrokid.com/vip/floyd
PayPal.me https://www.paypal.me/alexselck

Here's what I have in my setup at the moment. Want to have that, too? Please use the followings links and support me:

Yamaha EX5 https://www.ebay.com/sch/i.html?_nkw=...
MPC One https://www.thomann.de/de/akai_mpc_on...
Novation PEAK https://www.thomann.de/de/novation_pe...
Reface DX https://www.thomann.de/de/yamaha_refa...
Kasser Synths Arcade https://www.tindie.com/products/kasse...
Strymon Nightsky https://www.thomann.de/de/strymon_nig...
Strymon Volante https://www.thomann.de/de/strymon_vol...
Strymon Iridium https://www.thomann.de/de/strymon_iri...
Zoom MS 70 CDR https://www.thomann.de/de/zoom_multi_...
Korg NanoKontrol 2: https://www.thomann.de/intl/korg_nano...
Korg NanoKey: https://www.thomann.de/intl/korg_nano...
Akai EWI USB https://www.thomann.de/de/akai_ewi_us...
Zoom R24 https://www.thomann.de/de/zoom_r24.ht...
Zoom H5 https://www.thomann.de/de/zoom_h5.htm...
Yamaha MT7 https://www.thomann.de/de/yamaha_hph_...

Some bands / artists I've been following for a long time are (among others) Massive Attack, Pink Floyd, Pet Shop Boys, Archive, A-Ha, Yes, Porcupine Tree, John Mellencamp, Jean-Michel Jarre, Metallica, Peter Gabriel and Perturbator. So my music will kind of sound like those (without ever reaching the greatness of those artists, of course). :-)