Start AudioContext uppon click

stolosapo · stolosapo · Jun 1, 2024 · Nov 5, 2019 · Nov 5, 2019 · Nov 5, 2019
commit 56100a0a9b251362bfd15aa96d80f18df2b368c4
diff --git a/css/noise-module.css b/css/noise-module.css
@@ -104,6 +104,16 @@ body {
     background-image: url("../img/pause_48.png");
 }
 
+.noise-module-node header img.nm-bypass-button {
+	background: url("../img/bypass_16.png") 0 0 no-repeat;
+	height: 16px;
+	width: 16px;
+	position: relative;
+	left: 8px;
+	top: 8px;
+	cursor: pointer;
+}
+
 .noise-module-node section canvas {
 	background-image: url("../img/blueprint-dark.png");
 	display: inline-block;

diff --git a/img/bypass_16.png b/img/bypass_16.png
diff --git a/index.html b/index.html
@@ -28,8 +28,14 @@
 
     <body>
         <main>
+            <audio id="thefirstkube" crossorigin="anonymous" controls controlslist autoplay="false">
+                <source src="https://stream.thefirstkube.net/stream.mp3" type="audio/mpeg" />
+            </audio>
+
             <section id="noise-module-container" class="noise-module-container">
             </section>
+
+            <button id="start">Start it!!</button>
         </main>
 
         <script type="text/javascript">

diff --git a/js/example.js b/js/example.js
@@ -5,42 +5,54 @@ let noiseModuleInit = function(containerElId) {
 
     config.modules = [
         { name: "WhiteNoise", nodeType: "noise" },
-        { name: "NoiseRadio", nodeType: "noiseradio" },
+        { name: "NoiseRadio", nodeType: "noiseradio", options: { audioIdSelector: "thefirstkube" } },
         { name: "LiveInput", nodeType: "liveinput" },
-        { name: "KingTubby", nodeType: "kingtubby" },
         { name: "SineWave", nodeType: "oscillator" },
+        { name: "KingTubby", nodeType: "kingtubby" },
         { name: "BiquadFilter", nodeType: "biquadfilter" },
         { name: "Delay", nodeType: "delay" },
         { name: "DynamicsCompressor", nodeType: "dynamicscompressor" },
         { name: "WaveShaper", nodeType: "waveshaper" },
-        { name: "Panner", nodeType: "stereopanner" },
-        // { name: "Convolver", nodeType: "convolver" },
+        { name: "Convolver", nodeType: "convolver" },
         { name: "Eq", nodeType: "equalizer" },
+        { name: "Panner", nodeType: "stereopanner" },
         { name: "Gain", nodeType: "gain" },
         { name: "Recorder", nodeType: "recorder" },
         { name: "Analyser", nodeType: "analyser" },
     ];
 
     config.connections = [
         { srcNode: "WhiteNoise", destNode: "BiquadFilter", connected: true },
+        { srcNode: "NoiseRadio", destNode: "BiquadFilter", connected: true },
         { srcNode: "SineWave", destNode: "BiquadFilter", connected: true },
         { srcNode: "LiveInput", destNode: "BiquadFilter", connected: true },
+
         { srcNode: "BiquadFilter", destNode: "Delay", connected: true },
+
         { srcNode: "Delay", destNode: "DynamicsCompressor", connected: true },
+
         { srcNode: "DynamicsCompressor", destNode: "WaveShaper", connected: true },
-        { srcNode: "WaveShaper", destNode: "Panner", connected: true },
-        { srcNode: "Panner", destNode: "Eq", connected: true },
-        // { srcNode: "Convolver", destNode: "Eq", connected: true },
-        // { srcNode: "NoiseRadio", destNode: "KingTubby", connected: true },
-        // { srcNode: "KingTubby", destNode: "Eq", connected: true },
-        { srcNode: "Eq", destNode: "Gain", connected: true },
+
+        { srcNode: "WaveShaper", destNode: "Eq", connected: true },
+        { srcNode: "Convolver", destNode: "Eq", connected: true },
+        { srcNode: "KingTubby", destNode: "Eq", connected: true },
+
+        { srcNode: "Eq", destNode: "Panner", connected: true },
+
+        { srcNode: "Panner", destNode: "Gain", connected: true },
+
         { srcNode: "Gain", destNode: "Recorder", connected: true },
+
         { srcNode: "Gain", destNode: "Analyser", connected: true },
+
         { srcNode: "Gain", destNode: "output", connected: true },
     ];
 
     let noiseModule = new NoiseModule(config);
-    noiseModule.start();
-    noiseModule.buildUI();
-    console.log(noiseModule);
+
+    document.getElementById("start").addEventListener('click', function(el, e) {
+        noiseModule.start();
+        noiseModule.buildUI();
+        console.log(noiseModule);
+    });
 }
diff --git a/js/nodes/analyser-module-node.js b/js/nodes/analyser-module-node.js
@@ -68,10 +68,13 @@ AnalyserModuleNodeUI.prototype = {
     },
 
     $_header: function() {
+        const $byPassButton = createByPassButton(this.noiseModule, this.moduleItem);
+
         let $name = document.createElement("h6");
         $name.innerText = this.moduleItem.module.name;
 
         let $header = document.createElement("header");
+        appendElementToTarget($byPassButton, $header);
         appendElementToTarget($name, $header);
         return $header;
     },

diff --git a/js/nodes/biquadfilter-module-node.js b/js/nodes/biquadfilter-module-node.js
@@ -77,10 +77,13 @@ BiquadFilterModuleNodeUI.prototype = {
     },
 
     $_header: function() {
+        const $byPassButton = createByPassButton(this.noiseModule, this.moduleItem);
+
         let $name = document.createElement("h6");
         $name.innerText = this.moduleItem.module.name;
 
         let $header = document.createElement("header");
+        appendElementToTarget($byPassButton, $header);
         appendElementToTarget($name, $header);
         return $header;
     },

diff --git a/js/nodes/convolver-module-node.js b/js/nodes/convolver-module-node.js
@@ -54,10 +54,13 @@ ConvolverModuleNodeUI.prototype = {
     },
 
     $_header: function() {
+        const $byPassButton = createByPassButton(this.noiseModule, this.moduleItem);
+
         let $name = document.createElement("h6");
         $name.innerText = this.moduleItem.module.name;
 
         let $header = document.createElement("header");
+        appendElementToTarget($byPassButton, $header);
         appendElementToTarget($name, $header);
         return $header;
     },

diff --git a/js/nodes/delay-module-node.js b/js/nodes/delay-module-node.js
@@ -58,10 +58,13 @@ DelayModuleNodeUI.prototype = {
     },
 
     $_header: function() {
+        const $byPassButton = createByPassButton(this.noiseModule, this.moduleItem);
+
         let $name = document.createElement("h6");
         $name.innerText = this.moduleItem.module.name;
 
         let $header = document.createElement("header");
+        appendElementToTarget($byPassButton, $header);
         appendElementToTarget($name, $header);
         return $header;
     },

diff --git a/js/nodes/dynamicscompressor-module-node.js b/js/nodes/dynamicscompressor-module-node.js
@@ -68,10 +68,13 @@ DynamicsCompressorModuleNodeUI.prototype = {
     },
 
     $_header: function() {
+        const $byPassButton = createByPassButton(this.noiseModule, this.moduleItem);
+
         let $name = document.createElement("h6");
         $name.innerText = this.moduleItem.module.name;
 
         let $header = document.createElement("header");
+        appendElementToTarget($byPassButton, $header);
         appendElementToTarget($name, $header);
         return $header;
     },

diff --git a/js/nodes/equalizer-module-node.js b/js/nodes/equalizer-module-node.js
@@ -117,10 +117,13 @@ EqualizerModuleNodeUI.prototype = {
     },
 
     $_header: function() {
+        const $byPassButton = createByPassButton(this.noiseModule, this.moduleItem);
+
         let $name = document.createElement("h6");
         $name.innerText = this.moduleItem.module.name;
 
         let $header = document.createElement("header");
+        appendElementToTarget($byPassButton, $header);
         appendElementToTarget($name, $header);
         return $header;
     },

diff --git a/js/nodes/gain-module-node.js b/js/nodes/gain-module-node.js
@@ -62,10 +62,13 @@ GainModuleNodeUI.prototype = {
     },
 
     $_header: function() {
+        const $byPassButton = createByPassButton(this.noiseModule, this.moduleItem);
+
         let $name = document.createElement("h6");
         $name.innerText = this.moduleItem.module.name;
 
         let $header = document.createElement("header");
+        appendElementToTarget($byPassButton, $header);
         appendElementToTarget($name, $header);
         return $header;
     },

diff --git a/js/nodes/kingtubby-module-node.js b/js/nodes/kingtubby-module-node.js
@@ -94,10 +94,13 @@ KingTubbyModuleNodeUI.prototype = {
     },
 
     $_header: function() {
+        const $byPassButton = createByPassButton(this.noiseModule, this.moduleItem);
+
         let $name = document.createElement("h6");
         $name.innerText = this.moduleItem.module.name;
 
         let $header = document.createElement("header");
+        appendElementToTarget($byPassButton, $header);
         appendElementToTarget($name, $header);
         return $header;
     },

diff --git a/js/nodes/liveinput-module-node.js b/js/nodes/liveinput-module-node.js
@@ -87,10 +87,13 @@ LiveInputModuleNodeUI.prototype = {
     },
 
     $_header: function() {
+        const $byPassButton = createByPassButton(this.noiseModule, this.moduleItem);
+
         let $name = document.createElement("h6");
         $name.innerText = this.moduleItem.module.name;
 
         let $header = document.createElement("header");
+        appendElementToTarget($byPassButton, $header);
         appendElementToTarget($name, $header);
         return $header;
     },

diff --git a/js/nodes/noise-module-node.js b/js/nodes/noise-module-node.js
@@ -134,10 +134,13 @@ NoiseModuleNodeUI.prototype = {
     },
 
     $_header: function() {
+        const $byPassButton = createByPassButton(this.noiseModule, this.moduleItem);
+
         let $name = document.createElement("h6");
         $name.innerText = this.moduleItem.module.name;
 
         let $header = document.createElement("header");
+        appendElementToTarget($byPassButton, $header);
         appendElementToTarget($name, $header);
         return $header;
     },

diff --git a/js/nodes/noise-radio-module-node.js b/js/nodes/noise-radio-module-node.js
@@ -71,10 +71,13 @@ NoiseRadioModuleNodeUI.prototype = {
     },
 
     $_header: function() {
+        const $byPassButton = createByPassButton(this.noiseModule, this.moduleItem);
+
         let $name = document.createElement("h6");
         $name.innerText = this.moduleItem.module.name;
 
         let $header = document.createElement("header");
+        appendElementToTarget($byPassButton, $header);
         appendElementToTarget($name, $header);
         return $header;
     },

diff --git a/js/nodes/oscilator-module-node.js b/js/nodes/oscilator-module-node.js
@@ -66,10 +66,13 @@ OscilatorModuleNodeUI.prototype = {
     },
 
     $_header: function() {
+        const $byPassButton = createByPassButton(this.noiseModule, this.moduleItem);
+
         let $name = document.createElement("h6");
         $name.innerText = this.moduleItem.module.name;
 
         let $header = document.createElement("header");
+        appendElementToTarget($byPassButton, $header);
         appendElementToTarget($name, $header);
         return $header;
     },

diff --git a/js/nodes/recorder-module-node.js b/js/nodes/recorder-module-node.js
@@ -82,10 +82,13 @@ RecorderModuleNodeUI.prototype = {
     },
 
     $_header: function() {
+        const $byPassButton = createByPassButton(this.noiseModule, this.moduleItem);
+
         let $name = document.createElement("h6");
         $name.innerText = this.moduleItem.module.name;
 
         let $header = document.createElement("header");
+        appendElementToTarget($byPassButton, $header);
         appendElementToTarget($name, $header);
         return $header;
     },

diff --git a/js/nodes/stereopanner-module-node.js b/js/nodes/stereopanner-module-node.js
@@ -58,10 +58,13 @@ StereoPannerModuleNodeUI.prototype = {
     },
 
     $_header: function() {
+        const $byPassButton = createByPassButton(this.noiseModule, this.moduleItem);
+
         let $name = document.createElement("h6");
         $name.innerText = this.moduleItem.module.name;
 
         let $header = document.createElement("header");
+        appendElementToTarget($byPassButton, $header);
         appendElementToTarget($name, $header);
         return $header;
     },

diff --git a/js/nodes/waveshaper-module-node.js b/js/nodes/waveshaper-module-node.js
@@ -79,10 +79,13 @@ WaveShaperModuleNodeUI.prototype = {
     },
 
     $_header: function() {
+        const $byPassButton = createByPassButton(this.noiseModule, this.moduleItem);
+
         let $name = document.createElement("h6");
         $name.innerText = this.moduleItem.module.name;
 
         let $header = document.createElement("header");
+        appendElementToTarget($byPassButton, $header);
         appendElementToTarget($name, $header);
         return $header;
     },

diff --git a/js/noise-module.js b/js/noise-module.js
@@ -87,6 +87,7 @@ NoiseModule.prototype = {
         // initialize members
         this.moduleCounter = 0;
         this.moduleInstaces = [];
+        this.currentConnections = [];
         this.registeredFactories = this.options.nodesFactories();
     },
 
@@ -178,6 +179,7 @@ NoiseModule.prototype = {
             audioNode: audioNode,
             moduleImpl: moduleImpl,
             factory: factory,
+            bypassConnections: [],
         };
 
         return moduleItem;
@@ -196,12 +198,20 @@ NoiseModule.prototype = {
         }
 
         let _self = this;
+        let lastRect;
 
         this.moduleInstaces
             .forEach(i => {
                 let uiBuilder = i.factory.createUI(_self, i);
                 let $moduleEl = uiBuilder.create();
+                // dragElement($moduleEl);
                 appendElementToTarget($moduleEl, $containerEl);
+
+                if (lastRect) {
+                    $moduleEl.style.left = (lastRect.left + lastRect.width + 10) + "px";
+                }
+
+                lastRect = $moduleEl.getBoundingClientRect();
             });
     },
 
