Home

Awesome

WebChucK

Node.js Build

site | docs | npm

WebChucK brings ChucK, a strongly-timed audio programming language, to the web! ChucK's C++ source code has been compiled with Emscripten and targets WebAssembly (WASM) to run 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 web tools to create new experiences and develop creative workflows. Embed WebChucK into any website to build online audiovisual experiences, immersive multi-channel audio web apps, or shareable musical instruments! To learn more about WebChucK and what it can do, check out https://chuck.stanford.edu/webchuck/

Try out WebChucK in action through WebChucK IDE!

Getting Started

NPM

Install WebChucK via npm. WebChucK also supports TypeScript:

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();
}

CDN

You can also embed WebChucK as a JavaScript module into your index.html.

<html>
  <head>
    <script type="module" defer>
      import { Chuck } from 'https://cdn.jsdelivr.net/npm/webchuck/+esm';

      let theChuck; // global variable

      document.getElementById('action').addEventListener('click', async () => {
        // Initialize default ChucK object
        if (theChuck === undefined) {
          theChuck = await Chuck.init([]);
        }
        // Run ChucK code
        theChuck.runCode(`
          SinOsc sin => dac;
          440 => sin.freq;
          1::second => now;
        `);
      });
    </script>
  </head>
  <body>
    <button id="action">Start and Play</button>
  </body>
</html>

theChuck contains the ChucK Virtual Machine for running code, removing shreds, syncing global variables, and more! Read the documentation for the full API reference.

Documentation

WebChucK full documentation and API reference: here

For Developers

If you are a developer, check out the Developer Guide to get started.