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 and use it with 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 JS module into your index.html
. Here's an example below in JavaScript:
<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>
Once theChuck
is initalized, you now have a web ChucK instance. Read the API reference to see how to communicate between JS and ChucK e.g. removing shreds, syncing variables, monitoring the VM etc.
WebChucK full documentation and API reference: here
If you are a developer, check out the Developer Guide to get started.