JSFiddle - React, Tailwind, and code Playground

by also

HTML

<button onclick="play()">play</button>
<button onclick="pause()">pause</button>

<script>if (!(new Audio().mozSetup)) { document.write("<p>Your browser doesn't support the Audio Data API.</p>"); }</script>

JavaScript

var sampleRate = 44100;

var audio = new Audio();
audio.mozSetup(1, sampleRate);

var writePosition = 0;

var bufferSize = sampleRate / 2;
var buffer = new Float32Array(bufferSize);
var currentBuffer = buffer.subarray(0);

function write() {
    var playPosition = audio.mozCurrentSampleOffset();
    while (true) {
        var needed = playPosition + bufferSize - writePosition;
        if (needed <= 0) {
            break;
        }
        if (currentBuffer.length === 0) {
            currentBuffer = buffer.subarray(0, needed);
            generateData(currentBuffer);
        }
        var toWrite = currentBuffer.length;
        var written = audio.mozWriteAudio(currentBuffer);
        writePosition += written;
        currentBuffer = currentBuffer.subarray(written);
        if (written < toWrite) {
            break;
        }
    }
}

var p = 0;
function generateData(buffer) {
    for (var i = 0; i < buffer.length; i++) {
        buffer[i] = Math.sin(p++);
    }
}

var interval;

function play() {
    interval = interval || setInterval(write, 100);
}

function pause() {
    interval = clearInterval(interval);
}