JSFiddle - React, Tailwind, and code Playground

by nimrodsarda

HTML

<div id="p-wrapper">
    <ul id="piano">
        <li>
            <div id="C2" class="anchor tonic"></div>
        </li>
        <li>
            <div class="anchor" id="D2"></div> <span id="Db2" class="flat"></span>

        </li>
        <li>
            <div id="E2" class="anchor"></div> <span id="Eb2" class="flat"></span>

        </li>
        <li>
            <div id="F2" class="anchor"></div>
        </li>
        <li>
            <div id="G2" class="anchor"></div> <span id="Gb2" class="flat"></span>

        </li>
        <li>
            <div id="A2" class="anchor"></div> <span id="Ab2" class="flat"></span>

        </li>
        <li>
            <div id="B2" class="anchor"></div> <span id="Bb2" class="flat"></span>

        </li>
        <!---->
        <li>
            <div id="C3" class="anchor tonic"></div>
        </li>
        <li>
            <div class="anchor" id="D3"></div> <span id="Db3" class="flat"></span>

        </li>
        <li>
            <div id="E3" class="anchor"></div> <span id="Eb3" class="flat"></span>

        </li>
        <li>
            <div id="F3" class="anchor"></div>
        </li>
        <li>
            <div id="G3" class="anchor"></div> <span id="Gb3" class="flat"></span>

        </li>
        <li>
            <div id="A3" class="anchor"></div> <span id="Ab3" class="flat"></span>

        </li>
        <li>
            <div id="B3" class="anchor"></div> <span id="Bb3" class="flat"></span>

        </li>
    </ul>
    <button id="save" style="outline:thin solid #ffffff;padding:2px;margin-right:5px;margin-bottom:5px;margin-top:5px;float: right; border:none;font-weight: bold;background-color: transparent">Export MIDI</button>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    list-style: none;
}
:focus {
    outline: none !important;
}
body {
    text-align: left;
    font-weight: bold;
    background: #666;
    background: -webkit-radial-gradient(bottom left, cover, #999, #666);
}
#p-wrapper {
    width: 220px;
    background:#000;
    background:-webkit-linear-gradient(-60deg, #000, #333, #000, #666, #333 70%);
    -webkit-box-shadow:0 2px 0px #666, 0 3px 0px #555, 0 4px 0px #444, 0 6px 6px #000, inset 0 -1px 1px rgba(255, 255, 255, 0.5), inset 0 -4px 5px #000;
    -webkit-border-radius:0 0 5px 5px;
    -webkit-animation:taufik 2s;
}
ul#piano {
    display: block;
    width: 100%;
    border-top: 2px solid #222;
    margin: 5px;
}
ul#piano li {
    list-style: none;
    float: left;
    width: 15px;
    position: relative;
    display:inline;
    background:#aaa;
}
ul#piano li div.anchor {
    height: 110px;
    display:block;
    background:-webkit-linear-gradient(-30deg, #f5f5f5, #fff);
    border:1px solid #ccc;
    -webkit-box-shadow:inset 0 1px 0px #fff, inset 0 -1px 0px #fff, inset 1px 0px 0px #fff, inset -1px 0px 0px #fff, 0 4px 3px rgba(0, 0, 0, 0.7);
    -webkit-border-radius:0 0 3px 3px;
}
ul#piano li span {
    background:-webkit-linear-gradient(-20deg, #333, #000, #333);
    border-color:#666 #222 #111 #555;
    -webkit-box-shadow:inset 0px -1px 2px rgba(255, 255, 255, 0.4), 0 2px 3px rgba(0, 0, 0, 0.4);
    -webkit-border-radius:0 0 2px 2px;
    position: absolute;
    top: 0;
    left: -6px;
    width: 8px;
    height: 60px;
    z-index: 10;
    border: 2px solid #272727;
    border-top-width: 1px;
    background-color: #B2D6FE;
    -webkit-border-radius: 0 0 3px 3px;
}
@-webkit-keyframes rodson {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

JavaScript

var runPopupPiano = function () {

    var midiModule = function () {
        var noteEvents = [];
        ["C4", "E4", "G4"].forEach(function (note) {
            Array.prototype.push.apply(noteEvents, MidiEvent.createNote(note));
        });

        var track = new MidiTrack({
            events: noteEvents
        });
        var song = MidiWriter({
            tracks: [track]
        });
        song.save();
    };

    var piano = function () {

        var noteTracker = 0;
        var keyboardKeys = ["z", "x", "c", "v", "b", "n", "m", "a", "s", "d", "f", "g", "h", "j", "k", "l", "q", "w", "e", "r", "t", "y", "u", "i"];
        var noteIds = ["C2", "Db2", "D2", "Eb2", "E2", "F2", "Gb2", "G2", "Ab2", "A2", "Bb2", "B2", "C3", "Db3", "D3", "Eb3", "E3", "F3", "Gb3", "G3", "Ab3", "A3", "Bb3", "B3"];

        function playNoteAudio(note) {
            var audio;
            audio = document.createElement("AUDIO");
            audio.src = "audio/" + note + ".wav";
            audio.play();
        }

        function noteAnimation(note) {
            var x = document.getElementById(note);
            if (x.getAttribute("class") === "anchor tonic") {
                x.style.height = "105px";
                setTimeout(function () {
                    x.style.height = "110px"
                }, 33);
            } else if (x.getAttribute("class") === "flat") {
                x.style.height = "55px";
                setTimeout(function () {
                    x.style.height = "60px"
                }, 33);
            } else {
                x.style.height = "105px";
                setTimeout(function () {
                    x.style.height = "110px"
                }, 33);
            }
        }

        function notePressed(note) {
            noteTracker++;
            console.log("pressed " + note + " noteTracker: " + noteTracker + " noteStartTime: " + new Date().getTime());
            playNoteAudio(note);
            noteAnimation(note);
        }


      ...