binauralbeats/src/components/Main.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>