added .startUI and .stopUI

zakaton · Jun 13, 2019 · 90cbd86 · 90cbd86
1 parent 92cf5dc
commit 90cbd86
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 18 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 80
+}
diff --git a/build/pink-trombone.min.js b/build/pink-trombone.min.js
diff --git a/index.html b/index.html
@@ -4,16 +4,72 @@
     </head>
 
     <body>
-        <pink-trombone ui></pink-trombone>
+        <pink-trombone></pink-trombone>
 
         <script>
             const pinkTromboneElement = document.querySelector("pink-trombone");
 
             pinkTromboneElement.addEventListener("load", event => {
                 pinkTromboneElement.setAudioContext()
                     .then(pinkTrombone => {
+                        pinkTromboneElement.enableUI();
+                        pinkTromboneElement.startUI();
                         pinkTromboneElement.connect(pinkTromboneElement.audioContext.destination);
-                        pinkTromboneElement.start();
+
+                        if(false) {
+                            function say(_tongue, _constriction, duration, timeout, intensity, tenseness, frequency) {
+                                return new Promise(resolve => {
+                                    window.setTimeout(() => {
+                                    if(_tongue.index)
+                                        pinkTromboneElement.parameters.tongue.index.linearRampToValueAtTime(_tongue.index, pinkTromboneElement.audioContext.currentTime+duration);
+                                    if(_tongue.diameter)
+                                        pinkTromboneElement.parameters.tongue.diameter.linearRampToValueAtTime(_tongue.diameter, pinkTromboneElement.audioContext.currentTime+duration);
+                                    if(_constriction.index)
+                                        pinkTromboneElement.constrictions[0].index.linearRampToValueAtTime(_constriction.index, pinkTromboneElement.audioContext.currentTime+duration);
+                                    if(_constriction.diameter)
+                                        pinkTromboneElement.constrictions[0].diameter.linearRampToValueAtTime(_constriction.diameter, pinkTromboneElement.audioContext.currentTime+duration);
+
+                                    if(tenseness !== undefined) {
+                                        tenseness = 1 - Math.cos((tenseness) * Math.PI * 0.5);
+                                        pinkTromboneElement.parameters.tenseness.linearRampToValueAtTime(tenseness, pinkTromboneElement.audioContext.currentTime+duration);
+                                        const loudness = Math.pow(tenseness, 0.25);
+                                        pinkTromboneElement.parameters.loudness.linearRampToValueAtTime(loudness, pinkTromboneElement.audioContext.currentTime+duration);
+                                    }
+                                    if(intensity !== undefined)
+                                        pinkTromboneElement.parameters.intensity.linearRampToValueAtTime(intensity, pinkTromboneElement.audioContext.currentTime+duration);
+                                    if(frequency !== undefined)
+                                        pinkTromboneElement.parameters.frequency.linearRampToValueAtTime(frequency, pinkTromboneElement.audioContext.currentTime+duration);
+
+                                    window.setTimeout(() => {
+                                        resolve();
+                                    }, duration*1000)
+                                    }, timeout);    
+                                });
+                            }
+                            const constriction = pinkTromboneElement.newConstriction(40, 3);
+
+                            window.say = say;
+                            window.constriction = constriction;
+
+                            //                     (_tongue, _constriction, duration, timeout, intensity, tenseness, frequency)
+                            var baseFrequency = pinkTromboneElement.parameters.frequency.value;
+                            window.sayE = () => say({index : 27.5, diameter : 2}, {diameter : 3}, 0.1, 0, 0, undefined, baseFrequency);
+                            window.sayU = () => say({index : 22.6, diameter : 2}, {index : 40, diameter : 0.8}, 0.3, 0.5, 1, undefined, baseFrequency*2^(6/12));
+                            window.sayK = () => say({}, {index : 20, diameter : -0.3}, 0.1, 0.5, 0, 0);
+                            window.sayA = () => say({index : 17, diameter : 3}, {index : 25, diameter : 4}, 0.1, 0, 1, 0.8, baseFrequency*2^(3/12));
+                            window.sayT = () => say({}, {index : 36, diameter : -0.5}, 0.1, 0, 0, 1);
+                            window.sayO = () => say({index : 12.6, diameter : 2.3}, {diameter : 3}, 0.1, 0, 1, undefined, baseFrequency);
+                            window.sayN = () => say({}, {index : 36, diameter : -1.4}, 0.2, 0, 0.2, undefined);
+                            window.shutUp = () => say({}, {}, 0.1, 1, 0);
+
+                            window.sayUKATON = () => sayE().then(sayU).then(sayK).then(sayA).then(sayT).then(sayO).then(sayN).then(shutUp);
+
+                            window.addEventListener("keypress", event => {
+                                baseFrequency = pinkTromboneElement.parameters.frequency.value;
+                                window.sayUKATON();
+                            })    
+                        }
+
                     });
             });
 

