> ## Content Index
> Fetch the complete content index at: https://www.chrisraible.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Making music with Claude Code and the AudioContext web audio API
- URL: https://www.chrisraible.com/audio-context-api/
- Published: 2026-05-07T06:41:24.000Z
- Updated: 2026-05-15T22:51:26.000Z
- Description: It turns out Claude Code can write music
- Author: Chris Raible

The [AudioContext](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext?ref=chrisraible.com) interface allows you to create sound effects and music algorithmically in the browser with JavaScript, like a programmable synthesizer. I discovered this today when I wanted to add a sound effect to my site's Ghost theme, but I didn't want to go through the rigamarole of finding a recording of the sound effect, adding it as a theme asset, etc. Instead, Claude synthesized a sound effect for me in JavaScript, using the AudioContext interface. The code below is what creates the degauss sound effect:

Degauss this page 

```javascript
const playDegaussSound = () => {
    const AudioContext = window.AudioContext || window.webkitAudioContext;

    if (!AudioContext) {
        return;
    }

    const context = new AudioContext();
    const now = context.currentTime;
    const output = context.createGain();

    output.gain.setValueAtTime(0.55, now);
    output.connect(context.destination);

    const playTone = ({type, frequency, endFrequency, delay = 0, duration, volume, filterFrequency}) => {
        const oscillator = context.createOscillator();
        const gain = context.createGain();
        const filter = context.createBiquadFilter();
        const start = now + delay;
        const end = start + duration;

        oscillator.type = type;
        oscillator.frequency.setValueAtTime(frequency, start);
        oscillator.frequency.exponentialRampToValueAtTime(endFrequency, end);

        filter.type = 'lowpass';
        filter.frequency.setValueAtTime(filterFrequency, start);
        filter.frequency.exponentialRampToValueAtTime(Math.max(40, filterFrequency * 0.25), end);

        gain.gain.setValueAtTime(0.0001, start);
        gain.gain.exponentialRampToValueAtTime(volume, start + 0.018);
        gain.gain.exponentialRampToValueAtTime(0.0001, end);

        oscillator.connect(filter);
        filter.connect(gain);
        gain.connect(output);
        oscillator.start(start);
        oscillator.stop(end + 0.02);
    };

    const playNoiseBurst = () => {
        const duration = 0.12;
        const bufferSize = context.sampleRate * duration;
        const buffer = context.createBuffer(1, bufferSize, context.sampleRate);
        const data = buffer.getChannelData(0);
        const source = context.createBufferSource();
        const filter = context.createBiquadFilter();
        const gain = context.createGain();

        for (let index = 0; index < bufferSize; index += 1) {
            data[index] = (Math.random() * 2 - 1) * (1 - index / bufferSize);
        }

        source.buffer = buffer;
        filter.type = 'bandpass';
        filter.frequency.setValueAtTime(180, now);
        filter.Q.setValueAtTime(0.8, now);
        gain.gain.setValueAtTime(0.09, now);
        gain.gain.exponentialRampToValueAtTime(0.0001, now + duration);

        source.connect(filter);
        filter.connect(gain);
        gain.connect(output);
        source.start(now);
    };

    playTone({
        type: 'sine',
        frequency: 150,
        endFrequency: 92,
        duration: 0.52,
        volume: 0.16,
        filterFrequency: 520
    });
    playTone({
        type: 'sawtooth',
        frequency: 260,
        endFrequency: 120,
        delay: 0.018,
        duration: 0.36,
        volume: 0.055,
        filterFrequency: 1100
    });
    playTone({
        type: 'triangle',
        frequency: 420,
        endFrequency: 190,
        delay: 0.035,
        duration: 0.22,
        volume: 0.035,
        filterFrequency: 1600
    });
    playNoiseBurst();

    window.setTimeout(() => context.close(), 950);
};

```

It's a neat, super lightweight way to add sound effects to a web app, and seems to be *mostly* used for sound effects in games, but it can just as easily be used for creating algorithmic music or instruments in your browser. After this first taste of Dunning-Kruger and AI fueled musical creation, I wanted to explore what else was possible with AudioContext.

And it turns out, the answer is pretty much anything. I made what I gather is a pretty simple "subtractive synthesizer". The coolest part for me, since I know barely anything about synthesizers, is that it visualizes the wave forms *live* in your browser, so you can visualize the tones you're creating and see how they change as you adjust all the knobs and play different tones. [Code](https://github.com/cmraible/websynth?ref=chrisraible.com) and [demo](https://synth.chrisraible.com/?ref=chrisraible.com) for the curious.

![](https://storage.ghost.io/c/94/0b/940b73e9-4952-4752-b23d-9486f999c47e/content/images/2026/05/image.png)

I found the XY Pad particularly fun to play with using a trackpad or phone:

![](https://storage.ghost.io/c/94/0b/940b73e9-4952-4752-b23d-9486f999c47e/content/images/2026/05/image-1.png)

I'm sure the visualization isn't *perfect* but from my rudimentary understanding of all these concepts it's at least directionally correct. Apparently there’s also a [Web MIDI API](https://developer.mozilla.org/en-US/docs/Web/API/Web%5FMIDI%5FAPI?ref=chrisraible.com) to interface with hardware MIDI controllers too. 

This was a neat experiment, but I really have no idea what I'm doing here, and the little single html + javascript file app doesn't really allow you to record a song or anything like that (not that I'd have a clue how to do that to begin with). 

But it got me thinking: could Claude generate a decent song *in code*? One prompt and 2 minutes later, Claude Code generated an [impressively complex instrumental song in pure JavaScript](https://synth.chrisraible.com/song.html?ref=chrisraible.com). You can read the source code of the song the magic computer in the sky composed [here](https://github.com/cmraible/websynth/blob/main/song.js?ref=chrisraible.com).

> You can read the source code of the song the magic computer in the sky composed [here](https://github.com/cmraible/websynth/blob/main/song.js?ref=chrisraible.com). (he repeated for emphasis)

What a wild time to be alive. Something something copyright law. Something something [player piano](https://en.wikipedia.org/wiki/Player%5FPiano%5F%28novel%29?ref=chrisraible.com).