WebMIDI In/Out extension

[lselden]

This is an extension that adds MIDI support using the WebMIDI API. It tries to cover most use cases - it supports notes, CC, Pitch Bend, Program Change messages, etc.

Features

• Device detection/enumeration
• MIDI Input (When Note On/Off, When any midi event)
• MIDI Output (similar syntax to the "Music" extension) - uses music "tempo" if set
• Event reporter for thread context's current event
• human-readable (and forgiving) string formatting of events for parsing/formatting

Todo

• [ ] Translations
• [ ] Add blocks documentation
• [ ] Add string format documentation
• [ ] Add "Getting Started" / browser compatibility documentation
• [ ] Test on target devices (in particular mac / android)
• [ ] Feedback on blocks - are any missing? should some be pruned? Better naming convention?
• [ ] Image
• [ ] (OPTIONAL) Separate icons for input vs output?

[Brackets-Coder]

At a glance, this looks much better than mine. You'll definitely need to add it to the list in extensions.json and probably make a gallery thumbnail too for it to be accepted though. You probably spent a lot more than four hours on it like I did. I might give it a full review (just for my opinion) when I have more time but I'm a bit busy right now. If you'd like, I can submit a PR or so to your fork that adds translations so you have one less thing to worry about (but again, I'm a bit busy right now, I'll have to get around to it when I can).

[Brackets-Coder]

Just a quick review, nothing in depth. Going over best practices for TW extensions in particular, not necessarily anything related to the functionality of the code.

[AliceC-W]

Hello,

This doesn't seem to read my MIDI devices after my app has packaged (at least in Chrome on my Android when packaged from Penguinmod)

(To play a note on this, swipe from one clock position toward another (I will be adding more features to the face of this "clock, such as aftertouch, sustain, page turning, and menu))

Thanks for any help you can provide

Flick Talk.zip

[lselden]

Hello,

This doesn't seem to read my MIDI devices after my app has packaged (at least in Chrome on my Android when packaged from Penguinmod)

(To play a note on this, swipe from one clock position toward another (I will be adding more features to the face of this "clock, such as aftertouch, sustain, page turning, and menu))

Thanks for any help you can provide

Flick Talk.zip

@AliceC-W I couldn't get your app to do anything, so can't comment on it besides it looked like it's trying to play a 0 duration note, which might be an issue. That being said, browsers are particular about allowing MIDI access depending on the context - are you trying to open it as a local file? If so then try running it from a https link instead, which has fewer restrictions. You may also want to test if midi playback is supported by using the number of [output] devices block - it'll be 0 if no detected midi devices are available.

If you want further help then please make an example that just has the minimum necessary to reproduce (for example click/touch on the screen to play a single note)

[AliceC-W]

Hello, This doesn't seem to read my MIDI devices after my app has packaged (at least in Chrome on my Android when packaged from Penguinmod) (To play a note on this, swipe from one clock position toward another (I will be adding more features to the face of this "clock, such as aftertouch, sustain, page turning, and menu)) Thanks for any help you can provide Flick Talk.zip

@AliceC-W I couldn't get your app to do anything, so can't comment on it besides it looked like it's trying to play a 0 duration note, which might be an issue. That being said, browsers are particular about allowing MIDI access depending on the context - are you trying to open it as a local file? If so then try running it from a https link instead, which has fewer restrictions. You may also want to test if midi playback is supported by using the number of [output] devices block - it'll be 0 if no detected midi devices are available.

If you want further help then please make an example that just has the minimum necessary to reproduce (for example click/touch on the screen to play a single note)

Yes I am trying to run it right on my phone in Android Chrome (my address bar says content://media/external/file/1002145829 (in case that helps))

How do I run it from a https link? Will this require additional hardware (counting codebeautify.org)? Does Penguinmod offer a way to force that change in the address bar?

Here is a simple project detailing my only problem at the moment

Number of MIDI Devices Project.zip

[lselden]

Yes I am trying to run it right on my phone in Android Chrome (my address bar says content://media/external/file/1002145829 (in case that helps))

How do I run it from a https link? Will this require additional hardware (counting codebeautify.org)? Does Penguinmod offer a way to force that change in the address bar?

Here is a simple project detailing my only problem at the moment

Number of MIDI Devices Project.zip

Thanks for providing the project. I'm able to see my output devices on my laptop, and 0 devices on my iPhone (which is expected - Apple doesn't support WebMidi).

I'd recommend using Github Pages to host your content (which is free) if you don't mind it being publically accessible - I'm sure there's plenty of tutorials out there if you aren't that familiar with github. You could also try testing if you have a computer on the same network using any static web server software, for example fenix, python -m http.server or npx http-server (if you have python3 / node.js installed - google it). However, you may need to be using a https:// link (secure context) to get WebMidi to work - check to see if WebMidi works on the HTTP version of permission.site vs the HTTPS version of permission.site.

[AliceC-W]

Thanks

I just found out that Opera GX recognizes my MIDI devices even in airplane mode

I think it will do, at least until that environment can be simulated in the .html (directory) itself

I'm sorry to hear that about iPhone, definitely let me know if that changes

The equipment I used was:

1. NUOSIYA Type-C to MIDI Cable 6.5Ft,Type-C MIDI Interface Adapter,MIDI to Type-C Cable Converter ​for Music Keyboard Piano to PC Mac Laptop Windows Android (purchased on Amazon.com on Jul 4, 2024)

2. Android 13 on Samsung Galaxy A52 5G (Purchase recieved Mon, Sep 20, 2021)

3. Yamaha PSR-275 (gifted on December 25, 2003 before I even knew that MIDI is actually just an interface)

[Brackets-Coder]

@lselden I've used both macOS and Windows throughout various periods. About the iPhone -- It's not that Apple straight up just doesn't support WebMIDI, it's that all Safari Browsers across Apple devices don't support the API due to security concerns, which Apple seems to care a lot about. I've gotten WebMIDI to work as expected with Google Chrome on macOS

[Brackets-Coder]

@lselden Is this still being worked on?

[Brackets-Coder]

Hello @lselden, I've tested the input portion of this extension on my Mac with Firefox, and it's working. I haven't tested MIDI output.

https://github.com/user-attachments/assets/52ad84a0-0bc7-4af8-9691-8decec5d6936

[lselden]

@Brackets-Coder No I'm not actively working on this. I had left this off with partial support for midi file in/out, but never finished. I just updated the library to remove the midi file code. If any one is interested in collaborating (@CHCAT1320 ?) I can submit what I have for midi-file handling as a separate PR