index.js

const beepBase64 = 'SUQzBAAAAAAASVRQRTEAAAAcAAADU291bmRKYXkuY29tIFNvdW5kIEVmZmVjdHMAVFNTRQAAAA8AAANMYXZmNTguNDUuMTAwAAAAAAAAAAAAAAD/+5DAAAAAAAAAAAAAAAAAAAAAAABJbmZvAAAADwAAAAkAABBTADMzMzMzMzMzMzMzTExMTExMTExMTExmZmZmZmZmZmZmZn9/f39/f39/f39/mZmZmZmZmZmZmZmzs7Ozs7Ozs7Ozs8zMzMzMzMzMzMzM5ubm5ubm5ubm5ub//////////////wAAAABMYXZmAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQUxToXVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/+5LAAAAAAAEsFAAAAvpBaSs3UAMMIEAAIBAEBAQJAP//Zzs6amhf9u2bMjG3hH/u2Z0pGoFWV0QMgJ4DazM5PkTQA0sOgRG8DBgO9dTAY+BQGFBUCIgAYVBv22gMFADBIbAwuAQIg8BQT/u/higDDIdAxKHwGA2XSv//mh9aa3///izBNoGDQKBICA2gKVAxIDAKAEDCID/+338ZEUGVxc5FhcA3xlCCAGAIAIEf////hZgWOmZpFwtlxiCCzBSgGAQSBg8F/////////5XB84EDADuWVSIgAFAAACAAAAQGBQBEHMoRWY0+jboZQUaKfPRGdlwABG1pWqW9PAYPHwG8duCQRAy1xghCAGPOSBoRNgYWG4AR5FDmbhlwwQCyYoCthcTupkWRcY4aQjkvjKpMipFk0rjmhyIGSgoTputINSAw2LyaQmod8DBowHPXX+3bf7ISCjHgWJwpYuF5a0kxaQBggam+8rCmABAEnFWSL5AVk6aF8mRBYIgIAIQ26p00HUFrf1ZIjXDGQiw9JqUeQWxmWg/IcsGgTCyxJrdd//uSwGcAHP2dSfmqgAJlMyi/sVAAazItlEPAbtf68lx8CNTNZUkxTP8Np1f8M9VU9PDGAABiCABKEAFued3kNA49uPvTNWmJrFrJ+F6g6IN+BusBhZdgd/3QGUxkBi8NBQBiEo4h/GZPJ5tUnvWqw9pIFI+dHg1M+g5KE6eLIzJAQxIBJyBcyOaeSRMnvWhvWrat6LVNQ7LRKznDhBggDQds4bc9///f6PyLosyJDQIAUVdtT1d///7+Ykck6zIvBhcnWavXr/UAlnhmUwAAIAAAMQUemgtTbK0WwnWyqXdzWEbuvguK9EnToCAAzA2BINBQUkwaAAA4BdHxr7/yinwuf9nn5f/P7j/Jz68t7lX5BfP/nYM7y7GG5hYFYD1IRKBNk4mma1obattHa7b02qW41CtSNTgSgB9kbVI19Vf/3bz7dxwPMkSaAIJBzjVLOP9X1L+v6jb1CfWquFBj1aD+tv/1/OS7xEKgAAFAAAEqNAIrVU1yqgkcqaONFqevN4pSJAcnK7rfFvTC0Oj5NFwUWQ8BLrxSk+5jZ/6//j/7///7ksBsgBO11T/seo3CWbRoPY7RsO/2repLWerXZn3JRJFEwGNAXjAd8yJ2LppWW3Y9UjtrqfXV3tqyHGmxwJtBYFrao/W2erbartVq0NWPTVrKACRwjRNecevW1fb9b6quqZDTevBQE1ecrt29N5GHZWRjAAAoAAA2aQ25QJCs0KilK2Vce4JFRLpeZvUUl3LJAoLGERlnfGIGIgTlknjlVmP2cr/f13uf/n///9vRLHUxbvPB3/z1JNbwn4QCgLAlxgzY4C+aMTlXNrIav6e+lqyHlqtjgQkgFA4ms1pkvW1S1L2/26p3TxmXZFIhoBIdDjTYxeSjV62+v7rfao9sosjcXVgNBF5zJtqtf7eqr6j66lWREIAACAAABkZsM8UeZbfmFFfgl8spQsV+5a57LXJUoHQXCxlGaWBmAgUId1SOXD8FWr2HcLGfO/hjnrn0livuiu28uPh+f95HrGrkregLi+Bz0QoMgBB1IEyyk9NdPf6b+06nWhHSpC0ELAKLDdE9Olv6q+1XqZvMmoYy1lIFMAwiGxoHFTI1dXQZXSX/+5LAmQAUadc97Hatwpe65/2O0bgv1/TPadAUrUmpABQMzrzV/v9l/V7zZYCKiIZTAAAwAAAoGtp8vsq76qJ0YUPidXJpyCBMAuQIShggA0AYGBcJYGJUXIGn8+AGEYIQAwUAxWT50fZMGhiub0EdN7ycKMgA2zcjyLFYjH0kCMNU0DohcB4RQMMQGgFAIC4FOo+16zLf023rVtUqtlGCdEwPAhAYDgQEULRogdQb/3/U/+lQGNN3OGA6AHAMEXWpCtvU2/+/619aiTTsYFwLgSfdWWOx0hyVQxiAiAAAAAAAAAAAABIB4krV5cSVRGTcNwYIj2OzKVDwuEA0YDFDjwNIoOA5EDSAGIBgDBeNgJAbRNQLAcHMRQdTLZayuQcyLiSmoMm7GZUTls0L4Y4Bg8BqKUVJ4XOBhlAIJ/WsiIm0DC4BIYCTI2q0q31maajQ0TWelsSoIABmBrpppDlgNAyImb5XNCqK6AcCAtHGTtvrHoUMFlfvllQz4FgHJ0GTuiQgoUL6JMz2bXOnykHjN9VfW5TYfYjZqC09B1m6JaGq//uSwLqAFXWjQ/WLAANoOuj7H2AAQR0W9f//+Zn95P/oPHzADJigBQAAAAMAQAUAAAAAA9VPPI7pTY/zDyczw/pu/48FGPDTul9v8ByIA2iLAsEIzUsDKwEAUIAGAwaEwAGzCTKxHQIgcAwAAwGICjkk4T1eGKRDguYFCC0pEyWDInvjFBuUGIwJAQR4I7KKzUhxNFv8gQownQVuLJG0JQIaYoGyRic/jcHSLjGmJ1GQHYOWZJGxRMTxkZOXf+O4cA545pJDMD8Q0c8ZcT6ip6JxRsUTFv/lQqEDOESIgRcipWIIShDSLjrHYZJOiip6KlJGKLf/9iWIuYE8ThFyZKxBCM//+ZDScuNAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/7ksC+AByV003ZuoBIAAAlg4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/+5LA/4AAAAEsAAAAAAAAJYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//uSwP+AAAABLAAAAAAAACWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/7ksD/gAAAASwAAAAAAAAlgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=';
const singleBeepButton = document.getElementById('single_beep');
const rapidBeepButton = document.getElementById('rapid_beep');

