JSFiddle - React, Tailwind, and code Playground

by Sean Coker

HTML

<div><input type="button" value="kick" id="kick"> or press k</div>
    <div><input type="button" value="snare" id="snare"> or press s</div>
    <div><input type="button" value="hihat" id="hihat"> or press h</div>
    <div><input type="button" value="open hihat" id="ohihat"> or press j</div>
    <div><input type="button" value="clap" id="clap"> or press c</div>
    <div><input type="button" value="clave" id="clave"> or press l</div>
    <div><input type="button" value="maracas" id="maracas"> or press m</div>
    <div><input type="button" value="rimshot" id="rimshot"> or press ;</div>
    <div><input type="button" value="cowbell" id="cowbell"> or press o</div>
    <div><input type="button" value="hi tom" id="hitom"> or press t</div>
    <div><input type="button" value="mid tom" id="midtom"> or press g</div>
    <div><input type="button" value="low tom" id="lowtom"> or press b</div>
    <div><input type="button" value="hi conga" id="hiconga"> or press r</div>
    <div><input type="button" value="mid conga" id="midconga"> or press f</div>
    <div><input type="button" value="low conga" id="lowconga"> or press v</div>
    <div><input type="button" value="cymbal" id="cymbal"> or press y</div>

CSS

body {
            font-family: helvetica
        }

JavaScript

function TR808(context) {
    context = context || typeof AudioContext !== 'undefined' ? new AudioContext : typeof webkitAudioContext !== 'undefined' ? new webkitAudioContext : null;

    if (!context) {
        return;
    }

    var sampleRate = context.sampleRate;
    var openHiHatEnvelope = null;

    function _whitenoise(multiplier) {
        multiplier = multiplier || 1;
        var node = context.createBufferSource();
        var buffer = context.createBuffer(1, sampleRate, context.sampleRate);
        var data = buffer.getChannelData(0);

        for (var i = 0; i < sampleRate; i++) {
            data[i] = Math.random() * (2 * multiplier) - (1 * multiplier);
        }

        node.buffer = buffer;
        node.loop = true;
        return node;
    }

    function _kick() {
        var pitch = 100;
        var decay = 20;
        var tone = 3000;
        var now = context.currentTime;

        var osc1 = context.createOscillator();

        var gain1 = context.createGain();

        var lpf = context.createBiquadFilter();
        lpf.type = 'lowpass';
        lpf.frequency.value = tone;
        lpf.Q.value = 0.5;

        osc1.frequency.setValueAtTime(pitch, now);
        osc1.connect(lpf);
        lpf.connect(gain1);

        gain1.gain.setValueAtTime(0, now);
        gain1.gain.setValueAtTime(1.5, now + 0.0001);
        gain1.gain.exponentialRampToValueAtTime(0.0001, now + 1);

        gain1.connect(context.destination);

        osc1.start(now);
        osc1.stop(now + 1);
    }

    function _snare() {
        var cutoff = 1000;
        var tune = 0;
        var snappy = 0.5;

        var now = context.currentTime;

        var bpf1 = context.createBiquadFilter();
        bpf1.type = 'bandpass';
        bpf1.frequency.value = 180 * (tune + 1);
        bpf1.Q.value = 1;
        bpf1.gain.value = 15;

        var bpf2 = context.createBiquadFilter();
        bpf2.type = 'bandpass';
        bpf2.frequency.value = 330 * (tune + 1);
        bpf2.Q.value =...