Spec and waveform style

Mattk70 · Jan 1, 2020 · a199ab6 · a199ab6
1 parent 5221271
commit a199ab6
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -76,4 +76,5 @@ npm install audio-loader
 npm install audio-resampler
 npm install array-normalize
 npm install wavesurfer.js
+npm install colormap
 ```
diff --git a/index.html b/index.html
@@ -56,19 +56,24 @@
   </nav>
 
   <!-- Load audio file hint -->
-  <div class="d-flex h-85 justify-content-center align-items-center" id="loadFileHint">
-    <p class="lead justify-content-center" id="loadFileHintText">Load an audio file for analysis by clicking</br>on <i>File > Open audio file</i> in the top menu.</p>
-    <div class="d-none spinner-border text-secondary" role="status" id="loadFileHintSpinner"></div>
-  </div>
-
-  <!-- Waveform view -->
-  <div class="" id="waveformContainer"></div>
+  <div class="d-flex h-85 flex-column align-items-center justify-content-center" id="loadFileHint">
+    <div class="row">
+      <p class="lead justify-content-center" id="loadFileHintText">Load an audio file for analysis by clicking</br>on <i>File > Open audio file</i> in the top menu.</p>
+    </div>
+    <div class="row">
+      <div class="d-none spinner-border text-secondary" role="status" id="loadFileHintSpinner"></div>
+    </div>
+    <div class="row"><p class="d-none lead" id="loadFileHintLog"></p> </div>       
+  </div>  
 
   <!-- Spectrogram view -->
   <div class="d-none h-33" id="specContainer" onclick="WAVESURFER.playPause();"></div>
 
+  <!-- Waveform view -->
+  <div class="" id="waveformContainer"></div>
+
   <!-- Controls view -->
-  <div class="container-fluid bg-dark text-white d-none" style="height: 5px;" id="controlsWrapper">
+  <!--div class="container-fluid bg-dark text-white d-none" style="height: 5px;" id="controlsWrapper"-->
 
   </div>
 </body>
diff --git a/js/birdnet.js b/js/birdnet.js
@@ -5,6 +5,7 @@ const resampler = require('audio-resampler');
 const normalize = require('array-normalize')
 const WaveSurfer = require('wavesurfer.js');
 const SpectrogramPlugin = require('wavesurfer.js/dist/plugin/wavesurfer.spectrogram.min.js');
+const colormap = require('colormap')
 
 const MODEL_JSON = 'model/model.json'
 const CONFIG = {
@@ -141,7 +142,6 @@ async function loadModel() {
 
 async function predict(audioData, model) {
 
-    console.log('Start analysis...');
     const audioTensor = tf.tensor1d(audioData)
 
     // Slice and expand
@@ -161,13 +161,11 @@ async function predict(audioData, model) {
         console.log(index, CONFIG.labels[index], score);
 
     }
-
-    console.log('...finsihed analysis!');
 }
  /////////////////////////  DO AFTER LOAD ////////////////////////////
  window.onload = function () {
 
-    loadModel();
+    loadModel()
 
 };
 
@@ -177,12 +175,14 @@ function loadAudioFile(filePath) {
     hideAll();
     showElement('loadFileHint');
     showElement('loadFileHintSpinner');
-
+    showElement('loadFileHintLog');
 
     // load one file
+    log('loadFileHintLog', 'Loading file...');
     load(filePath).then(function (buffer) {
 
         // Resample
+        log('loadFileHintLog', 'Analyzing...');
         resampler(buffer, CONFIG.sampleRate, async function(event) {
 
             // Get raw audio data
@@ -193,6 +193,9 @@ function loadAudioFile(filePath) {
 
             //console.log(AUDIO_DATA); 
 
+            // Predict
+            //predict(AUDIO_DATA, MODEL);
+
             //Hide center div when done
             hideElement('loadFileHint');
 
@@ -211,18 +214,29 @@ function drawSpectrogram(audioBuffer) {
     CURRENT_ADUIO_BUFFER = audioBuffer;
 
     // Show waveform container
-    showElement('waveformContainer');
+    showElement('waveformContainer', false, true);
 
     // Setup waveform and spec views
     var options = {
         container: '#waveformContainer',
+        backgroundColor: '#363a40',
+        height: 50,
+        responsive: true,
+        waveColor: '#fff',
+        cursorColor: '#fff',
+        progressColor: '#4b79fa',
+        mediaControls: true,
         plugins: [
             SpectrogramPlugin.create({
                 container: '#specContainer',
                 fftSamples: 1024,
                 pixelRatio: 1,
                 labels: false,
-                name: 'specCanvas'
+                colorMap: colormap({
+                    colormap: 'viridis',
+                    nshades: 256,
+                    format: 'float'
+                })
             })
         ]
     };
@@ -234,16 +248,19 @@ function drawSpectrogram(audioBuffer) {
     WAVESURFER.loadDecodedBuffer(CURRENT_ADUIO_BUFFER);
 
     // Hide waveform view for now
-    hideElement('waveformContainer');
+    //hideElement('waveformContainer');
     showElement('specContainer');
 
     // Resize canvas of spec and labels
-    $('canvas').each(function() {
+    $('#specContainer canvas').each(function() {
+        $( this ).height($('#specContainer').height());
+    });
+    $('spectrogram').each(function() {
         $( this ).height($('#specContainer').height());
     });
 
     // Show controls
-    showElement('controlsWrapper');
+    //showElement('controlsWrapper');
 
 }
 

diff --git a/js/ui.js b/js/ui.js
@@ -21,10 +21,11 @@ function exitApplication() {
 
 }
 
-function showElement(id) {
+function showElement(id, makeFlex=true, empty=false) {
 
     $('#' + id).removeClass('d-none');
-    $('#' + id).addClass('d-flex');
+    if (makeFlex) $('#' + id).addClass('d-flex');
+    if (empty) $('#' + id).empty();
 
 }
 
@@ -41,6 +42,7 @@ function hideAll() {
     hideElement('loadFileHint');
     hideElement('loadFileHintText');
     hideElement('loadFileHintSpinner');
+    hideElement('loadFileHintLog')
 
     // Waveform and spec
     hideElement('waveformContainer');
@@ -51,6 +53,12 @@ function hideAll() {
 
 }
 
+function log(element, text) {
+
+    $('#' + element).html('</br>' + text);
+
+}
+
 
 // Event listener
 //window.addEventListener('resize', drawSpectrogram(CURRENT_ADUIO_BUFFER), false);
diff --git a/main.js b/main.js
@@ -25,7 +25,7 @@ function createWindow () {
   win.loadFile('index.html')
 
   // Open the DevTools.
-  win.webContents.openDevTools()
+  //win.webContents.openDevTools()
 
   // Emitted when the window is closed.
   win.on('closed', () => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "audio-loader": "^1.0.3",
     "audio-resampler": "^1.0.1",
     "bootstrap": "^4.4.1",
+    "colormap": "^2.3.1",
     "jquery": "^3.4.1",
     "popper.js": "^1.16.0",
     "wavesurfer.js": "^3.3.0"