X-Git-Url: https://defaria.com/gitweb/?a=blobdiff_plain;ds=sidebyside;f=web%2Fsongbook.js;h=5d0ec0f0c72351d903cab33e3b2cba2fb8e80a7e;hb=2b4c26166537b14bf1ceb02a24d67c12b41c83ae;hp=331ed31e2f3815bde61d3156f41f5cab9713fe19;hpb=78a912f14501061e02eeebd688ddaa9743a235f9;p=songbook.git
diff --git a/web/songbook.js b/web/songbook.js
index 331ed31..5d0ec0f 100644
--- a/web/songbook.js
+++ b/web/songbook.js
@@ -1,20 +1,39 @@
// Javascript functions for controlling audio
-starttime = null;
-endtime = null;
+var starttime = 0;
+var endtime = 0;
+var ascrollpoint = 0;
+var bscrollpoint = 0;
+
+var song, interval, scroll, body;
// Keycodes
-spacebar = 32;
-leftarrow = 37;
-uparrow = 38;
-rightarrow = 39;
-downarrow = 40;
-seta = 65;
-backfewsecs = 66;
-cleara = 67;
-forwardfewsecs = 70;
-return2start = 82;
-
-howmanysecs = 10;
+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');
@@ -23,6 +42,12 @@ window.onload = function() {
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;
@@ -34,43 +59,96 @@ window.onload = function() {
} // 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 || ev.keyCode == uparrow) {
- if (starttime != null) {
+ } else if (ev.keyCode == return2start) {
+ if (starttime != 0) {
song.currentTime = starttime;
} else {
song.currentTime = 0;
+ body.scrollTo(0,0);
} // if
return;
- } else if (ev.keyCode == backfewsecs || ev.keyCode == leftarrow) {
+ } else if (ev.keyCode == leftarrow) {
song.currentTime -= howmanysecs;
- song.play()
+ body.scrollBy(0, 50);
+ song.play();
return;
- } else if (ev.keyCode == forwardfewsecs || ev.keyCode == rightarrow) {
+ } 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 = 'not set';
+ document.getElementById('b').innerHTML = 'not set';
return;
} // if