Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
134 lines (127 sloc) 3.26 KB
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,height=device-height" />
<title>BPM</title>
<style>
body {
background: #BBBBFF;
}
#wrapper {
position: absolute;
left: 50%;
top: 50%;
margin-top: -6em;
}
#circle {
margin-left: -50%;
width: 12em;
height: 12em;
background-color: #FF9999;
border: 3px solid #FF7777;
position: relative;
-webkit-border-radius: 99px;
-moz-border-radius: 100px;
}
#bpm {
position: absolute;
top: 50%;
text-align: center;
width: 100%;
font-size: 6em;
padding: 0;
margin-top: -0.7em;
margin-bottom: 0;
height: 1em;
color: #EEE;
}
#bpm.settle {
margin-top: -1.4em;
font-size: 2em;
font-style: italic;
}
#caption {
position: absolute;
font-style: italic;
top: 70%;
text-align: center;
width: 100%;
color: #EEE;
}
#help {
position:absolute;
bottom:1em;
right:1em;
font-style:italic;
}
</style>
</head>
<body>
<a href="http://github.com/mhansen/bpmtapper.com">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="http://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
alt="Fork me on GitHub" />
</a>
<div id="wrapper">
<div id="circle">
<div id="topcaption"></div>
<div id="bpm"></div>
<div id="caption">bpm</div>
</div>
</div>
<div id="help">
Tap out a song.<br/>Use the spacebar,<br/> or the mouse.
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function () {
/* scroll past the address bar on mobile safari */
setTimeout(function() { window.scrollTo(0,1); }, 0);
$("*").click(press).keydown(press);
});
var firstPressTime = null;
var lastPressTime = null;
var numberOfPresses = 0;
var messages = [ "Settle down, ow bay!", "Lay off the caffeine!",
"You broke it", "Come on, man", "Just settle down", "I don't like that",
"Too fast!" ];
function random_message() {
return messages[Math.floor(Math.random()*messages.length)];
}
function press(e) {
numberOfPresses++;
var now = new Date();
if (firstPressTime) {
lastPressTime = now;
}
else {
firstPressTime = now;
}
var totalDifference = (lastPressTime - firstPressTime);
var averageDifference = totalDifference / (numberOfPresses - 1);
if (firstPressTime && lastPressTime) {
$("#bpm").fadeIn();
var bpm = (60 / averageDifference) * 1000;
if (bpm <= 999) {
$("#bpm").text(bpm.toPrecision(3)).removeClass("settle");
}
else {
$("#bpm").text(random_message()).addClass("settle");
}
}
else {
$("#bpm").text("");
}
// reset if no input is given for a while
setTimeout(function (oldTime) {
if (lastPressTime === oldTime || lastPressTime === null) {
numberOfPresses = 0;
firstPressTime = lastPressTime = null;
$("#bpm").fadeOut();
}
}, 1500, now);
e.stopPropagation();
}
</script>
</body>
</html>