Tutorial 1: Getting Started

Home ~ Tutorial 1: Getting Started ~ Tutorial 2: Communicating with Chuck ~ Tutorial 3: Listening to Chuck

Running ChucK on a Web Page

1. Download WebChucK

Download the WebChucK javascript and web assembly dependencies here.

2. Setup Your Site

3. Make a simple webpage (or add to your own)

Make a file called index.html or whatever you'd like as long as it is in your project folder.

<!DOCTYPE html>
<html>
<body>

<h1>Hello WebChucK</h1>

</body>
</html>

Link webchuck_host.js via the script tag.

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript" src="./js/webchuck_host.js"></script>

<h1>Hello WebChucK</h1>

</body>
</html>

5. Start WebChucK

WebAudio AudioContext cannot be started without user interaction on most browsers. So, we will start WebChucK with a button click.

Also, you will need to setup a local server to start WebChucK and test locally.

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript" src="./js/webchuck_host.js"></script>

<h1>Hello WebChucK</h1>

<input id="startChucKButton" type="button" value="Start ChucK" />

<script>
    var startChucKButton = document.getElementById( "startChucKButton" );
    runButton.addEventListener( "click", async function() {
        await startChuck();
        await theChuckReady;
    });
</script>
</body>
</html>

6. Run some ChucK Code (inline):

You can pass ChucK code in a string to WebChucK runCode() function.

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript" src="./js/webchuck_host.js"></script>

<h1>Hello WebChucK</h1>

<input id="startButton" type="button" value="Start ChucK" />

<script>
    var startButton = document.getElementById( "startButton" );
    startButton.addEventListener( "click", async function() {
        await startChuck();
        await theChuckReady;
        await theChuck.runCode("
            SinOsc osc => dac;
            330 => osc.freq;
            1::second => now;
        ");
    });
</script>
</body>
</html>

Your webpage should look and function like this at this point.

7. OR Run some Chuck Code (from a file)

It is likely easier / cleaner to edit your ChucK code in a separate file and IDE (possibly miniAudicle). All you need to do is register the file with the ChucK server with a WebChucK function called preloadFilenames().

In this example, my-file.ck contains the same ChucK code we embedded inline above.

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="./js/webchuck_host.js"></script>

<h1>Hello WebChucK - from file</h1>

<input id="startButton" type="button" value="Start ChucK" />

<script>
    var serverFilesToPreload = [
        {
            serverFilename: './my-file.ck',
            virtualFilename: 'my-file.ck'
        }
    ];
    var startButton = document.getElementById( "startButton" );
    startButton.addEventListener( "click", async function() {
        await preloadFilenames( serverFilesToPreload );
        await startChuck();
        await theChuckReady;
        await theChuck.runFile("my-file.ck");
    });
</script>
</body>
</html>

Here it is in action.

EXTRA: Loading audio and other file types

The same file loading technique applies to audio, MIDI, txt, and other file types.

Here is an audio file my-audio.wav (actually geetar.wav from the ChucK examples):

Here is some ChucK code in a file called play-my-audio.ck:

 // Load and play an audio
SndBuf buf => dac;
me.sourceDir() + "my-audio.wav" => buf.read;
0 => buf.pos;
1 => buf.rate;
buf.length() / buf.rate() => now;

And here they are configured to load and run in WebChucK on a simple web page:

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="./js/webchuck_host.js"></script>

<h1>Hello WebChucK</h1>
<h2>Audio File Playback</h2>

<input id="startButton" type="button" value="Start ChucK" />

<script>
    var serverFilesToPreload = [
        {
            serverFilename: './my-audio.wav',
            virtualFilename: 'my-audio.wav'
        },
        {
            serverFilename: './play-my-audio.ck',
            virtualFilename: 'play-my-audio.ck'
        }
    ];
    var startButton = document.getElementById( "startButton" );
    startButton.addEventListener( "click", async function() {
        await preloadFilenames( serverFilesToPreload );
        await startChuck();
        await theChuckReady;
        await theChuck.runFile("play-my-audio.ck");
    });
</script>
</body>
</html>

Check it out in action here.

Home ~ Tutorial 1: Getting Started ~ Tutorial 2: Communicating with Chuck ~ Tutorial 3: Listening to Chuck