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.

diff --git a/web/question.mark.html b/web/question.mark.html
index 13fc39b..8d593c1 100644 (file)
--- a/web/question.mark.html
+++ b/web/question.mark.html
@@ -22,24 +22,28 @@
             <span class="help-key-def">Pause/Play</span>
           </li>
           <li class="help-key-unit">
             <span class="help-key-def">Pause/Play</span>
           </li>
           <li class="help-key-unit">

-            <kbd class="help-key"><span>r or up arrow</span></kbd>
+            <kbd class="help-key"><span>r</span></kbd>

             <span class="help-key-def">Return to start</span>
           </li>
           <li class="help-key-unit">
             <span class="help-key-def">Return to start</span>
           </li>
           <li class="help-key-unit">

-            <kbd class="help-key"><span>b or left arrow</span></kbd>
+            <kbd class="help-key"><span><-</span></kbd>

             <span class="help-key-def">Rewind 10 secs</span>
           </li>
           <li class="help-key-unit">
             <span class="help-key-def">Rewind 10 secs</span>
           </li>
           <li class="help-key-unit">

-            <kbd class="help-key"><span>f or right arrow</span></kbd>
+            <kbd class="help-key"><span>-></span></kbd>

             <span class="help-key-def">Fast forward 10 secs</span>
           </li>
           <li class="help-key-unit">
             <kbd class="help-key"><span>a</span></kbd>
             <span class="help-key-def">Fast forward 10 secs</span>
           </li>
           <li class="help-key-unit">
             <kbd class="help-key"><span>a</span></kbd>

-            <span class="help-key-def">Mark start</span>
+            <span class="help-key-def">Set A Marker</span>
+          </li>
+          <li class="help-key-unit">
+            <kbd class="help-key"><span>b</span></kbd>
+            <span class="help-key-def">Set B Marker</span>

           </li>
           <li class="help-key-unit">
             <kbd class="help-key"><span>c</span></kbd>
           </li>
           <li class="help-key-unit">
             <kbd class="help-key"><span>c</span></kbd>

-            <span class="help-key-def">Clear start</span>
+            <span class="help-key-def">Clear A/B loop</span>

           </li>
 
         </ul><!-- .help-list -->
           </li>
 
         </ul><!-- .help-list -->

diff --git a/web/songbook.js b/web/songbook.js
index 331ed31..036a4a2 100644 (file)
--- a/web/songbook.js
+++ b/web/songbook.js
@@ -1,21 +1,28 @@
 // Javascript functions for controlling audio
 // Javascript functions for controlling audio

-starttime = null;
-endtime   = null;
+starttime = 0;
+endtime   = 0;
+song      = null;
+interval  = null;

 
 // Keycodes
 spacebar       = 32;
 leftarrow      = 37;
 
 // Keycodes
 spacebar       = 32;
 leftarrow      = 37;

-uparrow        = 38;

 rightarrow     = 39;
 rightarrow     = 39;

-downarrow      = 40;

 seta           = 65;
 seta           = 65;

-backfewsecs    = 66;
+setb           = 66;

 cleara         = 67;
 cleara         = 67;

-forwardfewsecs = 70;

 return2start   = 82;
 
 howmanysecs    = 10;
 
 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');
 
 window.onload = function() {
   song = document.getElementById('song');
 


@@ -23,6 +30,11 @@ window.onload = function() {
   endtime   = song.duration;
   body      = document.getElementsByTagName('body')[0]
 
   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;
   body.onkeydown = 
     function(e) {
       var ev = e || event;


@@ -34,6 +46,8 @@ window.onload = function() {
         } // if
 
         if (playing) {
         } // if
 
         if (playing) {

+          // Stop loop
+          clearInterval(interval)

           song.pause();
           playing = false;
         } else {
           song.pause();
           playing = false;
         } else {


@@ -41,13 +55,16 @@ window.onload = function() {
             song.currentTime = starttime
           } // if
 
             song.currentTime = starttime
           } // if
 

+          // Set up loop
+          interval = setInterval(loop, 1000);
+

           song.play();
           playing = true;
         } // if
 
         e.preventDefault();
         return;
           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 {
         if (starttime != null) {
           song.currentTime = starttime;
         } else {


@@ -55,22 +72,37 @@ window.onload = function() {
         } // if
 
         return;
         } // if
 
         return;

-      } else if (ev.keyCode == backfewsecs || ev.keyCode == leftarrow) {
+      } else if (ev.keyCode == leftarrow) {

         song.currentTime -= howmanysecs;
         song.play()
 
         return;
         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) {
         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;
 
         starttime = song.currentTime;
 

+        // Translate seconds to timecode
+        document.getElementById('a').innerHTML = Math.floor(starttime / 60) + ':' + Math.floor(starttime % 60);
+

         return;
         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;
       } else if (ev.keyCode == cleara) {
         starttime = 0;

+        endtime   = song.duration;
+
+        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
 
         return;
       } // if

diff --git a/web/webchord.cgi b/web/webchord.cgi
index a64b4c1..c9bb1e3 100755 (executable)
--- a/web/webchord.cgi
+++ b/web/webchord.cgi
@@ -173,9 +173,13 @@ END
           <div id="artist"><a href="/songbook/displayartist.php?artist=$artist">$artist</a></div></td>
       <td align="right" width="300px">
         <audio id="song" controls autoplay style="padding:0; margin:0">
           <div id="artist"><a href="/songbook/displayartist.php?artist=$artist">$artist</a></div></td>
       <td align="right" width="300px">
         <audio id="song" controls autoplay style="padding:0; margin:0">

-          <source src="http://defaria.com/Media/$title.mp3" style="padding:0; margin:0" type='audio/mp3'>
+          <source src="https://defaria.com/Media/$title.mp3" style="padding:0; margin:0" type='audio/mp3'>

           Your user agent does not support the HTML5 Audio element.
           Your user agent does not support the HTML5 Audio element.

-        </audio>
+        </audio><br>
+        <p align="center" <font size=-1><b>Mark A:</b></font>
+                          <font size=-1 color=#666><span id="a"><i>not set</i></span></font>
+                          <font size=-1><b>Mark B:</b></font>
+                          <font size=-1 color=#666><span id="b">not set</span></font></p>

       </td>
     </tr>
   </tbody>
       </td>
     </tr>
   </tbody>