Enabling Interactive Music Performance in Web Browsers

Charles Klippel Neimog

Rodolfo Coelho de Souza

Motivation

Complex setups: interfaces, mics, powerful computers
OS incompatibilities
Composer/tech must be present to fix issues

Example: Eco (2022)

Reality: slow Wi‑Fi, slow machines == unstable rehearsal, bad concert

Goal: ease and reliable performance

How to solve these problems?

Attempt to concentrate on the app on the smartphone.
WebAssembly experiments (C in the browser)
Piece: Moteto → worked (4 performances; 3 without me)
Catch: reimplement DSP (FFT/partials) by hand in C

From Empd to Pd4web

Empd: Pd→WASM, no GUI, manual compile, no externals
Pd4web: makes it usable for musicians (not only programmers)
Pd4web makes empd usable for musicians and AS musicians
One‑click deploy of Pd patches in browsers

What does Pd4web do?

Automated compilation
Detects/installs externals used in the patch
GUI + ready website templates

In short: deploy Pd patches with externals + GUIs, fast.

Key Advances: 1) Externals

More than 1000+ externals

12 major libraries (e.g., else, cyclone) → 1000+ externals
Complex libs compiled (spatialization, partial-tracking, spectrum analysis.)

Key Advances: 1) Externals

2) Graphics with pdlua

Responsive GUIs
Runs smoothly on low‑cost smartphones

Key Advances: 1) Externals

3) Easy Integration with personal projects

Share pieces for rehearsal without installing Pd
No dedicated/expensive hardware required

Key Advances: 2) Accessibility

Technical: open in a browser; install as PWA (offline, auto‑updates)
Financial: runs on regular smartphones

Key Advances: 3) Preservation

Patch + externals + code in a single repository → easier to rebuild works later

Who Is It For?

Three main groups

1) Performers (not just professionals).
2) Composers who use Pd.
3) Composers + Web Developers

1) Performers

2) Composers who use Pd

Composers that work with Pd: build with pd4web.compiler.

3) Composers/Programmers

Init


var Pd4Web = null;
Pd4WebModule().then((Module) => {
  Pd4Web = new Module.Pd4Web();
  Pd4Web.openPatch("index.pd", {
    canvasId: "Pd4WebCanvas",
    soundToggleId: "Pd4WebAudioSwitch",
    patchZoom: 2,
    projectName: "MyProject",
    channelCountIn: 1,
    channelCountOut: 2,
    sampleRate: 48000,
    renderGui: true,
    requestMidi: false,
    fps: 0, // browser chooses
  });
});

JS ↔ Pd


// Receive
Pd4Web.onBangReceived("r-test", (r) => console.log("Bang from", r));
Pd4Web.onFloatReceived("r-test", (r,f) => console.log("Float:", f));
Pd4Web.onSymbolReceived("r-test", (r,s) => console.log("Symbol:", s));
Pd4Web.onListReceived("r-test", (r,l) => console.log("List:", l));

// Send
Pd4Web.sendBang("s-test");
Pd4Web.sendFloat("s-test", 42);
Pd4Web.sendSymbol("s-test", "test");
Pd4Web.sendList("s-test", [1, "hi", "message"]);