const singleOscillatorButton = document.getElementById('single_oscillator');
const rapidOscillatorButton = document.getElementById('rapid_oscillator');

function getBeepFrequency() {
    return parseInt(document.getElementById('beep_freq').value, 10);
}

function getBeepDuration() {
    return parseInt(document.getElementById('beep_duration').value, 10);
}

function getBeepArrayBuffer() {
    const beepBinary = atob(beepBase64);
    const bytes = new Uint8Array(beepBinary.length);
    for (let i = 0; i < beepBinary.length; i++) {
        bytes[i] = beepBinary.charCodeAt(i);
    }
    return bytes.buffer;
}

let mp3Ctx = null;
let mp3AudioBuffer = null;

singleBeepButton.onclick = () => {
    if (!mp3Ctx) {
        mp3Ctx = new AudioContext({latencyHint: 'interactive'});
    }
    mp3Ctx.decodeAudioData(getBeepArrayBuffer())
        .then((audioBuffer) => {
            mp3AudioBuffer = audioBuffer;
            const bufferSource = mp3Ctx.createBufferSource();
            bufferSource.buffer = audioBuffer;

            bufferSource.connect(mp3Ctx.destination);
            bufferSource.start(0);
            bufferSource.onended = () => {
                bufferSource.disconnect();
                mp3Ctx.close();
            };
        })
        .catch(err => {
            window.alert(err.name);
        });
};

rapidBeepButton.onclick = async () => {
    if (!mp3Ctx) {
        mp3Ctx = new AudioContext({latencyHint: 'interactive'});
        mp3AudioBuffer = await mp3Ctx.decodeAudioData(getBeepArrayBuffer());
    }

    let t = 0;
    for (let i = 0; i < 10; i++) {
        t += 50 + Math.random() * 80;
        setTimeout(() => {
            const bufferSource = mp3Ctx.createBufferSource();
            bufferSource.buffer = mp3AudioBuffer;
            bufferSource.connect(mp3Ctx.destination);
            bufferSource.start();
            bufferSource.onended = () => {
                bufferSource.disconnect();
            };
        }, t);
    }
};

singleOscillatorButton.onclick = () => {
    const freq = getBeepFrequency();
    const duration = getBeepDuration();
    const oscillatorCtx = new AudioContext({ latencyHint: 'interactive' });
    const oscillator = oscillatorCtx.createOscillator();
    // oscillator.type = 'sine';
    oscillator.type = 'square';
    oscillator.frequency.setValueAtTime(freq, oscillatorCtx.currentTime); // value in Hz
    oscillator.connect(oscillatorCtx.destination);
    oscillator.start();
    setTimeout(function () {
        oscillator.stop();
        oscillatorCtx.close();
    }, duration);
};

rapidOscillatorButton.onclick = () => {
    const freq = getBeepFrequency();
    const duration = getBeepDuration();
    const oscillatorCtx = new AudioContext({ latencyHint: 'interactive' });
    const oscillator = oscillatorCtx.createOscillator();
    oscillator.type = 'square';
    oscillator.frequency.value = freq;
    oscillator.connect(oscillatorCtx.destination);

    let t = 0;
    for (let i = 0; i < 10; i++) {
        t += 500 + Math.random() * 80;
        setTimeout(() => {
            oscillator.start();
            //oscillator.stop(oscillatorCtx.currentTime + duration);
            setTimeout(() => {
                oscillator.stop();
            }, duration);
        }, t);
    }
};