Show the waveform as well

abarbu · May 7, 2020 · f2604bc · f2604bc
1 parent 95c1bb4
commit f2604bc
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 2 deletions.
diff --git a/public/gui.css b/public/gui.css
@@ -36,13 +36,20 @@ body {
   z-index: 2;
 }
 
-#d3 {
+#waveform {
   position: absolute;
   left: 0px;
   right: 0px;
   z-index: 3;
 }
 
+#d3 {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  z-index: 4;
+}
+
 *.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;

diff --git a/public/gui.html b/public/gui.html
@@ -104,6 +104,7 @@ <h3></h3>
         <div id="container-wrapper">
           <div id="container">
             <img class="img" id="spectrogram" alt="" style="height: 90%; width: 100%;" />
+            <canvas id="waveform"></canvas>
             <canvas id="canvas"></canvas>
             <svg id="d3" preserveAspectRatio="none">
               <defs>

diff --git a/public/gui.ts b/public/gui.ts
@@ -8,6 +8,39 @@
 // TODO Maybe test for audio somehow before the person is qualified for the HIT
 // TODO If we haven't loaded in 30 seconds, do something about it
 
+function drawWaveformFromBuffer(width: number, height: number, shift: number, buffer: AudioBuffer) {
+    var data = buffer.getChannelData(0);
+    var step = Math.ceil(data.length / width);
+    var amp = height / 2;
+    let normalize = Math.max(Math.abs(_.min(data)!), Math.abs(_.max(data)!))
+    let offset = _.mean(data)
+    waveformCtx.fillStyle = 'rgba(255, 255, 255, 0.9)'
+    for (var i = 0; i < width; i++) {
+        var min = 1.0;
+        var max = -1.0;
+        var datum
+        for (var j = 0; j < step; j++) {
+            datum = data[(i * step) + j];
+            if (datum < min)
+                min = datum;
+            if (datum > max)
+                max = datum;
+        }
+        min = (min - offset) / normalize
+        max = (max - offset) / normalize
+        if (!_.isUndefined(datum)) {
+            waveformCtx.fillRect(i, shift + (min * amp), 1, ((max - min) * amp));
+        }
+    }
+}
+
+function drawWaveform() {
+    waveformCtx.clearRect(0, 0, waveformCanvas.width, waveformCanvas.height)
+    if (buffers[BufferType.normal]) {
+        drawWaveformFromBuffer(waveformCanvas.width, waveformCanvas.height * 0.1, waveformCanvas.height * 0.95, buffers[BufferType.normal]!)
+    }
+}
+
 function heightBottom(isReference: boolean) {
     if (splitHeight) {
         if (isReference) {
@@ -35,7 +68,7 @@ function heightTop(isReference: boolean) {
 function heightText(isReference: boolean) {
     if (splitHeight) {
         if (isReference) {
-            return '98%'
+            return '99%'
         } else {
             return '47%'
         }
@@ -75,6 +108,9 @@ function resizeCanvas() {
     viewer_border = 0
     canvas.width = viewer_width
     canvas.height = viewer_height
+    waveformCanvas.width = viewer_width
+    waveformCanvas.height = viewer_height
+    drawWaveform()
     $('#d3')
         .attr('width', viewer_width)
         .attr('height', viewer_height + viewer_border)
@@ -1340,6 +1376,7 @@ function reload(segmentName: null | string) {
                 function(audioBuffer) {
                     buffers['normal'] = audioBuffer
                     setup(buffers['normal'])
+                    drawWaveform()
                 },
                 onError
             )

diff --git a/public/state.ts b/public/state.ts
@@ -12,6 +12,9 @@ var viewer_border = 0
 const canvas = <HTMLCanvasElement>$('#canvas')[0]!
 const ctx = canvas.getContext('2d')!
 
+const waveformCanvas = <HTMLCanvasElement>$('#waveform')[0]!
+const waveformCtx = waveformCanvas.getContext('2d')!
+
 var endTime = 100000 // infinity seconds..
 
 var context: AudioContext | null = null