WebMidi in elm 0.19

Which is the best approach to make a website handle webmidi (in chrome) ?
And I mean all webmidi: onstatechanged, onmidimessage, support for sysex, notes, pitchbend, cc, and which device sent the msg, etc.

Hey Diego,

Are you mostly wondering how to get WebMIDI data into your Elm app? If so, here’s how I did it for a recent project: https://github.com/hkgumbs/rc/blob/457d6791147c9b16f868eb75fa95515cc13787e5/build/visualizer/index.html#L60-L66

That code isn’t very graceful about handling errors, and I didn’t need sysex for my application. But the general approach should work for you:

  1. Decide which parts of the WebMidiEvent you want to send to Elm
  2. Use ports to send in those pieces from JavaScript

Thanks! I am just beginning to understand how ports works, and indeed it seems the way to go.

I have a rather extensive WebMIDI based application in Elm: A full patch, project, and sample manager for Elektron synthesizers. It handles SysEx (including very large SysEx for sample transfer), and has full support for making good user experience in port selection (non-trivial!)

This can all be done with ports in Elm, though getting it effecient enough to push 4MB of SysExs around was tricky! A huge sadness is that Elm 0.19’s Bytes type is useless here as, a) it can’t be pass thru ports, and b) it’s API is only useful for simple parsing.

Let me get some example code together and post it on GitHub in the next day or so.

Have you tried zwilias/elm-bytes-parser ?
With that one you can easily build very complex parsers.
I also want to use bytes with ports, but you can transfer the bytes as list of Ints? But maybe not very performant :confused:

What are the issues in pushing bytes through ports? Sounds like being able to do this would open up new things for Elm.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.