display remaining time when playing samples

diff --git a/nanofun.js b/nanofun.js
index 3fd7203ae2a86a4c8bf013364d71b9258e72edc6..9244d0b11f54d4fb251016acf81df049ffb58a59 100644 (file)
--- a/nanofun.js
+++ b/nanofun.js
@@ -296,6 +296,7 @@ var nanofun = function() {
   self.initAudio = function() {
     self.sample_buffers = Array(16);
     self.samples = Array(16);
+    self.sample_start_times = Array(16);
     self.audioCtx = new window.AudioContext();
     self.touchGainNodes = Array(16);
     self.masterGainNode = self.audioCtx.createGain();
@@ -350,6 +351,7 @@ var nanofun = function() {
           var sample_idx = this.sample_idx;
           self.audioCtx.decodeAudioData(this.result, function(buffer) {
             sample_buffers[sample_idx] = buffer;
+            $nanotouch.find('span.duration').data('duration', buffer.duration);
             $nanotouch.find('span.duration').text(parseInt(buffer.duration) + 's');
             $nanotouch.removeClass('error').addClass('loaded');
           }, function(e) {
@@ -414,6 +416,20 @@ var nanofun = function() {
       var touchIdx = parseInt($(this).parent().data('touch'));
       self.touchGainNodes[touchIdx].gain.value = fraction * fraction;
     });
+
+    self.time_interval_id = setInterval(function() {
+      for (var i=0; i<16; i++) {
+        var sample = self.samples[i];
+        if (sample !== undefined) {
+          var start_time = self.sample_start_times[i];
+          var current_position = sample.context.currentTime - start_time;
+          var nanotouch = $('.nanotouch')[i];
+          var duration = $(nanotouch).find('span.duration');
+          var total_duration = parseFloat($(duration).data('duration'))
+          $(duration).text(parseInt(total_duration - current_position) + 's');
+        }
+     }
+    }, 250);
   }
 
   self.startSample = function(sample_idx) {
@@ -432,9 +448,12 @@ var nanofun = function() {
         sample.buffer = sample_buffer;
         sample.onended = function() {
           $(nanotouch).removeClass('playing');
+          var duration = $(nanotouch).find('span.duration');
+          $(duration).text(parseInt($(duration).data('duration')) + 's');
           self.samples[sample_idx] = undefined;
         }
         $(nanotouch).addClass('playing');
+        self.sample_start_times[sample_idx] = sample.context.currentTime;
         sample.start(0);
       }
     }