Bouncing Ball

by Phil Button

HTML

<div id="ballarea">
    <img id="lessonScore" src="http://test.101drums.com/scores/02_teatime.jpg" alt="Score">
    <div id="ball"></div>
</div>
<audio id="lessonTrack" controls ontimeupdate="updateProgress()">
                <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;
}

#ball
{
    border-radius: 50%;
    width: 2vw;
    height: 2vw;
    position: absolute;
    top: 1vh;
    left: 1vw;
    background-color: #000;
}

JavaScript

var audio = document.getElementById("lessonTrack");
var ball = document.getElementById("ball");
var lessonScore = document.getElementById("lessonScore");
ball.style.left = (0.071 * lessonScore.offsetWidth) + "px";
audio.load();
function updateProgress() {
  var ballarea = lessonScore.offsetWidth;
  if (audio.currentTime > (2 / 19 * audio.duration)) {
    ball.style.left = (0.071 * ballarea) + ((19 / 4 * (0.885 * ballarea)) * (audio.currentTime/audio.duration)) - (2 / 4 * (0.885 * ballarea)) + "px";
  }
}