# WebMidi in elm 0.19
**URL:** https://discourse.elm-lang.org/t/webmidi-in-elm-0-19/4816
**Category:** Request Feedback
**Created:** [December 9, 2019, 7:21pm UTC](https://discourse.elm-lang.org/t/webmidi-in-elm-0-19/4816 "2019-12-09T19:21:54Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@diegodorado](https://discourse.elm-lang.org/u/diegodorado)
#### Post date: [December 9, 2019, 7:21pm UTC](https://discourse.elm-lang.org/t/webmidi-in-elm-0-19/4816/1 "2019-12-09T19:21:54Z")
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.
---
### Author:  [@hkgumbs](https://discourse.elm-lang.org/u/hkgumbs)
#### Post date: [December 10, 2019, 1:30am UTC](https://discourse.elm-lang.org/t/webmidi-in-elm-0-19/4816/2 "2019-12-10T01:30:27Z")
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](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](https://guide.elm-lang.org/interop/ports.html) to send in those pieces from JavaScript
---
### Author:  [@diegodorado](https://discourse.elm-lang.org/u/diegodorado)
#### Post date: [December 11, 2019, 1:42pm UTC](https://discourse.elm-lang.org/t/webmidi-in-elm-0-19/4816/3 "2019-12-11T13:42:34Z")
Thanks! I am just beginning to understand how ports works, and indeed it seems the way to go.
---
### Author:  [@mzero](https://discourse.elm-lang.org/u/mzero)
#### Post date: [December 16, 2019, 6:50pm UTC](https://discourse.elm-lang.org/t/webmidi-in-elm-0-19/4816/4 "2019-12-16T18:50:33Z")
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.
---
### Author:  [@Atlewee](https://discourse.elm-lang.org/u/Atlewee)
#### Post date: [December 16, 2019, 10:40pm UTC](https://discourse.elm-lang.org/t/webmidi-in-elm-0-19/4816/5 "2019-12-16T22:40:11Z")
> [@mzero](#):
>
> b) it’s API is only useful for simple parsing.
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 😕
---
### Author:  [@jxxcarlson](https://discourse.elm-lang.org/u/jxxcarlson)
#### Post date: [December 17, 2019, 9:40am UTC](https://discourse.elm-lang.org/t/webmidi-in-elm-0-19/4816/6 "2019-12-17T09:40:53Z")
What are the issues in pushing bytes through ports? Sounds like being able to do this would open up new things for Elm.
---
### Author:  [@system](https://discourse.elm-lang.org/u/system)
#### Post date: [December 27, 2019, 9:44am UTC](https://discourse.elm-lang.org/t/webmidi-in-elm-0-19/4816/7 "2019-12-27T09:44:59Z")
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.