Replace ScriptProcessorNode in p5.SoundRecorder with AudioWorkletNode (…

…#369)

Replace scriptProcessorNode in p5.SoundRecorder with transpiled AudioWorkletNode; polyfill AudioWorklet

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": ["preval"]
+}

.eslintrc

@@ -33,7 +33,7 @@
     "eol-last": ["error", "always"],
     "guard-for-in": 2,
     "indent": ["error", 2, { "SwitchCase": 1 }],
-    "max-len": [1, 120, 2, {ignoreComments: true}],
+    "max-len": [1, 120, 2, { "ignoreComments": true }],
     "new-cap": 2,
     "no-caller": 2,
     "no-cond-assign": [

.gitignore

@@ -3,3 +3,4 @@ node_modules
 examples/__test
 p5soundnotes
 *.DS_Store
+.vscode

package.json

@@ -12,18 +12,21 @@
     "almond": "~0.2.7",
     "amdclean": "~2.0",
     "babel-loader": "^8.0.6",
+    "babel-plugin-preval": "^3.0.1",
     "grunt": "~0.4.5",
     "grunt-cli": "^0.1.13",
     "grunt-contrib-connect": "^1.0.2",
     "grunt-eslint": "^20.0.0",
     "grunt-mocha": "^1.0.4",
     "grunt-open": "^0.2.3",
     "grunt-webpack": "^3.1.3",
+    "raw-loader": "^3.0.0",
     "uglify-loader": "^3.0.0",
     "uglifyjs-webpack-plugin": "^2.1.3",
     "webpack": "^4.33.0"
   },
   "dependencies": {
+    "audioworklet-polyfill": "^1.1.2",
     "startaudiocontext": "^1.2.1",
     "tone": "0.10.0"
   },

src/app.js

@@ -2,11 +2,13 @@
 
 define(function (require) {
 
+  require('audioworklet-polyfill');
   require('shims');
   require('audiocontext');
   var p5SOUND = require('master');
   require('helpers');
   require('errorHandler');
+  require('audioWorklet');
   require('panner');
   require('soundfile');
   require('amplitude');

src/audioWorklet/.eslintrc

@@ -0,0 +1,11 @@
+{
+    "globals": {
+        "currentFrame": true,
+        "currentTime": true,
+        "sampleRate": true,
+        "preval": true
+    },
+    "parserOptions": {
+        "sourceType": "module"
+    }
+}

src/audioWorklet/index.js

@@ -0,0 +1,26 @@
+const p5sound = require('master');
+const moduleSources = [
+  require('raw-loader!./recorderProcessor').default
+];
+const ac = p5sound.audiocontext;
+
+function loadAudioWorkletModules() {
+  return Promise.all(moduleSources.map(function(moduleSrc) {
+    const blob = new Blob([moduleSrc], { type: 'application/javascript' });
+    const objectURL = URL.createObjectURL(blob);
+    return ac.audioWorklet.addModule(objectURL);
+  }));
+}
+
+p5.prototype.registerMethod('init', function() {
+  // ensure that a preload function exists so that p5 will wait for preloads to finish
+  if (!this.preload && !window.preload) {
+    this.preload = function() {};
+  }
+  // use p5's preload system to load necessary AudioWorklet modules before setup()
+  this._preloadCount++;
+  const onWorkletModulesLoad = function() {
+    this._decrementPreload();
+  }.bind(this);
+  loadAudioWorkletModules().then(onWorkletModulesLoad);
+});

src/audioWorklet/processorNames.js

@@ -0,0 +1,3 @@
+module.exports = {
+  recorderProcessor: 'recorder-processor'
+};