JSFiddle - React, Tailwind, and code Playground

JavaScript

// Attempting to generate a sine tone at 22.05KHz sampling rate
// using the built-in sample rate conversion of AudioBufferSourceNode,
// by modifying the assigned buffer periodically.
//
// Should this even work?
var ac = new webkitAudioContext;
var N = 2048, SR = 22050;
var buffer = ac.createBuffer(1, N * 2, SR);
var source = ac.createBufferSource();
source.connect(ac.destination);
source.buffer = buffer;
source.loop = true;

var sinegen = function (freq) {
    var phase = 0, dphase = Math.PI * 2.0 * freq / SR;
    return function (channel) {
        var n = channel.length;
        for (var i = 0; i < n; ++i) {
            channel[i] = 0.1 * Math.sin(phase);
            phase += dphase;
        }
    };
};

var sine440 = sinegen(440.0);

var channel = new Float32Array(N);
var dt = 0, start_t = 0, offset = 0;
var nextTime = function () { 
    return Math.floor(1000 * (start_t + (dt - 0.5 * channel.length) / SR - ac.currentTime));
};
setTimeout(function () {
    var now = start_t = ac.currentTime;
    sine440(channel);
    buffer.getChannelData(0).set(channel, 0);
    sine440(channel);
    buffer.getChannelData(0).set(channel, N);
    dt = channel.length * 2;
    source.start(now);
    setTimeout(function () {
        sine440(channel);
        buffer.getChannelData(0).set(channel, offset);
        dt += channel.length;
        offset = (offset > 0 ? 0 : N);
        setTimeout(arguments.callee, nextTime());
    }, nextTime());
}, 1000);