diff --git a/...d3b496989dec6499446b99e578312fa6457e756efe67b262545e2a684aa4ff1605f2fadfe990c1d2b605bb5ef b/...d3b496989dec6499446b99e578312fa6457e756efe67b262545e2a684aa4ff1605f2fadfe990c1d2b605bb5ef
diff --git a/...37f467b13b973977d74a2b4abe2674b020e76b33757978a07f3e3228121940a419d97247630b534555b833e72 b/...37f467b13b973977d74a2b4abe2674b020e76b33757978a07f3e3228121940a419d97247630b534555b833e72
diff --git a/...ebpack-plugin/index-v5/0d/d3/dbd3733e762a8cb93169ee97ab02a7f381a6158d5f7de16603907d8bff7e b/...ebpack-plugin/index-v5/0d/d3/dbd3733e762a8cb93169ee97ab02a7f381a6158d5f7de16603907d8bff7e
diff --git a/...ebpack-plugin/index-v5/9b/c8/e0e146cd6d1aa4cb066e054b07d7d46d75da781c672f25f6ec871f78b231 b/...ebpack-plugin/index-v5/9b/c8/e0e146cd6d1aa4cb066e054b07d7d46d75da781c672f25f6ec871f78b231
diff --git a/pink-trombone.min.js b/pink-trombone.min.js
diff --git a/script/PinkTrombone.js b/script/PinkTrombone.js
@@ -54,6 +54,7 @@ class PinkTrombone {
             this._fricativeFilter.connect(this._pinkTromboneNode.noise);
 
         this._gain = this.audioContext.createGain();
+            this._gain.gain.value = 0;
             this._pinkTromboneNode.connect(this._gain);
     }
 
@@ -69,10 +70,10 @@ class PinkTrombone {
     }
 
     start() {
-        this._noise.start();
+        this._gain.gain.value = 1;
     }
     stop() {
-        this._noise.stop();
+        this._gain.gain.value = 0;
     }
 
     get constrictions() {

diff --git a/script/audio/nodes/noise/AudioNode.js b/script/audio/nodes/noise/AudioNode.js
@@ -18,6 +18,8 @@ window.AudioContext.prototype.createNoise = function() {
     noiseNode.buffer = buffer;
     noiseNode.loop = true;
 
+    noiseNode.start();
+
     return noiseNode;
 }
 

diff --git a/script/component.js b/script/component.js
@@ -29,6 +29,7 @@ class PinkTromboneElement extends HTMLElement {
 
                 this.addEventListener("resume", event => {
                     this.audioContext.resume();
+                    this.pinkTrombone.start();
                     event.target.dispatchEvent(new CustomEvent("didResume"));
                 });
 
@@ -168,9 +169,22 @@ class PinkTromboneElement extends HTMLElement {
     disableUI() {
         if(this.UI !== undefined) {
             this.UI.hide();
+            this.stopUI();
         }
     }
 
+    startUI() {
+        if(this.UI !== undefined) {
+            this._isRunning = true;
+            window.requestAnimationFrame(highResTimeStamp => {
+                this._requestAnimationFrameCallback(highResTimeStamp);
+            });    
+        }
+    }
+    stopUI() {
+        this._isRunning = false;
+    }
+
     // getAttribute getter?
     static get observedAttributes() {
         return [
@@ -228,30 +242,23 @@ class PinkTromboneElement extends HTMLElement {
 
     start() {
         if(this.pinkTrombone) {
-            this.isRunning = true;
-
-            if(this.UI !== undefined) {
-                window.requestAnimationFrame(highResTimeStamp => {
-                    this._requestAnimationFrameCallback(highResTimeStamp);
-                });
-            }
-
-            return this.pinkTrombone.start();
+            this.pinkTrombone.start();
+            this.startUI();
         }
         else
             throw "Pink Trombone hasn't been set yet";
     }
     stop() {
         if(this.pinkTrombone) {
-            this.isRunning = false;
-            return this.pinkTrombone.stop();
+            this.pinkTrombone.stop();
+            this.stopUI();
         }
         else
             throw "Pink Trombone hasn't been set yet";
     }
 
     _requestAnimationFrameCallback(highResTimeStamp) {
-        if(this.isRunning) {
+        if(this._isRunning) {
             this._animationFrameObservers.forEach(element => {
                 const customEvent = new CustomEvent("animationFrame", {
                     detail : {