WebMIDI In/Out extension #2022

lselden · 2025-03-10T14:17:35Z

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?

Added midi extension for input/output of midi using the WebMidi API. Still pending documentation and peer-review

use "t=<time>" instead of "@<time>". Allow using "type=note pitch=60" instead of "note 60" if need to be verbose. Some bugfixes

Brackets-Coder · 2025-03-11T01:11:01Z

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).

extensions/extensions.json

extensions/midi/midi.js

Brackets-Coder · 2025-03-11T15:51:43Z

extensions/midi/midi.js

+   */
+  function noteNameToMidiPitch(note, defaultOctave = 4) {
+    const parts =
+      /(?<pitch>[A-G])(?<flat>[b♭]+)?(?<sharp>[#♯]+)?_?(?<octave>-?\d+)?/i.exec(


This should be more human-readable if possible

It's a regex with named groups to describe what's matched. added method comments to help describe what's valid. If anyone's interested in other implementations I used these for reference: strudel and tonaljs

extensions/midi/midi.js

Brackets-Coder · 2025-03-11T15:52:59Z

extensions/midi/midi.js

+  function stringToMidi(text, opts = {}) {
+    if (typeof text !== "string") text = Cast.toString(text);
+    const fullRe =
+      /^\s*(?<type>[a-zA-Z]{2,})?\s*((?<pitch>[A-G][#b♯♭_]*-?\d?)|(?<data1>\b-?[0-9a-f]{1,5}\b))?\s*(?<data2>\b[0-9a-f]{1,3}\b)?\s*(?<keyvals>.+)\s*$/;


This isn't fun to try to understand... Also you should use Scratch.Cast instead of Cast

Cast here is a local const of Scratch.Cast. Switched to the verbose Scratch.Cast to avoid confusion in the future

extensions/midi/midi.js

Brackets-Coder · 2025-03-11T16:02:48Z

extensions/midi/midi.js

+      // sanity check - don't let a note be more than 1 minute
+      // if anyone ever needs a longer note then they should manually write event string


Why?
I know it's a rare occurrence but as a musician (pianist), developer, and Scratch user you shouldn't generally limit the user's capabilities unless necessary. Notes technically can be a minute long and a user shouldn't have that length unexpectedly cut off...
Keep in mind this is just a quick look-over and I haven't fully analyzed it in depth yet

I hear ya. I checked and the Scratch Music extension clamps to 100 beats max (100 seconds at 60bpm) - updated code accordingly

extensions/midi/midi.js

Brackets-Coder · 2025-03-11T16:06:57Z

extensions/midi/midi.js

+  }
+
+  //#endregion
+  Scratch.extensions.register(new MidiExtension());


This class name is a bit overgeneralized?
Also your code style is not exactly like mine but I guess it's just a matter of preference. seems a bit cluttered to me but I guess it's just a personal problem.

Other than that it looks fine

Brackets-Coder · 2025-03-11T16:10:17Z

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.

…onds

Existing code uses "dur" for "duration", and "pitch" for "noteName"

midi precision doesn't go under 2-5 milliseconds, so forcing numbers to be readable 1ms precision

Added midi extension for input/output of midi using the WebMidi API. Still pending documentation and peer-review

Existing code uses "dur" for "duration", and "pitch" for "noteName"

midi precision doesn't go under 2-5 milliseconds, so forcing numbers to be readable 1ms precision

… ext_midi

…input cases

…ke tempo/keySignature

AliceC-W · 2025-07-05T21:49:01Z

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 · 2025-07-09T02:54:45Z

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 · 2025-07-09T21:15:19Z

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 · 2025-07-11T02:36:15Z

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 · 2025-07-12T03:15:51Z

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:

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)
Android 13 on Samsung Galaxy A52 5G (Purchase recieved Mon, Sep 20, 2021)
Yamaha PSR-275 (gifted on December 25, 2003 before I even knew that MIDI is actually just an interface)

Brackets-Coder · 2025-07-12T12:05:22Z

@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 · 2025-09-16T17:42:20Z

@lselden Is this still being worked on?

Brackets-Coder · 2025-09-16T21:52:30Z

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.

video.mov

extension had a WIP addition of the @tonejs/midi library for midi file support. Removing in favor of it being a separate extension

lselden · 2025-09-17T18:40:19Z

@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

Brackets-Coder · 2026-01-01T17:48:33Z

@lselden If everything checks out, I can get this approved. Hopefully we can get it merged. Is everything ready for the review process?

lselden · 2026-01-02T21:02:47Z

@Brackets-Coder sure go ahead and review.

Brackets-Coder · 2026-01-02T21:47:57Z

@Brackets-Coder sure go ahead and review.

Alright

None of the Todo checkboxes were clicked, were they meant to be completed or are they still being worked on?

Brackets-Coder

@lselden I did a bit of a hasty review of the functionality of some (not all) of your blocks, let me know if I missed anything or am misunderstanding. Thanks!

The icon for the block palette illegible in dark mode, a simple white circle behind it should suffice.
The MIDI input blocks I tested all seem to be working as expected.
The MIDI [connected/disconnected] hat block did not activate a visual response when I powered on and off my Roland FP-90 (bluetooth MIDI). There were no errors in the console when this happened. I will likely have to test with a MIDI cable later and see if that fixes the issue
The "send" midi output block returned the following error:
Uncaught TypeError: can't access property "device", event is null
My keyboard is capable of MIDI output and the "number of [output] devices" reported that the extension was aware of its presence.

The error occurred on line 2292:

    sendOutputEvent({ EVENT, DEVICE }, util) {
      const text = Scratch.Cast.toString(EVENT);
      const event = stringToMidi(text);

      if (DEVICE) {
        event.device = this._getDeviceIndex(DEVICE, "output");
      }

      this.midi.sendOutputEvent(event);
    }

I don't know what was causing this issue, but it's likely the "stringToMidi" function that's not parsing something correctly (I haven't gone through it to check) I used the default input.

I've got another thing I have to run off to and I think I forgot to say something that I tested but let me know if I can do anything more for you

Brackets-Coder · 2026-01-03T19:22:45Z

extensions/midi/midi.js

@@ -0,0 +1,2557 @@
+// Name: MIDI
+// ID: extmidi


Generally IDs are supposed to contain the author's username to differentiate it from generic titles (such as many extensions being called "midi" or "3d". @CubesterYT is this ID unique enough to pass or should it include something more?

Brackets-Coder · 2026-01-03T19:22:52Z

extensions/midi/midi.js

+// ID: extmidi
+// Description: An extension to use the WebMidi API for midi input/output.
+// By: lselden
+// By: CHCAT1320


Are there no scratch accounts that these link to?

lselden added 3 commits March 5, 2025 12:12

Add midi extension

ac6f021

Added midi extension for input/output of midi using the WebMidi API. Still pending documentation and peer-review

updated midi.js - tweak string/parsing/formatting

0be617e

use "t=<time>" instead of "@<time>". Allow using "type=note pitch=60" instead of "note 60" if need to be verbose. Some bugfixes

midi - cleanup comments and types

767e8db

github-actions bot added the pr: new extension Pull requests that add a new extension label Mar 10, 2025

lselden mentioned this pull request Mar 10, 2025

MIDI Extension #1725

Closed

lselden added 3 commits March 10, 2025 10:28

Update midi.js

2981a0f

midi.js - linting and ensure all inputs use Scratch.Cast

3cbb48a

Update midi.js

4848f42

lselden added 2 commits March 11, 2025 11:30

midi - add "whenDeviceEvent" hat for detecting device connect/disconnect

488e76b

add midi to extensions list

065976d

Brackets-Coder reviewed Mar 11, 2025

View reviewed changes

extensions/extensions.json Show resolved Hide resolved

Brackets-Coder reviewed Mar 11, 2025

View reviewed changes

extensions/midi/midi.js Show resolved Hide resolved

Brackets-Coder reviewed Mar 11, 2025

View reviewed changes

lselden added 7 commits March 11, 2025 14:34

bugfix in string parsing and minor formatting

1b8ec5b

midi - change params for sendOutputEvent

9f8dfea

midi - treat "pos" and "beats" as beats unit, "time" and "dur" as sec…

17a9e6b

…onds

allow string event input into "play note for beats" command

ccda886

reformatting as per comments

eb5b977

ensure device index starts at 1

a12a863

Merge remote-tracking branch 'upstream/master' into ext_midi

13ac2b4

lselden mentioned this pull request Mar 17, 2025

add new extension MIDI Parser #2035

Closed

lselden added 7 commits March 17, 2025 23:40

Merge in MIDI Parser extension by CHCAT1320

3cc720d

minor refactor - rearrange code

3fdf79a

change parseMidiDataUrl to use same keys

74001d8

Existing code uses "dur" for "duration", and "pitch" for "noteName"

round midi file times to 1 millisecond

3209710

midi precision doesn't go under 2-5 milliseconds, so forcing numbers to be readable 1ms precision

fix json to event formatting

8b48acc

fix linting

1c4dfb5

Add midi extension

afb763c

Added midi extension for input/output of midi using the WebMidi API. Still pending documentation and peer-review

lselden added 15 commits April 16, 2025 21:06

ensure device index starts at 1

ef717aa

Merge in MIDI Parser extension by CHCAT1320

24d98e0

minor refactor - rearrange code

1bc7e6a

change parseMidiDataUrl to use same keys

b8f694e

Existing code uses "dur" for "duration", and "pitch" for "noteName"

round midi file times to 1 millisecond

958fc9a

midi precision doesn't go under 2-5 milliseconds, so forcing numbers to be readable 1ms precision

fix json to event formatting

9869c24

fix linting

fd1c19d

Merge branch 'ext_midi' of https://github.com/lselden/extensions into…

40810df

… ext_midi

allow formatting pitch as sharp/flat or number

f87bc9b

always include node/noteon type in string output and catch some edge …

c98d827

…input cases

add generic key=value parser/formatter

b029769

revamp midi file parsing to use Scratch.fetch, include meta events li…

29de046

…ke tempo/keySignature

add license credits

c012e35

add midi extension to extensions.json

1a7ffd8

change "noteOn" to "note", add Duration/Instrument event props, bugfixes

774ba76

lselden added 2 commits September 17, 2025 14:28

Merge remote-tracking branch 'upstream/master' into ext_midi

3366b1d

remove incomplete mid file support

4529287

extension had a WIP addition of the @tonejs/midi library for midi file support. Removing in favor of it being a separate extension

Brackets-Coder requested changes Jan 3, 2026

View reviewed changes

		// sanity check - don't let a note be more than 1 minute
		// if anyone ever needs a longer note then they should manually write event string

WebMIDI In/Out extension #2022

Are you sure you want to change the base?

WebMIDI In/Out extension #2022

Uh oh!

Conversation

lselden commented Mar 10, 2025

Features

Todo

Uh oh!

Brackets-Coder commented Mar 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Brackets-Coder Mar 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as abuse.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as abuse.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as abuse.

Uh oh!

Brackets-Coder commented Mar 11, 2025

Uh oh!

AliceC-W commented Jul 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lselden commented Jul 9, 2025

Uh oh!

AliceC-W commented Jul 9, 2025

Uh oh!

lselden commented Jul 11, 2025

Uh oh!

AliceC-W commented Jul 12, 2025

Uh oh!

Brackets-Coder commented Jul 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Brackets-Coder commented Sep 16, 2025

Uh oh!

Brackets-Coder commented Sep 16, 2025

Uh oh!

lselden commented Sep 17, 2025

Uh oh!

Brackets-Coder commented Jan 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lselden commented Jan 2, 2026

Uh oh!

Brackets-Coder commented Jan 2, 2026

Uh oh!

Brackets-Coder left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Brackets-Coder commented Mar 11, 2025 •

edited

Loading

Brackets-Coder Mar 11, 2025 •

edited

Loading

AliceC-W commented Jul 5, 2025 •

edited

Loading

Brackets-Coder commented Jul 12, 2025 •

edited

Loading

Brackets-Coder commented Jan 1, 2026 •

edited

Loading