JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/jshanley/blip/1a510ce42fb7c0894b5b8ea973ce953467b8ba64/blip.min.js"></script>
<button id="play">Play</button>
<button id="pause">Pause</button>
<div id="shift"></div>
<div id="notes"></div>
<br/>
<div id="seq"></div>

CSS

#seq {
    white-space: pre;
    font-family: monospace;
    line-height: 5px;
}

JavaScript

blip.sampleLoader()
    .samples({
    'uke': 'https://cdn.rawgit.com/jshanley/blip/1a510ce42fb7c0894b5b8ea973ce953467b8ba64/sounds/ukeC.wav',
        'plastic': 'https://cdn.rawgit.com/jshanley/blip/b2d1594c94a63af9bebab2730ec262301d17b360/sounds/plastic.wav',
})
    .done(loaded)
    .load();

function loaded() {

    // set base tempo var
    var TEMPO = 120;

    // create clips
    var uke1 = blip.clip().sample('uke');
    var uke2 = blip.clip().sample('uke');
    var uke3 = blip.clip().sample('uke');
    var uke4 = blip.clip().sample('uke');
    var plastic = blip.clip().sample('plastic');

    /* ====================== LOOPS ====================== */

    var notes = [];
    var shift = 2;
    var counter = 0;
    document.getElementById('shift').innerText = 'root: ' + shift;
    var melody = blip.loop()
        .tempo(TEMPO * 4)
        .tick(function (t) {
            var scaleSteps = 5;
            if (notes.length < 4) {
                var newNote = shift + (Math.random() * scaleSteps | 0) * (12/scaleSteps) | 0;
                newNote += 48;
                newNote %= 12;
                if (notes.indexOf(newNote) === -1) {
                    notes.push(newNote);
                    document.getElementById('notes').innerText = 'chord: ' + notes.join(' ');
                }
            }
            var note = notes[Math.random() * notes.length | 0];
            note += [0, 12][Math.random() * 2 | 0];
            var pitch = Math.pow(Math.pow(2, 1/12), note);
            if (!(counter % 8)) {
                plastic.play(t, {
                    rate: .8,
                    gain: 0.6
                });
            } else if (!(counter % 4)) {
                plastic.play(t, {
                    rate: .8,
                    gain: 0.3
                });
            } else {
                plastic.play(t, {
                    rate: 1.1 + (Math.random() * .1),
                    gain: 0.1
                });
            }
            var...