// Javascript functions for controlling audio
-starttime = 0;
-endtime = 0;
-song = null;
-interval = null;
+var starttime = 0;
+var endtime = 0;
+var ascrollpoint = 0;
+var bscrollpoint = 0;
-// Keycodes
-spacebar = 32;
-leftarrow = 37;
-rightarrow = 39;
-seta = 65;
-setb = 66;
-cleara = 67;
-return2start = 82;
+var song, interval, scroll, body;
-howmanysecs = 10;
+// 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 (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');
if (!song.paused) {
// Set up loop
- interval = setInterval(loop, 1000);
+ interval = setInterval(loop, oneSec);
+ scroll = setInterval(scrollLyrics, scrollTime);
} // if
body.onkeydown =
if (playing) {
// Stop loop
- clearInterval(interval)
+ 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, 1000);
+ 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 == leftarrow) {
song.currentTime -= howmanysecs;
- song.play()
+ body.scrollBy(0, 50);
+ song.play();
return;
} else if (ev.keyCode == rightarrow) {
song.currentTime += howmanysecs;
+ bosy.scrollBy(0, -50);
song.play();
return;
starttime = song.currentTime;
// Translate seconds to timecode
- document.getElementById('a').innerHTML = Math.floor(starttime / 60) + ':' + Math.floor(starttime % 60);
+ 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;
- document.getElementById('b').innerHTML = Math.floor(endtime / 60) + ':' + Math.floor(endtime % 60);
+ 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;
- endtime = song.duration;
+ 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>';