SuperSonic

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
Whizz to Demo
Open Source What? How? Why?

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

Brought to you by
Sam Aaron

Please consider joining the wonderful community
of supporters enabling Sam's work on
creative coding projects like this,
Sonic Pi and Tau5.

Support Sam via Patreon

Support Sam via Patreon

Support via GitHub Sponsors

Support Sam via GitHub Sponsors

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

Welcome to SuperSonic

  1. Available Synths — Many synths are pre-loaded and ready to use: sonic-pi-beep, sonic-pi-dsaw, sonic-pi-prophet, sonic-pi-tb303, sonic-pi-fm...
  2. Play a Synth — Create a synth using /s_new: /s_new sonic-pi-beep -1 0 0 note 72 The -1 auto-assigns a node ID, note sets the MIDI pitch
  3. Load Loop Samples — Click "Load Samples" to load these pre-configured loops into buffers 1-6: Buffer 1: loop_amen.flac Buffer 2: loop_breakbeat.flac Buffer 3: loop_compus.flac Buffer 4: loop_garzul.flac Buffer 5: loop_industrial.flac Buffer 6: loop_tabla.flac After loading, use these buffer IDs (1-6) to play the loops
  4. Load Additional Samples — Click "Load Samples" for API samples, or load custom ones: /b_allocRead 10 ambi_choir.flac /b_allocRead 11 bd_haus.flac /b_allocRead 12 elec_ping.flac The first number is the buffer ID (use 10+ to avoid 1-6 which are reserved for pre-loaded loops)
  5. Trigger Samples — Play samples using the stereo or mono player: /s_new sonic-pi-basic_stereo_player -1 0 0 buf 1 /s_new sonic-pi-basic_stereo_player -1 0 0 buf 3 rate 1.2 buf uses the buffer ID (1-6 for pre-loaded loops), rate changes playback speed
  6. Schedule Sequences — Add times at the start to create rhythms: 0.0 /s_new sonic-pi-beep -1 0 0 note 60 0.5 /s_new sonic-pi-beep -1 0 0 note 64 1.0 /s_new sonic-pi-beep -1 0 0 note 67
  7. Explore! — Check out the scsynth OSC docs or switch to the Playground tab to jam with the interactive synth pad!

Quick Start: Click "Load Example" to load up some example API calls then hit "Send".

Choose your own OSC...

Scsynth Info


                      

OSC to Scsynth

No messages sent yet

OSC from Scsynth

No messages received yet

Messages
sent0 / 0 B
direct0
received0 / 0 B
debug0 / 0 B
dropped0
PreScheduler
pending0 / 0
sent0
scheduled0
cancelled0
PreScheduler Retries
ok / fail0 / 0
queue0 / 0
retried0
dispatches0
Scheduler
queue0 / 0
dropped0
clock drift0ms
Processing
processed0
dropped0
seq gaps0
ticks0
Ring Buffers
in
0%
out
0%
dbg
0%
Engine State
audio-
synthdefs0
Buffer Pool
used0 B
free0 B
allocs0
Audio Suspended
The browser has paused audio playback. Click below to restart.