This repository has been archived on 2019-03-23. You can view files and clone it, but cannot push or open issues/pull-requests.
binauralbeats/src/components/Main.vue

65 lines
1.4 KiB
Vue

<template>
<div class="main">
<h1>Binaural Beats</h1>
<button v-on:click="start">Start</button>
<button v-on:click="stop">Stop</button>
<select v-model="waveform">
<option>sine</option>
<option>square</option>
<option>triangle</option>
</select>
<input v-model="leftEar.frequency.value">
</div>
</template>
<script>
import Tone from 'tone'
export default {
name: 'Main',
data () {
return {
merge: null,
leftEar: null,
rightEar: null,
waveform: 'sine',
left: 440,
right: 430
}
},
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
},
updateWaveform: function () {
this.leftEar.type = this.waveform
this.rightEar.type = this.waveform
},
start: function () {
this.leftEar.start()
this.rightEar.start()
},
stop: function () {
this.leftEar.stop()
this.rightEar.stop()
}
},
watch: {
waveform: function () {
this.updateWaveform()
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>