add noise

src/components/Main.vue

@@ -35,6 +35,14 @@
       <div class="pure-u-1-2 pure-u-md-2-5"><input v-model="leftCh.frequency.value"></div>
       <div class="pure-u-1-2 pure-u-md-2-5"><input v-model="rightCh.frequency.value"></div>
     </div>
+
+    <div class="pure-g noise">
+      <button class="pure-u-1 pure-u-md-2-5" v-if="startedNoise" v-on:click="stopNoise()">Stop Noise</button>
+      <button class="pure-u-1 pure-u-md-2-5" v-else v-on:click="startNoise()">Start Noise</button>
+      <button class="pure-u-1-5 noise-volume">{{ Math.round(100 - noiseVolume / - 0.4) }}</button>
+      <div class="pure-u-4-5 pure-u-md-2-5"><input class="noise-volume" v-model="noiseVolume" type="range" min="-40" step="0.1" max="0"></div>
+    </div>
+
     <div class="info" v-if="preset">
       <h2>{{ preset.charAt(0).toUpperCase() + preset.slice(1) }} Waves</h2>
       <p>{{ presets[preset].description }}</p>
@@ -52,9 +60,12 @@ export default {
   data () {
     return {
       started: false,
+      startedNoise: false,
       merge: null,
       leftCh: null,
       rightCh: null,
+      noise: null,
+      noiseVolume: -20,
       waveform: 'sine',
       preset: null,
       presets: {
@@ -155,9 +166,12 @@ export default {
     init: function () {
       this.merge = new Tone.Merge().toMaster()
       this.leftCh = new Tone.Oscillator().connect(this.merge.left)
-      this.rightCh = new Tone.Oscillator().connect(this.merge.right)
       this.leftCh.frequency.value = 440
+      this.rightCh = new Tone.Oscillator().connect(this.merge.right)
       this.rightCh.frequency.value = 430
+      this.noise = new Tone.Noise().toMaster()
+      this.noise.type = 'brown'
+      this.noise.volume.value = -20 // = 50 %
     },
     start: function () {
       this.leftCh.start()
@@ -168,6 +182,14 @@ export default {
       this.leftCh.stop()
       this.rightCh.stop()
       this.started = false
+    },
+    startNoise: function () {
+      this.noise.start()
+      this.startedNoise = true
+    },
+    stopNoise: function () {
+      this.noise.stop()
+      this.startedNoise = false
     }
   },
   watch: {
@@ -179,6 +201,9 @@ export default {
       this.waveform = this.presets[this.preset].waveform
       this.leftCh.frequency.value = this.presets[this.preset].left
       this.rightCh.frequency.value = this.presets[this.preset].right
+    },
+    noiseVolume: function () {
+      this.noise.volume.value = this.noiseVolume
     }
   }
 }
@@ -222,7 +247,15 @@ input {
   height: 1.867em;
 }
 
-.basic {
+.basic, .advanced {
   margin-bottom: 0.5em;
 }
+
+input.noise-volume {
+  margin: 0;
+}
+
+button.noise-volume {
+  padding: 0 3px;
+}
 </style>