master
Simon Bruder 5 years ago
parent 3a87f0edb9
commit c6d110adcb
  1. 37
      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>