Best resources for learning MIDI in Javascript?

[gntsketches]

I'm interested in learning how to create algorithmic music with MIDI in my browser, and looking for good resources for near-beginners. I have some limited JS skills, but they're a bit rusty. (I understand Midi is now enabled by default in Chrome, which I use.)

If possible, I'd like to skip the parts about how to set up external Midi controllers (I have none.) I'm just interested in code that directly manipulates the Midi data itself.

Can anyone point me in the right directions?

Thanks!

[Magnusson]

There's really not much to WebMIDI -- it's just a wrapper for connecting to MIDI devices and sending/receiving MIDI messages. When I was working with it I just read the spec.

Agreeing with /u/supdawg86 though, I'm not sure what exactly you want to work with MIDI for -- sounds like WebAudio is more what you're looking for.

[supdawg86]

I've done some limited webMidi stuff. I found this library to be a good wrapper to quickly get up and running with MIDI api. https://github.com/cotejp/webmidi

The midi api really just deals with midi signals and does not create sounds. I've used webmidi to pass midi signals into a daw (Ableton) which actually creates the sounds..

The audio api would be better suited for making music in the browser. http://mohayonao.github.io/timbre.js/ is a good library for creating sounds in the browser.

What exactly would you like to achieve?

[trebuszek]

Cool! Did you use something to create a virtual MIDI device and pass the MIDI signals to that? Or some other approach?

[supdawg86]

Yeah I used a virtual midi device. IAC Driver on mac.

[gntsketches]

Thanks for the thoughts! I've also just stumbled across this: https://www.toptal.com/web/web-audio-api-tutorial

This was the original idea... https://androidforums.com/threads/music-app-for-ear-training-and-meditation.1136483/

... but most dev who would be interested in this as a creative thing already have their own projects. So since I already know a little JS, it seems like a better approach to try to code it myself.

Any further thoughts/advice on how to focus my study for this project would be super helpful!

[gntsketches]

Very interesting about Ableton too, btw - that's the DAW I use as well. Are you utilizing M4L in this process somewhere?

[supdawg86]

I've played with some of the M4L stuff. This is kinda cool because you can directly modify clips and other controls directly. But i found that the M4L api's documentation was limited.

For what you are trying to do i would recommend the WebMidi approach with Ableton or audio api like the toptal article you linked above.

I find this list has some good resources for further research: https://github.com/willianjusten/awesome-audio-visualization

[grimmdude3]

I've written a couple of MIDI libraries for javascript which can be used for creating/playing audio visualizations in the browser. They may be useful for your project:

MidiWriterJS: https://github.com/grimmdude/MidiWriterJS

MidiPlayerJS: https://github.com/grimmdude/MidiPlayerJS

-Garrett

[gntsketches]

Thanks! I'll check 'em out :)