Added key event - space key to start/stop

Fixed issues with delay + starts after Fixed scrolling issue in number
gautamsamal · Jan 10, 2019 · acf6325 · acf6325
1 parent b295ab3
commit acf6325
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 41 deletions.
diff --git a/knob/js/circular-range.js → common/directives.js b/knob/js/circular-range.js → common/directives.js
@@ -1,3 +1,16 @@
+angular.module('mainApp').directive('restrictScroll', [function () {
+    return {
+        restrict: 'A',
+        link: function (scope, elem, attrs) {
+            // disable mousewheel on a input number field when in focus
+            // (to prevent Cromium browsers change the value when scrolling)
+            $(elem).on("wheel", function (e) {
+                $(this).blur();
+            });
+        }
+    }
+}]);
+
 angular.module('mainApp').directive('circularRange', [function () {
     return {
         restrict: 'A',

diff --git a/index.html b/index.html
@@ -34,7 +34,7 @@
     <script src="common/utils.js" type="text/javascript"></script>
     <script src="synthesizerV2/audioLibrary.js" type="text/javascript"></script>
     <script src="app.js" type="text/javascript"></script>
-    <script src="knob/js/circular-range.js"></script>
+    <script src="common/directives.js"></script>
     <script src="sound-clips/sounds.js" type="text/javascript"></script>
     <script src="editor/sound-renderer.js" type="text/javascript"></script>
     <script src="sampler/player.js" type="text/javascript"></script>

diff --git a/synthesizerV2/audioLibrary.js b/synthesizerV2/audioLibrary.js
@@ -150,10 +150,11 @@ class BufferPlayer extends AudioBaseNode {
 }
 
 class ModulatingOscillator extends AudioBaseNode {
-    constructor(context, modulationType, frequency, detune) {
+    constructor(context, modulationType, frequency, detune, frequencyDelay) {
         super(context);
 
-        this._modulationOsc = new Oscillator(context, modulationType, frequency, detune, 0.05);
+        // Same Oscillator with a frequency delay
+        this._modulationOsc = new Oscillator(context, modulationType, frequency, detune, frequencyDelay);
         this._mainGain = new Gain(context);
 
         // Add a slight distortion
@@ -169,25 +170,26 @@ class ModulatingOscillator extends AudioBaseNode {
 }
 
 class ADSREnv extends Gain {
-    constructor(context, gainADSR) {
+    constructor(context, gainADSR, offset = 0) {
         super(context);
         this.gainADSR = gainADSR;
+        this.offset = offset;
         this.setup();
     }
 
     setup() {
         const { a = 0, d = 0, s = 0, r = 0 } = this.gainADSR;
-        this.setValueAtTime(0.00001, 0);
+        this.setValueAtTime(0.00001, this.context.currentTime + this.offset);
         if (a && a > 0) {
-            this.rampValueAtTime(1, (this.context.currentTime + a));
+            this.rampValueAtTime(1, (this.context.currentTime + this.offset + a));
         }
 
         if (d && d > 0 && s && s > 0) {
-            this.rampValueAtTime(s, (this.context.currentTime + a + d));
+            this.rampValueAtTime(s, (this.context.currentTime + this.offset + a + d));
         }
 
         if (r && r > 0) {
-            this.rampValueAtTime(0.00001, (this.context.currentTime + a + d + r));
+            this.rampValueAtTime(0.00001, (this.context.currentTime + this.offset + a + d + r));
         }
     }
 }

diff --git a/synthesizerV2/main.html b/synthesizerV2/main.html
@@ -45,23 +45,27 @@
 }
 .player-control > span > i{
     cursor: pointer;
+    color: #a7a4a4;
+}
+.player-control > span > i.active{
+    color: #fff;
 }
 </style>
 <!--
     TODO: Add tool-tips
-    TODO: Restrict scroll on input fields
-    TODO: Control on player icon
 -->
 <div ng-controller="SynthV2Ctrl" class="syntheziser">
     <div class="project-header text-center">
         <div style="position: relative;">
             <span>Synthesizer 2.0</span>
             <div class="player-control">
                 <span>
-                    <i class="fa fa-play-circle" ng-click="play()"></i>
+                    <i class="fa fa-play-circle" title="Play" ng-class="{'active': SynthV2Factory.currentContext.state === 'running'}"
+                        ng-click="play()"></i>
                     &nbsp;
                     <!-- <i class="fa fa-pause-circle" ng-click="pause()"></i> -->
-                    <i class="fa fa-stop-circle" ng-click="stop()"></i>
+                    <i class="fa fa-stop-circle" title="Stop" ng-class="{'active': !SynthV2Factory.currentContext || SynthV2Factory.currentContext.state !== 'running'}"
+                        ng-click="stop()"></i>
                 </span>
             </div>
         </div>
@@ -101,13 +105,13 @@
                         <div ng-if="channel.type === 'osc'">
                             <label>Frequency</label>
                             <div>
-                                <input class="time-input" type="number" min="0" ng-model="channel.frequency" />
+                                <input class="time-input" restrict-scroll type="number" min="0" ng-model="channel.frequency" />
                             </div>
                         </div>
                         <div ng-if="channel.type === 'osc'">
                             <label>Detune</label>
                             <div>
-                                <input class="time-input" type="number" ng-model="channel.detune" />
+                                <input class="time-input" restrict-scroll type="number" ng-model="channel.detune" />
                             </div>
                         </div>
                         <div ng-if="channel.type === 'external'">
@@ -131,19 +135,19 @@
                         <div>
                             <label>Delay</label>
                             <div>
-                                <input class="time-input" type="number" min="0" ng-model="channel.delay" />
+                                <input class="time-input" restrict-scroll type="number" min="0" ng-model="channel.delay" />
                             </div>
                         </div>
                         <div>
                             <label>Starts After</label>
                             <div>
-                                <input class="time-input" type="number" min="0" ng-model="channel.startAfter" />
+                                <input class="time-input" restrict-scroll type="number" min="0" ng-model="channel.startAfter" />
                             </div>
                         </div>
                         <div>
                             <label>Duration</label>
                             <div>
-                                <input class="time-input" type="number" min="0" ng-model="channel.duration" />
+                                <input class="time-input" restrict-scroll type="number" min="0" ng-model="channel.duration" />
                             </div>
                         </div>
                         <div>
@@ -163,10 +167,10 @@
                         <div ng-if="channel.loop">
                             <label>Repeat till</label>
                             <div>
-                                <input class="time-input" type="number" min="0" ng-model="channel.limitRepeatSec" />
+                                <input class="time-input" restrict-scroll type="number" min="0" ng-model="channel.limitRepeatSec" />
                                 sec(s)
                                 &nbsp;or after&nbsp;
-                                <input class="time-input" type="number" min="0" ng-model="channel.limitRepeatCount" />
+                                <input class="time-input" restrict-scroll type="number" min="0" ng-model="channel.limitRepeatCount" />
                                 times
                             </div>
                         </div>
@@ -311,13 +315,13 @@
                         <div>
                             <label>Frequency</label>
                             <div>
-                                <input class="time-input" type="number" min="0" ng-model="channel.modulation.frequency" />
+                                <input class="time-input" restrict-scroll type="number" min="0" ng-model="channel.modulation.frequency" />
                             </div>
                         </div>
                         <div>
                             <label>Detune</label>
                             <div>
-                                <input class="time-input" type="number" ng-model="channel.modulation.detune" />
+                                <input class="time-input" restrict-scroll type="number" ng-model="channel.modulation.detune" />
                             </div>
                         </div>
                     </div>
@@ -360,9 +364,9 @@ <h4>Load pre-saved configuration</h4>
 
         <hr />
         <h4>Make it a track?<span style="font-size: 12px;"> (Will update the current track with extracted audio)</span></h4>
-        <label>From <input class="time-input" type="number" min="0" ng-model="recording.start" /> sec</label>
+        <label>From <input class="time-input" restrict-scroll type="number" min="0" ng-model="recording.start" /> sec</label>
         to
-        <label><input class="time-input" type="number" min="0" ng-model="recording.end" /> sec</label>
+        <label><input class="time-input" restrict-scroll type="number" min="0" ng-model="recording.end" /> sec</label>
         <div>
             <button class="btn btn-sm btn-app-color" ng-click="record()" ng-disabled="controlFlags.recording">Play &
                 Extract & Update</button>

diff --git a/synthesizerV2/main.js b/synthesizerV2/main.js
@@ -45,10 +45,6 @@ angular.module('mainApp').controller('SynthV2Ctrl', ($rootScope, $scope, $http,
         SynthV2Factory.playChannels($scope.currentProject.channels, $scope.recording);
     };
 
-    $scope.$on('$destroy', () => {
-        SynthV2Factory.stop();
-    });
-
     // Update on record time
     $scope.$on('Record:Timer:Update', () => {
         $scope.$digest();
@@ -182,6 +178,35 @@ angular.module('mainApp').controller('SynthV2Ctrl', ($rootScope, $scope, $http,
         document.querySelector("audio").src = `data:audio/ogg;base64,${base64Src}`;
     }
 
+    // Register event handler
+    function _playOnSpcaeBar(e) {
+        // Do nothing for text box
+        const element = $(e.target);
+        if (element.is("input[type=text]")) {
+            return;
+        }
+        if (e.key === ' ' || e.key === 'Spacebar') {
+            if ($scope.SynthV2Factory.currentContext && $scope.SynthV2Factory.currentContext.state === 'running') {
+                console.log('Stopping with key-press');
+                $scope.stop();
+            } else {
+                console.log('Playing with key-press');
+                $scope.play();
+            }
+            e.preventDefault();
+        }
+    }
+    $(window).on('keypress', _playOnSpcaeBar);
+
+    $scope.$on('Player:Event', (e, eventType) => {
+        $scope.$digest();
+    });
+
+    $scope.$on('$destroy', () => {
+        SynthV2Factory.stop();
+        $(window).off('keypress', _playOnSpcaeBar);
+    });
+
     $scope.addNewChannel();
     _loadSavedConfigs();
 });