Sprite slaved to audio
by Soviut
HTML
<audio id="audio" autoplay="autoplay" controls="controls" loop="true">
<source src="https://dl.dropboxusercontent.com/u/666980/dj_en_-_vector.mp3"/>
</audio>
<div id="time">0</div>
<div id="anim"></div>
CSS
#anim {
width: 64px;
height: 64px;
background: url(https://github.com/otternq/CS428Project/diff_blob/ccf36da8d0ec5cfc5312b1623f993df85587fb8e/src/public/data/sprite/gripe_run_right.png?raw=true);
}
JavaScript
var audio = $('#audio').get(0);
var display = $('#time');
var anim = $('#anim');
var time = 0;
var frame = 0;
var size = 64;
setInterval(function() {
time = audio.currentTime;
display.text(time);
frame = Math.floor(time);
offset = -frame * size;
anim.css('background-position', offset + 'px top');
}, 30);