<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>
