122 lines
3.2 KiB
Vue
122 lines
3.2 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">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>
|
|
<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'
|
|
|
|
export default {
|
|
name: 'Main',
|
|
data () {
|
|
return {
|
|
started: false,
|
|
merge: null,
|
|
leftEar: null,
|
|
rightEar: 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.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>
|