binauralbeats/src/components/Main.vue

<template>
  <div class="main">
    <h1>Binaural Beats <small :class="started ? 'started' : 'stopped'"></small></h1>

    <div class="pure-g basic">
      <select class="pure-u-1 pure-u-md-1-2" v-model="preset">
        <option value="" disabled>Preset</option>
        <option value="alpha">Alpha waves</option>
        <option value="beta">Beta waves</option>
        <option value="gamma">Gamma waves</option>
        <option value="delta">Delta waves</option>
        <option value="theta">Theta waves</option>
      </select>
      <button class="stop pure-u-1 pure-u-md-1-2" v-if="started" v-on:click="stop">Stop</button>
      <button class="start pure-u-1 pure-u-md-1-2" v-else v-on:click="start">Start</button>
    </div>

    <div class="pure-g advanced">
      <select class="pure-u-1 pure-u-md-1-5" v-model="waveform">
        <option disabled value="">Waveform</option>
        <option>sine</option>
        <option>square</option>
        <option>triangle</option>
        <option>sawtooth</option>
      </select>
      <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="info" v-if="preset">
      <h2>{{ preset.charAt(0).toUpperCase() + preset.slice(1) }} Waves</h2>
      <p>{{ presets[preset].description }}</p>
    </div>
  </div>
</template>

<script>
import Tone from 'tone'
import 'purecss/build/grids.css'
import 'purecss/build/grids-responsive.css'

export default {
  name: 'Main',
  data () {
    return {
      started: false,
      merge: null,
      leftCh: null,
      rightCh: null,
      waveform: 'sine',
      preset: null,
      presets: {
        alpha: {
          waveform: 'sine',
          left: 130,
          right: 115,
          description: 'mediating, daydreaming; routine tasks'
        },
        beta: {
          waveform: 'sine',
          left: 100,
          right: 115,
          description: 'awake, alert, active, engaged'
        },
        gamma: {
          waveform: 'sine',
          left: 160,
          right: 210,
          description: 'ability to process large amounts of information fastly'
        },
        delta: {
          waveform: 'sine',
          left: 120,
          right: 124,
          description: 'relaxation, healing, spiritual'
        },
        theta: {
          waveform: 'sine',
          left: 150,
          right: 155,
          description: 'trance, daydreaming'
        }
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    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.frequency.value = 430
    },
    start: function () {
      this.leftCh.start()
      this.rightCh.start()
      this.started = true
    },
    stop: function () {
      this.leftCh.stop()
      this.rightCh.stop()
      this.started = false
    }
  },
  watch: {
    waveform: function () {
      this.leftCh.type = this.waveform
      this.rightCh.type = this.waveform
    },
    preset: function () {
      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
    }
  }
}
</script>

<style scoped lang="less">
@green: #859900;
@red: #dc322f;
@bg: #fdf6e3;
@fg: #839496;

h1 {
  small {
    &.started {
      color: @green;
      &:after {
        content: "started";
      }
    }
    &.stopped {
      color: @red;
      &:after {
        content: "stopped";
      }
    }
  }
}

button, select, input {
  font-size: 2em;
  height: 2em;
  color: @fg;
  background-color: @bg;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.1);
}

input {
  width: 100%;
  height: 1.867em;
}

.basic {
  margin-bottom: 0.5em;
}
</style>