SuperSonic - SuperCollider in the Browser

SuperCollider audio goodness baked into your browser

SuperCollider's powerful audio synthesis engine scsynth running in the browser as an AudioWorklet.

Zero installation.

  • AudioWorklet Runs in a dedicated high priority audio thread
  • WebAssembly Scsynth's C++ code compiled for the web
  • OSC API Talk to the Scsynth server through its native OSC API

Sprinkle the scsynth audio engine onto your web page...

First, install via npm and import locally 
// npm install supersonic-scsynth
import { SuperSonic } from 'supersonic-scsynth';
Initialise and you're ready to go 
const baseURL = '/your/path/';
const sonic = new SuperSonic({
  workerBaseURL:   `${baseURL}/workers/`,
  wasmBaseURL:     `${baseURL}/wasm/`,
  synthdefBaseURL: `${baseURL}/synthdefs/`,
  sampleBaseURL:   `${baseURL}/samples/`
});
await sonic.init();
Load and play a synth 
// Load synthdef, then play synth
await sonic.loadSynthDef('sonic-pi-prophet');
sonic.send('/s_new', 'sonic-pi-prophet', -1, 0, 0,
             'note', 60);
Load and play a sample 
// Load synthdef and sample, then play
sonic.loadSynthDef('sonic-pi-basic_stereo_player');
sonic.loadSample(0, 'bd_haus.flac');
await sonic.sync(); // wait for loads
sonic.send('/s_new', 'sonic-pi-basic_stereo_player',
             -1, 0, 0, 'buf', 0);

Note: Self-hosting required + COOP/COEP headers — see README

This is a simple playful demo of SuperSonic's audio engine - have fun making noise!

Loading...
Click/Tap & Drag
X: 0.00
Reverb: 0.30
Y: 0.00
Cutoff: 130
Messages
sent0 / 0 B
received0 / 0 B
direct0
dropped0
PreScheduler
pending0 / 0
sent0
scheduled0
cancelled0
Scheduler
queue0 / 0
dropped0
clock drift0ms
Processing
processed0
dropped0
seq gaps0
ticks0
Retries
ok / fail0 / 0
queue0 / 0
retried0
dispatches0
Ring Buffers
in
0%
out
0%
dbg
0%
Engine
audio-
synthdefs0
debug0 / 0 B
Buffers
used0 B
free0 B
allocs0