SuperSonic - SuperCollider's Synthesis Engine 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

Download Latest
ReleaseLatest Release Whizz to Demo

Drop pro-grade audio synthesis into your web page…

Import SuperSonic

import { SuperSonic } from '/supersonic/supersonic.js';

Initialise and you're ready to go

const sonic = new SuperSonic({
  baseURL: '/supersonic/'
});
await sonic.init();

Load and play a synth

await sonic.loadSynthDef('sonic-pi-prophet');
sonic.send('/s_new', 'sonic-pi-prophet',
             -1, 0, 0, 'note', 60);

Load and play a sample

sonic.loadSynthDef('sonic-pi-basic_stereo_player');
sonic.loadSample(0, 'bd_haus.flac');
await sonic.sync();
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!

Click/Tap & Drag

X: 0.00

Reverb: 0.30

Y: 0.00

Cutoff: 130

Synth

Loop Sample

Random Arp

BPM 120

Root Note 60

Octaves 2

Attack 0.00

Release 0.10

Welcome to SuperSonic

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...
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
Load Loop Samples — Click "Load Samples" to load 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
Load Additional Samples — Or load custom ones: /b_allocRead 10 ambi_choir.flac /b_allocRead 11 bd_haus.flac /b_allocRead 12 elec_ping.flac Use buffer IDs 10+ to avoid reserved slots 1-6
Trigger Samples — Play samples using the stereo 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 selects the buffer, rate changes playback speed
Schedule Sequences — Add times 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
Explore! — Check out the scsynth OSC docs or switch to the Playground tab!

Quick Start: Click "Load Example" then hit "Send".

Choose your own OSC...

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

out

dbg

Engine

audio-

synthdefs0

debug0 / 0 B

Buffers

used0 B

free0 B

allocs0

Groups: 0 FX: 0 Samples: 0 Synths: 0

Hue

Error

Welcome to SuperSonic

Choose your own OSC...

Audio Suspended

Code Examples

Error

Welcome to SuperSonic

Choose your own OSC...