Use a more advanced library for chant playback

js/tones.js

@@ -71,6 +71,13 @@
             }
         },
 
+        getNoteName: function(pitch, transpose) {
+            pitch = pitch.transpose(transpose);
+            return this.octave[pitch.step] + pitch.octave;
+        },
+
+        octave: ["c","c#","d","d#","e","f","f#","g","g#","a","a#","b"],
+
         octaveMap: {
             "c": 0,
             "c#": 1,

propers.html

@@ -14,6 +14,7 @@
   <script src="jquery.min.js" type="text/javascript"></script>
   <script src="jquery.autosize-min.js"></script>
   <script src="jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
+  <script src="js/Tone.min.js"></script>
   <script src="util.js"></script>
   <script src="psalmtone.js"></script>
   <script src="js/tones.js"></script>

psalmtone.html

@@ -12,6 +12,7 @@
   <link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,700,700i&text=:;,()[]?.%22'%E2%80%A0*QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnmáéíóúýäëæǽœœ%CC%81/1234567890-" rel="stylesheet">
   <script src="jquery.min.js" type="text/javascript"></script>
   <script src="jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
+  <script src="js/Tone.min.js"></script>
   <script src="js/tones.js"></script>
   <script src="util.js" type="text/javascript"></script>
   <script src="psalmtone.js" type="text/javascript"></script>

readings.html

@@ -16,6 +16,7 @@
   <link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,700,700i&text=:;,()[]?.%22'%E2%80%A0*QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnmáéíóúýäëæǽœœ%CC%81/1234567890-" rel="stylesheet">
   <script src="jquery.min.js" type="text/javascript"></script>
   <script src="jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
+  <script src="js/Tone.min.js"></script>
   <script src="js/tones.js"></script>
   <script src="util.js" type="text/javascript"></script>
   <script src="psalmtone.js" type="text/javascript"></script>

transcriber.html

@@ -10,6 +10,7 @@
   <link rel="stylesheet" type="text/css" href="style.css" />
   <script src="jquery.min.js" type="text/javascript"></script>
   <script src="jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
+  <script src="js/Tone.min.js"></script>
   <script src="js/tones.js"></script>
   <script src="util.js" type="text/javascript"></script>
   <script src="psalmtone.js"></script>

util.js

@@ -733,20 +733,43 @@ function calculateDefaultStartPitch(startPitch, lowPitch, highPitch) {
 }
 
 if(typeof window=='object') (function(window) {
+  var synth = new Tone.Synth({
+    "oscillator" : {
+        type: "custom",
+        partials: [0.3,0.03,0.05]
+      },
+      "envelope" : {
+        "attack" : 0.05,
+        "decay" : 0.3,
+        "sustain" : 0.4,
+        "release" : 0.8,
+      }
+  }).toMaster();
   var timeoutNextNote, transpose = 0;
-  window.tempo=165;
+  Tone.Transport.bpm.value = 165;
   var _isPlaying=false;
-  window.setTempo = function(newTempo) { tempo = newTempo || 165; }
-  window.setRelativeTempo = function(delta) { tempo += delta; if(tempo <= 0) tempo = 165; return tempo; }
+  window.setTempo = function(newTempo) { Tone.Transport.bpm.value = newTempo || 165; }
+  window.setRelativeTempo = function(delta) {
+    var state = Tone.Transport.state;
+    Tone.Transport.stop();
+    var val = Tone.Transport.bpm.value = Math.round(Math.max(0, Tone.Transport.bpm.value + delta)) || 165;
+    if(state === 'started') {
+      Tone.Transport.clear(timeoutNextNote);
+      Tone.Transport.start();
+      timeoutNextNote = Tone.Transport.scheduleOnce(playNextNote, '+8n');
+    }
+    return val;
+  }
   var noteElem, syllable;
   window.isPlayingChant = function() {
     return _isPlaying;
   }
   window.playScore = function(score, firstPitch, startNote){
+    Tone.Transport.clear(timeoutNextNote);
+    Tone.Transport.start();
     if($('#mediaControls').length == 0) {
       $(document.body).append("<div id='mediaControls'><div class='btn-group'><button class='btn btn-sm btn-primary play-pause'><span class='glyphicon glyphicon-pause'></span></button><button class='btn btn-sm btn-primary step-forward'><span class='glyphicon glyphicon-step-forward'></span></button><button class='btn btn-sm btn-default with-next tempo-minus' style='padding-right:10px'><span class='glyphicon glyphicon-minus'></span></button><div class='btn btn-sm btn-default with-next' style='padding-left:2px;padding-right:2px'><span id='tempo-number'>165</span> BPM</div><button class='btn btn-sm btn-default tempo-plus' style='padding-left:10px'><span class='glyphicon glyphicon-plus'></span></button><button class='btn btn-sm btn-danger stop'><span class='glyphicon glyphicon-stop'></span></button></div></div>");
     }
-    window.clearTimeout(timeoutNextNote);
     $('#mediaControls').removeClass('offscreen');
     if(syllable) {
       syllable.classList.remove('active');
@@ -770,9 +793,8 @@ if(typeof window=='object') (function(window) {
     if(firstPitch.toInt) firstPitch = firstPitch.toInt();
     transpose = firstPitch - notes[0].pitch.toInt();
     _isPlaying = true;
-    function playNextNote(supressTimeout){
-      window.clearTimeout(timeoutNextNote);
-      if(supressTimeout) timeoutNextNote = null;
+    function playNextNote(time){
+      console.info(Tone.Transport.seconds, time, time - Tone.context.currentTime);
       var note = notes[noteId];
       if(noteElem) noteElem.classList.remove('active','porrectus-left','porrectus-right');
       if(originalSvg != score.svg || note == null) {
@@ -786,7 +808,7 @@ if(typeof window=='object') (function(window) {
       }
       var duration = 1;
       if(note.constructor != exsurge.Note) {
-        while(note.constructor != exsurge.Note && (!note.isDivider || note.constructor === exsurge.QuarterBar || supressTimeout)) {
+        while(note.constructor != exsurge.Note && (!note.isDivider || note.constructor === exsurge.QuarterBar)) {
           if(!(note = notes[++noteId])) return;
         }
         if(note.isDivider) {
@@ -835,23 +857,26 @@ if(typeof window=='object') (function(window) {
         var nextNoteNeume = nextNote && nextNote.svgNode.parentNode.parentNode.source;
         var nextNoteIsForSameSyllable = nextNote && (noteNeume == nextNoteNeume || nextNoteNeume.lyrics.length == 0);
         var nextNoteIsSamePitchDifferentSyllable = !nextNoteIsForSameSyllable && nextNote && note.pitch.toInt() == nextNote.pitch.toInt();
-        var release = nextNoteIsDivider? 500 : tones.attack*2;
-        var durationMS = Math.max(0, duration * 60000 / tempo - tones.attack - (nextNoteIsForSameSyllable? 0 : 150));
-        var options = { length: durationMS, release: release };
-        console.info(release);
-        tones.play(note.pitch, options, transpose);
+        // var durationMS = Math.max(0, duration * 60000 / Tone.Transport.bpm.value - (nextNoteIsForSameSyllable? 0 : 150));
+        // var options = { length: durationMS };
+        // tones.play(note.pitch, options, transpose);
+        var noteName = tones.getNoteName(note.pitch, transpose);
+        synth.triggerAttackRelease(noteName, new Tone.Time("4n").toSeconds()*duration, time);
       }
       ++noteId;
       if(noteId >= notes.length) _isPlaying = false;
-      if(!supressTimeout) timeoutNextNote = window.setTimeout(playNextNote, duration * 60000 / tempo);
+      if(Tone.Transport.state != 'started') return;
+      timeoutNextNote = Tone.Transport.scheduleOnce(playNextNote, '+' + (new Tone.Time("4n").toSeconds()*duration));
     };
-    timeoutNextNote = window.setTimeout(playNextNote);
+    timeoutNextNote = Tone.Transport.scheduleOnce(playNextNote);
     window.playNextNote = playNextNote;
     window.playPauseScore = function() {
       if(timeoutNextNote) {
-        window.clearTimeout(timeoutNextNote);
+        Tone.Transport.clear(timeoutNextNote);
+        Tone.Transport.pause();
         timeoutNextNote = null;
       } else {
+        Tone.Transport.start();
         playNextNote();
         return true;
       }
@@ -866,6 +891,7 @@ if(typeof window=='object') (function(window) {
     }
   };
   window.stopScore = function(){
+    Tone.Transport.stop();
     _isPlaying=false;
     $('#mediaControls').addClass('offscreen');
   }
@@ -1397,7 +1423,8 @@ if(typeof $=='function') $(function($) {
     $(this).find('.glyphicon').removeClass('glyphicon-play glyphicon-pause').addClass('glyphicon-' + (playing? 'pause' : 'play'));
   }).on('click', '#mediaControls .btn.step-forward', function(e) {
     e.stopPropagation();
-    playNextNote(true);
+    Tone.Transport.pause();
+    playNextNote();
     $('#mediaControls .btn.play-pause .glyphicon').removeClass('glyphicon-play glyphicon-pause').addClass('glyphicon-play');
   }).on('click', '#mediaControls .btn.tempo-minus, #mediaControls .btn.tempo-plus', function(e) {
     e.stopPropagation();