WebChucK
ChucK logo

ChucK => now on the Web

Web-based computer music programming with ChucK for online audiovisual experiences, web apps, musical instruments and more! Take ChucK with you on the go!

Example image

WebChucK?

github | docs | npm

WebChucK brings ChucK, the strongly-timed audio programming language, to the web! ChucK’s C++ source code has been compiled down to WebAssembly (WASM) with Emscripten and runs via the AudioWorkletNode interface of the Web Audio API. With near-native performance, WebChucK runs on modern desktop browsers as well as tablets and mobile devices! Bring together ChucK’s real-time sound synthesis engine and the interconnectivity of the web to create new experiences and develop creative workflows. WebChucK can power online audiovisual experiences, immersive multi-channel audio web apps, or shareable musical instruments simply by embedding WebChucK into any website! Check out the GitHub to learn more or contribute!

WebChucK is used to create an amazing web-based programming sandbox for ChucK: WebChucK IDE!

Featured Projects

SoundscapeAI
SoundscapeAI - Terry Feng

Extracting environmental sonic features for real-time ambient soundscape generation with concatenative synthesis. Utilizing tool from ChAI (Chuck for AI)

Explore
ChucK Timbre Library
Virtual Instrument Timbre Library - Jack Atherton

Connect a MIDI keyboard to play some web-based virtual synths. Jack’s Timbre Library for ChucK provides several examples of web-based virtual synths in action.

Explore
Chauvet Cave Beep Ploc Symphony
Chauvet Cave Beep Ploc Symphony - Luna Valentin

A data sonification project examining the effect of increased extreme weather phenomena on the ecological balance of caves in France, previously inhabited by our Paleolithic ancestors 36,000 years ago.

Explore
Image Sonifier
Image Sonifier - Cole Simmons

An image-to-sound converter that uploads an image from the user, retrieves various parameters like minimum and maximum hue and saturation, and sonifies the calculated data with WebChucK.

Explore
Gutter Synthesis
Gutter Synthesis - Josh Mitchell

A unique virtual instrument inspired by Tom Mudd’s Gutter Synthesis algorithm. A bank of sliders allows you to control the gain (and, therefore, feedback) between a set of chaotic duffing oscillators and modal resonators routed to and from one another.

Explore

Get Started With WebChucK

CDN

Embed WebChucK as a JS module into your index.html

<button id="webchuck">Start WebChucK</button>
<button id="start">Play</button>
    
<script type="text/javascript">
    var theChuck; 
    
    // Import WebChucK and create a ChucK object 
    document.getElementById('webchuck').addEventListener('click', () => {
        import('https://cdn.jsdelivr.net/npm/webchuck/+esm').then(async (module) => {
            const Chuck = module.Chuck; // Chuck class
            theChuck = await Chuck.init([]); // Create default ChucK object
        });
    });
    
    // Button to run ChucK code
    document.getElementById('start').addEventListener('click', () => {
        theChuck.runCode(" SinOsc osc => dac; 440 => osc.freq; 1::second => now; ");
    });
</script>

NPM

Install WebChucK via npm. This can also be used with TypeScript (TS example)

npm install webchuck
import { Chuck } from 'webchuck'

// Create the default ChucK object
const theChuck = await Chuck.init([]);

// Run ChucK code
theChuck.runCode(`
    SinOsc sin => dac;
    440 => sin.freq;
    1::second => now;
`);

Note that many browsers do not let audio run without a user interaction (e.g. button press). You can check for a suspended audio context and resume like this:

if (theChuck.context.state === "suspended") {
    theChuck.context.resume();
}

Documentation

Check out the full WebChucK documentation here