JSFiddle - React, Tailwind, and code Playground

by taoist

HTML

<p><button id="start">Start</button> <button id="stop">Stop</button></p>
<br/>
<ul>
    <li class="note" id="eighthNote"><label><input type="checkbox" id="eighthNoteActive" checked> Eighth Note</label></li>
    <li class="note" id="quarterNote"><label><input type="checkbox" id="quarterNoteActive" checked> Quarter Note</label></li>
    <li class="note" id="halfNote"><label><input type="checkbox" id="halfNoteActive" checked> Half Note</label></li>
</ul>

CSS

.note {
    -moz-transition: all 0.19s ease-out;
    -webkit-transition: all 0.19s ease-out;
    -o-transition: all 0.19s ease-out;
    -ms-transition: all 0.19s ease-out;
    transition: all 0.19s ease-out;
    background: white;
}
.note.active {
    -moz-transition-duration: 0.01s;
    -webkit-transition-duration: 0.01s;
    -o-transition-duration: 0.01s;
    -ms-transition-duration: 0.01s;
    transition-duration: 0.01s;
}

#eighthNote.active {
    background-color: #AAAAFF;
}
#quarterNote.active {
    background-color: #AAFFFF;
}
#halfNote.active {
    background-color: #AAFFAA;
}

JavaScript

var anim = {
    wholeNoteTiming: 2400,
    halfNoteActive: true,
    quarterNoteActive: true,
    eighthNoteActive: true,
    anim: function(id) {
        $('#'+id).addClass('active');
        setTimeout(function() {
            $('#'+id).removeClass('active');
        }, 50);
    },
    halfNoteTick: function() {
        this.anim('halfNote');
    },
    quarterNoteTick: function() {
        this.anim('quarterNote');
    },
    eighthNoteTick: function() {
        this.anim('eighthNote');
    },
    _tickCount: 0,
    _tick: function() {
        if(this.eighthNoteActive) {
            this.eighthNoteTick();
        }
        if(this.quarterNoteActive && this._tickCount % 2 == 0) {
            this.quarterNoteTick();
        }
        if(this.halfNoteActive && this._tickCount % 4 == 0) {
            this.halfNoteTick();
        }
        this._tickCount++;
    },
    _interval: 0,
    start: function() {
        if(this._interval == 0) {
            var self = this;
            this._tickCount = 0
            this._interval = setInterval(function() {self._tick()}, this.wholeNoteTiming/8);
        }
    },
    stop: function() {
        if(this._interval != 0) {
            clearInterval(this._interval);
            this._interval = 0;
        }
    }
}
    
    $("#start").click(function() { anim.start(); });
    $("#stop").click(function() { anim.stop(); });
    $("#eighthNoteActive").click(function() { anim.eighthNoteActive = !!this.checked; });
    $("#quarterNoteActive").click(function() { anim.quarterNoteActive = !!this.checked; });
    $("#halfNoteActive").click(function() { anim.halfNoteActive = !!this.checked; });