Bouncing Ball

by Phil Button

HTML

<div id="ballarea">
    <img id="lessonScore" src="http://test.101drums.com/scores/02_teatime.jpg" alt="Score"onload="ballStartPosition()">
    <div id="ball"></div>
</div>
<audio id="lessonTrack" controls>
                <source id="mp3" src="http://test.101drums.com/tracks/mp3/02_teatime.mp3" type="audio/mpeg">
                <source id="ogg" src="" type="audio/ogg">
                Your browser does not support the audio player.
</audio>

CSS

#lessonScore
{
  width: 100%;
}
#ballarea
{
    position: relative;
}

@-webkit-keyframes bounce  {
    0% {transform: translateY(2vh);}
    /*5% {transform: translateY(1.9vh);}
    12.5% {transform: translateY(1.8vh);}
    25% {transform: translateY(1.5vh);}*/
    50% {transform: translateY(0px);}
    /*75% {transform: translateY(1.5vh);}
    87.5% {transform: translateY(1.8vh);}
    95% {transform: translateY(1.9vh);}*/
    100% {transform: translateY(2vh);}
}

#ball
{
    border-radius: 50%;
    border : 0.15vw solid #000940;
    width: 0.7vw;
    height: 0.7vw;
    position: absolute;
    top: 1vh;
    left: 1vw;
    background-color: #b3d9ff;
}

JavaScript

var audio = document.getElementById("lessonTrack");
var ball = document.getElementById("ball");
var lessonScore = document.getElementById("lessonScore");
audio.load();
audio.onplay = function() {
progressTimer = window.setInterval(updateBall, 10);
  bounceTimer = window.setInterval(bounce, 10);
};

function ballStartPosition() {
  var box = lessonScore.getBoundingClientRect();
  var w = box.width;
  var h = box.bottom - box.top;
    ball.style.top = (0.01 * h) + "px";
    ball.style.left = (0.067 * w) + "px";
}
function updateBall() {
  var box = lessonScore.getBoundingClientRect();
  var w = box.width;
  var h = box.height;
  var c = audio.currentTime;
  var d = audio.duration;
   if (c < (0.100 * d)) {
      ball.style.top = (0.01 * h) + "px";
      ball.style.left = (0.067 * w) + "px";
    }
    else if (c > (0.100 * d) && c < (0.311 * d)) {
      ball.style.top = (0.01 * h) + "px";
      ball.style.left = ((4.28 * w * c) / d ) - (0.37 * w) + "px";
    }
    else if (c > (0.311 * d) && c < (0.521 * d)) {
      ball.style.top = (0.213 * h) + "px";
      ball.style.left = ((4.28 * w * c) / d ) - (1.27 * w) + "px";
    }
    else if (c > (0.521 * d) && c < (0.732 * d)) {
      ball.style.top = (0.416 * h) + "px";
      ball.style.left = ((4.28 * w * c) / d ) - (2.17 * w) + "px";
    }
    else if (c > (0.732 * d) && c < (0.942 * d)) {
      ball.style.top = (0.619 * h) + "px";
      ball.style.left = ((4.28 * w * c) / d ) - (3.07 * w) + "px";
    }
    else if (c > (0.942 * d) && c < (0.998 * d)) {
      ball.style.top = (0.822 * h) + "px";
      ball.style.left = ((4.28 * w * c) / d ) - (3.98 * w) + "px";
    }
    else if (c > (0.998 * d)){
      ball.style.top = (0.01 * h) + "px";
      ball.style.left = (0.067 * w) + "px";

    }
    audio.ended = true;
    if (audio.ended === true) {
            clearInterval(progressTimer);
  clearInterval(bounceTimer);
    }
}
function bounce() {
  var beat = audio.duration / 76;
  var strbeat = beat.toString();
  strbeat...