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!
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();
}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.
WebChucK full documentation and API reference: here
If you are a developer, check out the Developer Guide to get started.