@@ -224,7 +234,7 @@ NoiseModule.prototype = {
         }
 
         if (connection.destNode === "output") {
-            this.connectNodes(srcAudio.outNode, this.audioContext.destination);
+            this.connectNodes(srcAudio.outNode, this._outputNode());
             return;
         }
 
@@ -265,13 +275,40 @@ NoiseModule.prototype = {
         };
     },
 
+    _outputNode: function() {
+        return this.audioContext.destination;
+    },
+
+    _findModuleElementPositions: function() {
+        return this.moduleInstaces
+            .map(i => {
+                const $el = document.getElementById("module" + i.id);
+                const rect = $el.getBoundingClientRect();
+
+                return {
+                    $el,
+                    rect
+                };
+            });
+    },
+
+    _connectionExists: function(srcNode, destNode) {
+        return this.currentConnections.filter(c => c.srcNode === srcNode && c.destNode === destNode).length > 0;
+    },
+
     connectNodes: function(srcNode, destNode) {
         if (!srcNode || !destNode) {
             console.error( "Could not create connection. Source and Destination should exist.", srcNode, destNode);
             return;
         }
 
+        if (this._connectionExists(srcNode, destNode)) {
+            console.warn("Connection already exists", srcNode, destNode);
+            return;
+        }
+
         srcNode.connect(destNode);
+        this.currentConnections.push({srcNode, destNode});
     },
 
     _disconnectNodes: function(srcNode, destNode) {
@@ -280,7 +317,13 @@ NoiseModule.prototype = {
             return;
         }
 
+        if (!this._connectionExists(srcNode, destNode)) {
+            console.warn("Connection doesn't exists", srcNode, destNode);
+            return;
+        }
+
         srcNode.disconnect(destNode);
+        this.currentConnections = this.currentConnections.filter(c => !(c.srcNode === srcNode && c.destNode === destNode));
     },
 
     updateAudioNode: function(moduleName, audioInNode, audioOutNode) {
@@ -318,6 +361,75 @@ NoiseModule.prototype = {
                 _self._disconnectNodes(srcNode.outNode, destNode.inNode);
             });
     },
