-// Javascript functions for controling audio
-starttime = null;
-endtime = null;
-
-spacebar = 32;
-return2start = 82;
-backfewsecs = 66;
-forwardfewsecs = 70;
-seta = 65;
-cleara = 67;
-howmanysecs = 10;
+// Javascript functions for controlling audio
+var starttime = 0;
+var endtime = 0;
+var ascrollpoint = 0;
+var bscrollpoint = 0;
+
+var song, interval, scroll, body;
+
+// Keycodes
+const spacebar = 32;
+const leftarrow = 37;
+const rightarrow = 39;
+const seta = 65;
+const setb = 66;
+const cleara = 67;
+const return2start = 82;
+
+const howmanysecs = 10;
+const scrollby = 1;
+const oneSec = 1000;
+const scrollTime = 400;
+
+function loop() {
+ // If endtime is not set then we can't loop
+ if (endtime == 0) return;
+
+ // if we're past the endtime then it's time to start back at the A marker
+ if (song.currentTime > endtime) {
+ song.currentTime = starttime;
+ if (ascrollpoint != 0) window.scrollTo(0, ascrollpoint);
+ } // if
+} // loop
+
+function scrollLyrics(x, y) {
+ window.scrollBy(0, scrollby);
+} // scrollLyrics
window.onload = function() {
song = document.getElementById('song');
endtime = song.duration;
body = document.getElementsByTagName('body')[0]
+ if (!song.paused) {
+ // Set up loop
+ interval = setInterval(loop, oneSec);
+ scroll = setInterval(scrollLyrics, scrollTime);
+ } // if
+
body.onkeydown =
function(e) {
var ev = e || event;
} // if
if (playing) {
+ // Stop loop
+ clearInterval(interval);
+ clearInterval(scroll);
+
song.pause();
playing = false;
} else {
+ if (ascrollpoint != 0) {
+ window.scrollTo(0, ascrollpoint);
+ } else {
+ window.scrollTo(0, 0);
+ } // if
+
if (starttime != 0) {
- song.currentTime = starttime
+ song.currentTime = starttime;
} // if
+ // Set up loop
+ interval = setInterval(loop, oneSec);
+ scroll = setInterval(scrollLyrics, scrollTime);
+
+ if (ascrollpoint != 0) window.scrollTo(0, ascrollpoint);
+
song.play();
+
playing = true;
} // if
e.preventDefault();
+
return;
} else if (ev.keyCode == return2start) {
- if (starttime != null) {
+ if (starttime != 0) {
song.currentTime = starttime;
} else {
song.currentTime = 0;
+ body.scrollTo(0,0);
} // if
return;
- } else if (ev.keyCode == backfewsecs) {
+ } else if (ev.keyCode == leftarrow) {
song.currentTime -= howmanysecs;
- song.play()
+ body.scrollBy(0, 50);
+ song.play();
return;
- } else if (ev.keyCode == forwardfewsecs) {
+ } else if (ev.keyCode == rightarrow) {
song.currentTime += howmanysecs;
+ bosy.scrollBy(0, -50);
song.play();
return;
} else if (ev.keyCode == seta) {
+ // Reset endtime if setting a new A marker
+ if (endtime != song.duration) endtime = song.duration;
+
starttime = song.currentTime;
+ // Translate seconds to timecode
+ secs = Math.floor(starttime % 60);
+ if (secs < 10) secs = '0' + secs;
+
+ document.getElementById('a').innerHTML =
+ Math.floor(starttime / 60) + ':' + secs;
+
+ ascrollpoint = window.pageYOffset;
+
return;
+ } else if (ev.keyCode == setb) {
+ if (song.currentTime > starttime) {
+ endtime = song.currentTime;
+ song.currentTime = starttime;
+
+ // Translate seconds to timecode
+ secs = Math.floor(endtime % 60);
+ if (secs < 10) secs = '0' + secs;
+
+ document.getElementById('b').innerHTML =
+ Math.floor(endtime / 60) + ':' + secs;
+
+ bscrollpoint = window.pageYOffset;
+ } // if
} else if (ev.keyCode == cleara) {
- starttime = 0;
+ starttime = 0;
+ endtime = song.duration;
+ ascrollpoint = 0;
+ bscrollpoint = 0;
+
+ document.getElementById('a').innerHTML = '<font color=#666><i>not set</i></font>';
+ document.getElementById('b').innerHTML = '<font color=#666><i>not set</i></font>';
return;
} // if