Skip to main content

p5.js in the browser

The zero-install path. The starters run from this site, from a downloaded folder, or pasted into the p5.js web editor. The helper is one script tag.

A browser that speaks MIDI​

BrowserWeb MIDINotes
ChromeYesAsks once per site. The Launchpad sketches also ask for SysEx, a second prompt.
EdgeYesSame as Chrome.
OperaYesSame as Chrome.
BraveYesSame as Chrome. If a device is missing, check the Shields panel for the site.
Firefox 108 and laterYes, with a stepThe first MIDI request offers to install a small site permission for that site. Accept it, then reload.
SafariNoNo Web MIDI on macOS or iOS. Use Processing.

iPhones and iPads have no Web MIDI. Read this site on your phone and run the sketches on your laptop.

Without a device, or without Web MIDI, every sketch still runs on its keyboard stand-in and the status line under the canvas says what it found.

Use the p5.js web editor​

Every starter runs in the p5.js web editor:

  1. In the editor, open index.html from the file list and add one script tag after the p5.js one:

    <script src="https://morethanmusic.dev/mtm-midi-helpers/latest/midi-helpers.js"></script>

  2. Replace sketch.js with the p5.js tab of your device page.

  3. Press play, then click the canvas once. The browser asks for MIDI (and SysEx for the Launchpad). The status line at the bottom of the canvas says what it found.

The preview is an iframe, so the first click has to land on the canvas. If Chrome asks for MIDI permission, answer in the bar at the top of the editor, not in the preview.

Three ways to run a starter​

From the starters' README:

Each index.html loads the helpers from the repo (../../../midi-helpers/p5/midi-helpers.js) and, when that path does not exist, from https://morethanmusic.dev/mtm-midi-helpers/latest/midi-helpers.js. p5 itself comes from cdnjs, so you need to be online.

1. Open it live​

https://morethanmusic.dev/starters/p5/pipsqueak/ (same path for the others). From a checkout, serve the repo over http:

python3 -m http.server 8765

then http://localhost:8765/starters/p5/pipsqueak/. Plug the device in, click once. The status line says what it found. The Launchpad asks for SysEx; allow it.

2. Download the folder and double-click​

Download the starter folder (index.html and sketch.js), double-click index.html. The repo path is not there, so the page loads the hosted helpers. Chrome treats file:// as a secure context, so Web MIDI works. Edit sketch.js in any editor and reload.

3. Paste it into the p5 web editor​

  1. editor.p5js.org, new sketch.
  2. Open the file list (the > at top left). Replace index.html with the starter's, then sketch.js.
  3. Play. Click the canvas once to connect.

The preview is an iframe, so the first click has to land on the canvas. If Chrome asks for MIDI permission, answer in the bar at the top of the editor, not in the preview.

Chrome, Edge and Opera have Web MIDI; Firefox 108 and later asks to install a site permission first. Safari does not have it; the sketches still run there on the keyboard stand-ins and the status line says Web MIDI is unavailable.

Without the helper​

Web MIDI is one call, navigator.requestMIDIAccess(), and then every input's onmidimessage hands you the three bytes. The three bytes, no helpers is that sketch, under fifty lines. George wrote the long version for CSS-Tricks in 2019: Dip Your Toes Into Hardware With WebMIDI.