Merge pull request #39 from MTG/dev

Minor fixes to the web examples
MTG · Oct 12, 2020 · cb5c0f2 · cb5c0f2
2 parents 6e1b390 + d622b47
commit cb5c0f2
Show file tree

Hide file tree

Showing 13 changed files with 27 additions and 101 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added 
 - Added support for new algorithms for pitch extraction (Melodia), EBUR loudness and downmixing stereo signals etc. (see [#6](https://github.com/MTG/essentia.js/issues/6) and [#30](https://github.com/MTG/essentia.js/issues/30)). 
 - Added example of how to write efficient custom C++ features exractor and their corresponding Essentia WASM JS bindings for performance demanding applications (see [here](https://github.com/MTG/essentia.js/pull/38/commits/517065cab819f9d9bef8bae8c8ee1e33d627f67e)).
+- Added both normal and minified builds of essentia.js seperately.
 
 
 ### Changes

diff --git a/examples/offline/hpcp-chroma/example.html b/examples/offline/hpcp-chroma/example.html
@@ -14,9 +14,9 @@
     <body style="background-color:  #000000!important;">
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/essentia.js@0.0.9/dist/essentia-wasm.web.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/essentia.js@0.0.9/dist/essentia.js-extractor.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/essentia.js@0.0.9/dist/essentia.js-plot.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/essentia.js@0.1.0/dist/essentia-wasm.web.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/essentia.js@0.1.0/dist/essentia.js-extractor.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/essentia.js@0.1.0/dist/essentia.js-plot.js"></script>
       <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
       <script src="script.js" defer></script>
       <div>

diff --git a/examples/offline/melspectrogram/example.html b/examples/offline/melspectrogram/example.html
@@ -14,9 +14,9 @@
     <body style="background-color:  #000000!important;">
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
-      <script src="../../../dist/essentia-wasm.web.js"></script>
-      <script src="../../../dist/essentia.js-extractor.js"></script>
-      <script src="../../../dist/essentia.js-plot.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia-wasm.web.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/essentia.js-extractor.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia.js-plot.js"></script>
       <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
       <script src="script.js" defer></script>
       <div>

diff --git a/examples/offline/pitchmelodia/example.html b/examples/offline/pitchmelodia/example.html
@@ -14,9 +14,9 @@
     <body style="background-color:  #000000!important;">
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
-      <script src="../../../dist/essentia-wasm.web.js"></script>
-      <script src="../../../dist/essentia.js-core.js"></script>
-      <script src="../../../dist/essentia.js-plot.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia-wasm.web.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia.js-core.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia.js-plot.js"></script>
       <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
       <script src="script.js" defer></script>
       <div>

diff --git a/examples/realtime/audio-worklets/essentia-worklet-processor.js b/examples/realtime/audio-worklets/essentia-worklet-processor.js
@@ -1,7 +1,7 @@
 // import Module from 'https://unpkg.com/[email protected]/dist/essentia-module.js';
-import { EssentiaModule } from "https://cdn.jsdelivr.net/npm/essentia.js@0.0.9/dist/essentia-wasm.module.js";
+import { EssentiaModule } from "https://cdn.jsdelivr.net/npm/essentia.js@0.1.0/dist/essentia-wasm.module.js";
 // import Essentia JS API interface
-import Essentia from "https://cdn.jsdelivr.net/npm/essentia.js@0.0.9/dist/essentia.js-core.es.js";
+import Essentia from "https://cdn.jsdelivr.net/npm/essentia.js@0.1.0/dist/essentia.js-core.es.js";
 // Tools for sending audio interleaved audio frames between threads, wait-free from the ringbuf.js package
 // import { RingBuffer, AudioReader, ParameterReader } from "https://unpkg.com/browse/[email protected]/dist/index.es.js";
 

diff --git a/examples/realtime/hpcp-chroma/example.html b/examples/realtime/hpcp-chroma/example.html
@@ -13,9 +13,10 @@
   <body style="background-color:  #000000!important;">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia-wasm.web.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia.js-extractor.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia.js-plot.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia-wasm.web.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia-wasm.web.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia.js-extractor.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia.js-plot.js"></script>
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 
     <div class="ui main_wrapper landing-image">
@@ -196,7 +197,8 @@ <h2 class="ui header white-text" style="color: azure;">
           // settings specific to an algorithm
           essentiaExtractor.profile.HPCP.nonLinear = true;
           // compute hpcp for overlapping frames of audio
-          let hpcpGram = essentiaExtractor.hpcpgram(audioBuffer);
+          let hpcp = essentiaExtractor.hpcpExtractor(audioBuffer);
+          let hpcpGram = [hpcp];
           // here we call the plotting function to display realtime feature extraction results
           plotChroma.create(
             hpcpGram,
@@ -225,9 +227,9 @@ <h2 class="ui header white-text" style="color: azure;">
               );
 
               // loads the WASM backend and runs the feature extraction
-              EssentiaModule().then(function(essentiaModule) {
+              EssentiaWASM().then(function(essentiaWasmModule) {
                 if (!isEssentiaInstance) {
-                  essentiaExtractor = new EssentiaExtractor(essentiaModule);
+                  essentiaExtractor = new EssentiaExtractor(essentiaWasmModule);
                   isEssentiaInstance = true;
                 }
                 // start microphone stream using getUserMedia

diff --git a/examples/realtime/melspectrogram/example.html b/examples/realtime/melspectrogram/example.html
@@ -13,9 +13,9 @@
   <body style="background-color:  #000000!important;">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
-    <script src="../../../dist/essentia-wasm.web.js"></script>
-    <script src="../../../dist/essentia.js-extractor.js"></script>
-    <script src="../../../dist/essentia.js-plot.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia-wasm.web.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia.js-extractor.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia.js-plot.js"></script>
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 
     <div class="ui main_wrapper landing-image">

diff --git a/examples/realtime/pitchmelodia/example.html b/examples/realtime/pitchmelodia/example.html
@@ -9,9 +9,9 @@
       <body style="background-color:  #000000!important;"">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
-        <script src="../../../dist/essentia-wasm.web.js"></script>
-        <script src="../../../dist/essentia.js-core.js"></script>
-        <script src="../../../dist/essentia.js-plot.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia-wasm.web.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia.js-core.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/essentia.js-plot.js"></script>
         <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 
         <div class="ui main_wrapper landing-image">

diff --git a/src/cpp/custom/essentia-custom-extractor.module.js b/src/cpp/custom/essentia-custom-extractor.module.js
diff --git a/src/cpp/custom/essentia-custom-extractor.web.js b/src/cpp/custom/essentia-custom-extractor.web.js
diff --git a/src/cpp/custom/essentia-custom-extractor.web.wasm b/src/cpp/custom/essentia-custom-extractor.web.wasm
diff --git a/src/python/js_wrapper.cog b/src/python/js_wrapper.cog
@@ -22,7 +22,7 @@
 /**
  * @fileOverview Essentia high-level core interface
  * @author <a href="mailto:[email protected]">Albin Correya</a>
- * @version 0.0.9
+ * @version 0.1.0
  */
 
 /**

diff --git a/src/typescript/plot.ts b/src/typescript/plot.ts
@@ -283,13 +283,9 @@ class PlotHeatmap extends EssentiaPlot {
         type: 'heatmap',
         transpose: true,
       };
-
       this.Plotly.newPlot(this.divId, [data], this.plotLayout);
       this.isPlotting = true;
       this.startTimeIndex = timeAxis[timeAxis.length-1];
-
-      console.log(this.startTimeIndex);
-
     } else {
       // realtime mode
       let heatmapFeature;