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

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

This can be changed back, using the const is fine, and is more readable

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

Following what the music extension does isnt required but you can if you want

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

The extension class doesnt have to be anything special, I for one just use extension as my class name in all my extensions, it doesnt change anything

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

…Warp#2038) Bumps [@turbowarp/types](https://github.com/TurboWarp/types-tw) from `4b59b95` to `b89be2e`. <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/TurboWarp/types-tw/commit/b89be2e3ce64fa84774540dff026a42dd915ee3c"><code>b89be2e</code></a> TW: add pause events</li> <li>See full diff in <a href="https://github.com/TurboWarp/types-tw/compare/4b59b95e3b02560ff626a36a871869b89dbe9a48...b89be2e3ce64fa84774540dff026a42dd915ee3c">compare view</a></li> </ul> </details> <br /> Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [image-size](https://github.com/image-size/image-size) from 2.0.0 to 2.0.1. <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/image-size/image-size/commit/a5750c51dc1d81756521521f5821da732038d8c4"><code>a5750c5</code></a> 2.0.1</li> <li><a href="https://github.com/image-size/image-size/commit/6c3cb7188aa244c84581e699d80474ddc581ec2c"><code>6c3cb71</code></a> fix the bin script</li> <li><a href="https://github.com/image-size/image-size/commit/9cfcb4f395928e39dc30f0ba71e698af0cb5b863"><code>9cfcb4f</code></a> Add a sync usage example</li> <li>See full diff in <a href="https://github.com/image-size/image-size/compare/v2.0.0...v2.0.1">compare view</a></li> </ul> </details> <br /> [![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=image-size&package-manager=npm_and_yarn&previous-version=2.0.0&new-version=2.0.1)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

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

…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

… 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,

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

dependabot bot and others added 7 commits March 17, 2025 00:27

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

lselden added 24 commits April 16, 2025 21:06

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

7085252

Update midi.js

9ff419f

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

cc44e9b

add midi to extensions list

e6e553c

bugfix in string parsing and minor formatting

88184f0

midi - change params for sendOutputEvent

6a0db5c

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

389bedd

…onds

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

a21e702

reformatting as per comments

cbe780d

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

		// 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!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

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!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yuri-kiss Mar 14, 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!

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

Uh oh!

Uh oh!

Brackets-Coder commented Mar 11, 2025 •

edited

Loading

Brackets-Coder Mar 11, 2025 •

edited

Loading

yuri-kiss Mar 14, 2025 •

edited

Loading

AliceC-W commented Jul 5, 2025 •

edited

Loading