Beatkeeper | The simplest, no-frillsiest way to keep time.

by Wray Bowling

HTML

<audio id="click" controls>
	<source type="audio/ogg" src="http://anyonecanplayguitar.org/Beatkeeper/audio/click.ogg">
	<source type="audio/mpeg" src="http://anyonecanplayguitar.org/Beatkeeper/audio/click.mp3">
</audio>

<div id="controls">
	<div class="clickable" id="play">play</div>
	<div class="clickable" id="stop">stop</div>
	<div id="bpm"></div>
	<div class="clickable" id="up">up</div>
	<div class="clickable" id="down">down</div>
</div>

CSS

.clickable{
    cursor:pointer;
}

.clickable:hover{
    background-color:#bada55;
}

JavaScript

/**
* Beatkeeper: Simplified
*/

// Global Variables
var timer;
var tempo = 120;
var playing = false;

// Global DOM Elements
var el_click = document.getElementById('click');
var el_bpm = document.getElementById('bpm');
var el_play = document.getElementById('play');
var el_stop = document.getElementById('stop');
var el_up = document.getElementById('up');
var el_down = document.getElementById('down');

// Global Functions
function render(){
    el_bpm.innerHTML = tempo;
}

function click(){
    el_click.pause();
    el_click.currentTime = 0;
    el_click.play();
}

function start(){
    clearInterval(timer);
    timer = setInterval(click, Math.round(((60/tempo)*1000)*100000) / 100000);
}

function stop(){
    clearInterval(timer);
    el_click.pause();
}

function increment(alteration){
    tempo += alteration;
    start();
    render();
}

// Event Listeners
el_play.addEventListener('click', start, false);
el_stop.addEventListener('click', stop, false);
el_up.addEventListener('click', function(){ increment(1); }, false);
el_down.addEventListener('click', function(){ increment(-1); }, false);

// Initialize
render();