+
+    _clearBypassConnections: function(module) {
+        if (!module.bypassConnections) {
+            return;
+        }
+
+        let _self = this;
+
+        // First disconnect connections
+        module.bypassConnections.forEach(c => {
+            _self._disconnectNodes(c.srcNode, c.destNode);
+        });
+
+        // Clear collection
+        module.bypassConnections = [];
+    },
+
+    byPassModule: function(module) {
+        let _self = this;
+
+        // Clear already existed bypass connections
+        this._clearBypassConnections(module);
+
+        // Find the sources of this module
+        const srcNodes = this.currentConnections
+            .filter(c => c.destNode === module.inNode)
+            .map(c => c.srcNode);
+
+        // Find the destinations of this module
+        const destNodes = this.currentConnections
+            .filter(c => c.srcNode === module.outNode)
+            .map(c => c.destNode);
+
+        // Disconnect all source nodes of the module
+        srcNodes.forEach(srcNode => _self._disconnectNodes(srcNode, module.inNode));
+
+        // Disconnect all target nodes from module
+        destNodes.forEach(destNode => _self._disconnectNodes(module.outNode, destNode));
+
+        // Connect all combinations of sources and targets
+        srcNodes.forEach(srcNode => {
+            destNodes.forEach(destNode => {
+                _self.connectNodes(srcNode, destNode);
+                module.bypassConnections.push({srcNode, destNode});
+            });
+        });
+
+        console.log("By passs", module, this.currentConnections);
+    },
+
+    reAttachModule: function(module) {
+        let _self = this;
+
+        // Clear already existed bypass connections
+        this._clearBypassConnections(module);
+
+        // Connect the sources of this module
+        const srcNodes = this.options.connections
+            .filter(c => c.destNode === module.inNode)
+            .forEach(c => _self.connectNodes(c.srcNode, c.destNode));
+
+        // Connect the targets of this module
+        const destNodes = this.options.connections
+            .filter(c => c.srcNode === module.outNode)
+            .map(c => _self.connectNodes(c.srcNode, c.destNode));
+
+
+        console.log("Re-Attach", module, this.currentConnections);
+    }
 };
 
 let extend = function() {

diff --git a/js/ui-helper.js b/js/ui-helper.js
@@ -66,6 +66,25 @@ let createPlayPauseButton = function(noiseModule, module, clickEvent) {
     return $button;
 }
 
+let createByPassButton = function(noiseModule, module) {
+    const byPassedClass = 'bypassed';
+
+    let $button = document.createElement("img");
+    $button.classList.add("nm-bypass-button");
+
+    $button.addEventListener('click', function(e) {
+        if (this.classList.contains(byPassedClass)) {
+            noiseModule.reAttachModule(module);
+            this.classList.remove(byPassedClass);
+        } else {
+            noiseModule.byPassModule(module);
+            this.classList.add(byPassedClass);
+        }
+    });
+
+    return $button;
+}
+
 let createSliderWrapper = function($input, property, description, units) {
     let value = function(v) {
         return v + " " + units;
@@ -106,4 +125,45 @@ let createSliderControl = function(initialValue, min, max, step, changeEvent) {
     $input.value = initialValue;
     $input.addEventListener('input', changeEvent);
     return $input;
-}
+}
+
+let dragElement = function($elem) {
+    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+    if (document.getElementById($elem.id + "header")) {
+      // if present, the header is where you move the DIV from:
+      document.getElementById($elem.id + "header").onmousedown = dragMouseDown;
+    } else {
+      // otherwise, move the DIV from anywhere inside the DIV:
+      $elem.onmousedown = dragMouseDown;
+    }
+
+    function dragMouseDown(e) {
+      e = e || window.event;
+      e.preventDefault();
+      // get the mouse cursor position at startup:
+      pos3 = e.clientX;
+      pos4 = e.clientY;
+      document.onmouseup = closeDragElement;
+      // call a function whenever the cursor moves:
+      document.onmousemove = elementDrag;
+    }
+
+    function elementDrag(e) {
+      e = e || window.event;
+      e.preventDefault();
+      // calculate the new cursor position:
+      pos1 = pos3 - e.clientX;
+      pos2 = pos4 - e.clientY;
+      pos3 = e.clientX;
+      pos4 = e.clientY;
+      // set the element's new position:
+      $elem.style.top = ($elem.offsetTop - pos2) + "px";
+      $elem.style.left = ($elem.offsetLeft - pos1) + "px";
+    }
+
+    function closeDragElement() {
+      // stop moving when mouse button is released:
+      document.onmouseup = null;
+      document.onmousemove = null;
+    }
+  }