web/songbook.js

   1 // Javascript functions for controlling audio
   2 var starttime    = 0;
   3 var endtime      = 0;
   4 var ascrollpoint = 0;
   5 var bscrollpoint = 0;
   6
   7 var song, interval, scroll, body;
   8
   9 // Keycodes
  10 const spacebar       = 32;
  11 const leftarrow      = 37;
  12 const rightarrow     = 39;
  13 const seta           = 65;
  14 const setb           = 66;
  15 const cleara         = 67;
  16 const return2start   = 82;
  17
  18 const howmanysecs = 10;
  19 const scrollby    = 1;
  20 const oneSec      = 1000;
  21 const scrollTime  = 400;
  22
  23 function loop() {
  24   // If endtime is not set then we can't loop
  25   if (endtime == 0) return;
  26
  27   // if we're past the endtime then it's time to start back at the A marker
  28   if (song.currentTime > endtime) {
  29     song.currentTime = starttime;
  30     if (ascrollpoint != 0) window.scrollTo(0, ascrollpoint);
  31   } // if
  32 } // loop
  33
  34 function scrollLyrics(x, y) {
  35   window.scrollBy(0, scrollby);
  36 } // scrollLyrics
  37
  38 window.onload = function() {
  39   song = document.getElementById('song');
  40
  41   starttime = song.currentTime;
  42   endtime   = song.duration;
  43   body      = document.getElementsByTagName('body')[0]
  44
  45   if (!song.paused) {
  46    // Set up loop
  47    interval = setInterval(loop, oneSec);
  48    scroll   = setInterval(scrollLyrics, scrollTime);
  49   } // if
  50
  51   body.onkeydown =
  52     function(e) {
  53       var ev = e || event;
  54       if (ev.keyCode == spacebar) {
  55         if (song.paused) {
  56           playing = false;
  57         } else {
  58           playing = true;
  59         } // if
  60
  61         if (playing) {
  62           // Stop loop
  63           clearInterval(interval);
  64           clearInterval(scroll);
  65
  66           song.pause();
  67           playing = false;
  68         } else {
  69           if (ascrollpoint != 0) {
  70             window.scrollTo(0, ascrollpoint);
  71           } else {
  72             window.scrollTo(0, 0);
  73           } // if
  74
  75           if (starttime != 0) {
  76             song.currentTime = starttime;
  77           } // if
  78
  79           // Set up loop
  80           interval = setInterval(loop, oneSec);
  81           scroll   = setInterval(scrollLyrics, scrollTime);
  82
  83           if (ascrollpoint != 0) window.scrollTo(0, ascrollpoint);
  84
  85           song.play();
  86
  87           playing = true;
  88         } // if
  89
  90         e.preventDefault();
  91
  92         return;
  93       } else if (ev.keyCode == return2start) {
  94         if (starttime != 0) {
  95           song.currentTime = starttime;
  96         } else {
  97           song.currentTime = 0;
  98           body.scrollTo(0,0);
  99         } // if
 100
 101         return;
 102       } else if (ev.keyCode == leftarrow) {
 103         song.currentTime -= howmanysecs;
 104         body.scrollBy(0, 50);
 105         song.play();
 106
 107         return;
 108       } else if (ev.keyCode == rightarrow) {
 109         song.currentTime += howmanysecs;
 110         bosy.scrollBy(0, -50);
 111         song.play();
 112
 113         return;
 114       } else if (ev.keyCode == seta) {
 115         // Reset endtime if setting a new A marker
 116         if (endtime != song.duration) endtime = song.duration;
 117
 118         starttime = song.currentTime;
 119
 120         // Translate seconds to timecode
 121         secs = Math.floor(starttime % 60);
 122         if (secs < 10) secs = '0' + secs;
 123
 124         document.getElementById('a').innerHTML =
 125           Math.floor(starttime / 60) + ':' + secs;
 126
 127         ascrollpoint = window.pageYOffset;
 128
 129         return;
 130       } else if (ev.keyCode == setb) {
 131         if (song.currentTime > starttime) {
 132           endtime = song.currentTime;
 133           song.currentTime = starttime;
 134
 135           // Translate seconds to timecode
 136           secs = Math.floor(endtime % 60);
 137           if (secs < 10) secs = '0' + secs;
 138
 139           document.getElementById('b').innerHTML =
 140               Math.floor(endtime / 60) + ':' + secs;
 141
 142           bscrollpoint = window.pageYOffset;
 143         } // if
 144       } else if (ev.keyCode == cleara) {
 145         starttime    = 0;
 146         endtime      = song.duration;
 147         ascrollpoint = 0;
 148         bscrollpoint = 0;
 149
 150         document.getElementById('a').innerHTML = '<font color=#666><i>not set</i></font>';
 151         document.getElementById('b').innerHTML = '<font color=#666><i>not set</i></font>';
 152
 153         return;
 154       } // if
 155     } // function
 156   }  // getElementByTagName