From ecd3c635d8d78181bed4fa98cc6162e0b6516160 Mon Sep 17 00:00:00 2001 From: Andrew DeFaria Date: Thu, 16 Nov 2017 14:08:07 -0800 Subject: [PATCH] Added A/B looping Changed to allow setting of the A mark and the B mark. If set playback will loop between A and B. Since we are using the B key for Mark B, we changed the f (forward) and b (backward) to be left and right arrow. Also added the A and B marks under the player so you can see what you have A and B set to. Finally, updated question.mark.html to reflect changes. --- web/question.mark.html | 14 +++++++----- web/songbook.js | 50 ++++++++++++++++++++++++++++++++++-------- web/webchord.cgi | 8 +++++-- 3 files changed, 56 insertions(+), 16 deletions(-) diff --git a/web/question.mark.html b/web/question.mark.html index 13fc39b..8d593c1 100644 --- a/web/question.mark.html +++ b/web/question.mark.html @@ -22,24 +22,28 @@ Pause/Play
  • - r or up arrow + r Return to start
  • - b or left arrow + <- Rewind 10 secs
  • - f or right arrow + -> Fast forward 10 secs
  • a - Mark start + Set A Marker +
  • +
  • + b + Set B Marker
  • c - Clear start + Clear A/B loop
  • diff --git a/web/songbook.js b/web/songbook.js index 331ed31..036a4a2 100644 --- a/web/songbook.js +++ b/web/songbook.js @@ -1,21 +1,28 @@ // Javascript functions for controlling audio -starttime = null; -endtime = null; +starttime = 0; +endtime = 0; +song = null; +interval = null; // Keycodes spacebar = 32; leftarrow = 37; -uparrow = 38; rightarrow = 39; -downarrow = 40; seta = 65; -backfewsecs = 66; +setb = 66; cleara = 67; -forwardfewsecs = 70; return2start = 82; howmanysecs = 10; +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; +} // loop + window.onload = function() { song = document.getElementById('song'); @@ -23,6 +30,11 @@ window.onload = function() { endtime = song.duration; body = document.getElementsByTagName('body')[0] + if (!song.paused) { + // Set up loop + interval = setInterval(loop, 1000); + } // if + body.onkeydown = function(e) { var ev = e || event; @@ -34,6 +46,8 @@ window.onload = function() { } // if if (playing) { + // Stop loop + clearInterval(interval) song.pause(); playing = false; } else { @@ -41,13 +55,16 @@ window.onload = function() { song.currentTime = starttime } // if + // Set up loop + interval = setInterval(loop, 1000); + song.play(); playing = true; } // if e.preventDefault(); return; - } else if (ev.keyCode == return2start || ev.keyCode == uparrow) { + } else if (ev.keyCode == return2start) { if (starttime != null) { song.currentTime = starttime; } else { @@ -55,22 +72,37 @@ window.onload = function() { } // if return; - } else if (ev.keyCode == backfewsecs || ev.keyCode == leftarrow) { + } else if (ev.keyCode == leftarrow) { song.currentTime -= howmanysecs; song.play() return; - } else if (ev.keyCode == forwardfewsecs || ev.keyCode == rightarrow) { + } else if (ev.keyCode == rightarrow) { song.currentTime += howmanysecs; 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 + document.getElementById('a').innerHTML = Math.floor(starttime / 60) + ':' + Math.floor(starttime % 60); + 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); + } // if } else if (ev.keyCode == cleara) { starttime = 0; + endtime = song.duration; + + document.getElementById('a').innerHTML = 'not set'; + document.getElementById('b').innerHTML = 'not set'; return; } // if diff --git a/web/webchord.cgi b/web/webchord.cgi index a64b4c1..c9bb1e3 100755 --- a/web/webchord.cgi +++ b/web/webchord.cgi @@ -173,9 +173,13 @@ END
    $artist
    +
    +

    Mark A: + not set + Mark B: + not set

    -- 2.17.1