262 lines
6.7 KiB
Vue
262 lines
6.7 KiB
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>
|
|
<option value="focus">Focus</option>
|
|
<option value="creativity">Creativity</option>
|
|
<option value="relaxation">Relaxation</option>
|
|
<option value="sleep">Sleep</option>
|
|
<option value="chanting">Chanting</option>
|
|
<option value="intuition">Intuition</option>
|
|
<option value="healing">Healing</option>
|
|
<option value="intelligence">Intelligence</option>
|
|
<option value="euphoria">Euphoria</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="pure-g noise">
|
|
<button class="pure-u-1 pure-u-md-2-5" v-if="startedNoise" v-on:click="stopNoise()">Stop Noise</button>
|
|
<button class="pure-u-1 pure-u-md-2-5" v-else v-on:click="startNoise()">Start Noise</button>
|
|
<button class="pure-u-1-5 noise-volume">{{ Math.round(100 - noiseVolume / - 0.4) }}</button>
|
|
<div class="pure-u-4-5 pure-u-md-2-5"><input class="noise-volume" v-model="noiseVolume" type="range" min="-40" step="0.1" max="0"></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,
|
|
startedNoise: false,
|
|
merge: null,
|
|
leftCh: null,
|
|
rightCh: null,
|
|
noise: null,
|
|
noiseVolume: -20,
|
|
waveform: 'sine',
|
|
preset: null,
|
|
presets: {
|
|
alpha: {
|
|
waveform: 'sine',
|
|
left: 130,
|
|
right: 139,
|
|
description: 'mediating, daydreaming; routine tasks'
|
|
},
|
|
beta: {
|
|
waveform: 'sine',
|
|
left: 100,
|
|
right: 120,
|
|
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: 122,
|
|
description: 'relaxation, healing, spiritual'
|
|
},
|
|
theta: {
|
|
waveform: 'sine',
|
|
left: 150,
|
|
right: 155,
|
|
description: 'trance, daydreaming'
|
|
},
|
|
/*
|
|
* Preset based on http://www.guidedmeditationtreks.com/binauralwebapp.html
|
|
*/
|
|
focus: {
|
|
waveform: 'sine',
|
|
left: 256,
|
|
right: 270,
|
|
description: ''
|
|
},
|
|
creativity: {
|
|
waveform: 'sine',
|
|
left: 174.7,
|
|
right: 185.3,
|
|
description: ''
|
|
},
|
|
relaxation: {
|
|
waveform: 'sine',
|
|
left: 133,
|
|
right: 139,
|
|
description: ''
|
|
},
|
|
sleep: {
|
|
waveform: 'sine',
|
|
left: 139.3,
|
|
right: 142.7,
|
|
description: ''
|
|
},
|
|
chanting: {
|
|
waveform: 'sine',
|
|
left: 429.75,
|
|
right: 434.25,
|
|
description: ''
|
|
},
|
|
intuition: {
|
|
waveform: 'sine',
|
|
left: 208.25,
|
|
right: 213.75,
|
|
description: ''
|
|
},
|
|
healing: {
|
|
waveform: 'sine',
|
|
left: 145,
|
|
right: 154,
|
|
description: ''
|
|
},
|
|
intelligence: {
|
|
waveform: 'sine',
|
|
left: 485.5,
|
|
right: 498.5,
|
|
description: ''
|
|
},
|
|
euphoria: {
|
|
waveform: 'sine',
|
|
left: 200,
|
|
right: 220,
|
|
description: ''
|
|
}
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init: function () {
|
|
this.merge = new Tone.Merge().toMaster()
|
|
this.leftCh = new Tone.Oscillator().connect(this.merge.left)
|
|
this.leftCh.frequency.value = 440
|
|
this.rightCh = new Tone.Oscillator().connect(this.merge.right)
|
|
this.rightCh.frequency.value = 430
|
|
this.noise = new Tone.Noise().toMaster()
|
|
this.noise.type = 'brown'
|
|
this.noise.volume.value = -20 // = 50 %
|
|
},
|
|
start: function () {
|
|
this.leftCh.start()
|
|
this.rightCh.start()
|
|
this.started = true
|
|
},
|
|
stop: function () {
|
|
this.leftCh.stop()
|
|
this.rightCh.stop()
|
|
this.started = false
|
|
},
|
|
startNoise: function () {
|
|
this.noise.start()
|
|
this.startedNoise = true
|
|
},
|
|
stopNoise: function () {
|
|
this.noise.stop()
|
|
this.startedNoise = 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
|
|
},
|
|
noiseVolume: function () {
|
|
this.noise.volume.value = this.noiseVolume
|
|
}
|
|
}
|
|
}
|
|
</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, .advanced {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
input.noise-volume {
|
|
margin: 0;
|
|
}
|
|
|
|
button.noise-volume {
|
|
padding: 0 3px;
|
|
}
|
|
</style>
|