98 lines
2.4 KiB
Vue
98 lines
2.4 KiB
Vue
<template>
|
||
<div class="main">
|
||
<h1>Binaural Beats {{ started ? 'started' : 'stopped' }}</h1>
|
||
<button v-on:click="start">Start</button>
|
||
<button v-on:click="stop">Stop</button>
|
||
<select v-model="waveform">
|
||
<option disabled value="">Waveform</option>
|
||
<option>sine</option>
|
||
<option>square</option>
|
||
<option>triangle</option>
|
||
<option>sawtooth</option>
|
||
</select>
|
||
<input v-model="leftEar.frequency.value">
|
||
<input v-model="rightEar.frequency.value">
|
||
<select v-model="preset">
|
||
<option disabled value="">Preset</option>
|
||
<option value="alpha">α waves</option>
|
||
<option value="beta">β waves</option>
|
||
<option value="gamma">γ waves</option>
|
||
<option value="delta">δ waves</option>
|
||
<option value="theta">θ waves</option>
|
||
</select>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Tone from 'tone'
|
||
|
||
export default {
|
||
name: 'Main',
|
||
data () {
|
||
return {
|
||
started: false,
|
||
merge: null,
|
||
leftEar: null,
|
||
rightEar: null,
|
||
waveform: 'sine',
|
||
preset: null,
|
||
presets: {
|
||
alpha: {
|
||
waveform: 'sine',
|
||
right: 150,
|
||
left: 155
|
||
},
|
||
beta: {
|
||
waveform: 'sine',
|
||
right: 130,
|
||
left: 139
|
||
}
|
||
}
|
||
}
|
||
},
|
||
created () {
|
||
this.init()
|
||
},
|
||
methods: {
|
||
init: function () {
|
||
this.merge = new Tone.Merge().toMaster()
|
||
this.leftEar = new Tone.Oscillator().connect(this.merge.left)
|
||
this.rightEar = new Tone.Oscillator().connect(this.merge.right)
|
||
this.leftEar.frequency.value = 440
|
||
this.rightEar.frequency.value = 430
|
||
},
|
||
start: function () {
|
||
this.leftEar.start()
|
||
this.rightEar.start()
|
||
this.started = true
|
||
},
|
||
stop: function () {
|
||
this.leftEar.stop()
|
||
this.rightEar.stop()
|
||
this.started = false
|
||
}
|
||
},
|
||
watch: {
|
||
waveform: function () {
|
||
this.leftEar.type = this.waveform
|
||
this.rightEar.type = this.waveform
|
||
},
|
||
preset: function () {
|
||
this.waveform = this.presets[this.preset].waveform
|
||
this.leftEar.frequency.value = this.presets[this.preset].left
|
||
this.rightEar.frequency.value = this.presets[this.preset].right
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||
<style scoped>
|
||
button, select, input {
|
||
color: black;
|
||
background-color: white;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
}
|
||
</style>
|