Dynamic binaural beats generator

Dynamic binaural beats generator

by fxi

HTML

<script src="https://tonejs.github.io/build/Tone.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/andrepxx/pure-knob@master/pureknob.min.js"></script>
<button id="start" type="button">start</button>
<button id="stop" type="button">stop</button>

<div class="channel">
  <label class='side'>left
  <input id='aMute' type="checkbox" checked>
  </label>
  <input class='inHz' id="a" type=range min=0 max=400 value=61>
  <h1 class='hz' id="aHz">61</h1>
</div>

<div class="channel">
  <label class='side'>right
    <input id='bMute' type="checkbox" checked>
  </label>
  <input class='inHz' id="b" type=range min=0 max=400 value=61>
  <h1 class="hz" id="bHz">61</h1>
</div>

<div id=knob></div>

CSS

body {
  font-family: sans, helvetica, arial;
  width: 80%;
  height: 80%;
  background:#000;
}

.channel {
  width: 100%;
  padding: 40px;
  border: 1px solid #000;
  border-radius: 10px;
  margin: 10px;
}

.channel .side,
.channel .hz {
  display: block;
  text-align: center;
}

.channel .inHz {
  display: block;
  width: 100%;
}

.channel .mute

JavaScript

var elA = document.getElementById('a')
var elAMute = document.getElementById('aMute')
var elStart = document.getElementById('start')
var elB = document.getElementById('b')
var elBMute = document.getElementById('bMute')
var elStop = document.getElementById('stop')
var elAhz = document.getElementById('aHz')
var elBhz = document.getElementById('bHz')

window.panRight = new Tone.PanVol(1);
var panLeft = new Tone.PanVol(-1);

var oscA = new Tone.Oscillator({
  "frequency": 60,
  "volume": 0
})

var oscB = new Tone.Oscillator({
  "frequency": 60,
  "volume": 0
})

oscA.connect(panLeft.toMaster());
oscB.connect(panRight.toMaster());

var start = () => {
  oscA.start()
  oscB.start()
  Tone.Master.volume.rampTo(0, 0.05);
}
var stop = () => {
  Tone.Master.volume.rampTo(-Infinity, 0.05);
}

function updateFreq(e) {
  e.target
}

elAMute.addEventListener('change', e => {
  var dest = e.target.checked ? 0 : -Infinity;
  panLeft.volume.rampTo(dest, 1);
})
elBMute.addEventListener('change', e => {
  var dest = e.target.checked ? 0 : -Infinity;
  panRight.volume.rampTo(dest, 1);
})
elA.addEventListener('input', e => {
  elAhz.innerText = e.target.value;
  oscA.frequency.value = e.target.value * 1;
})

elB.addEventListener('input', e => {
  elBhz.innerText = e.target.value;
  oscB.frequency.value = e.target.value * 1;
});

elStart.addEventListener('click', start)
elStop.addEventListener('click', stop)

var knob = pureknob.createKnob(100, 100);

// Set properties.
knob.setProperty('angleStart', -0.75 * Math.PI);
knob.setProperty('angleEnd', 0.75 * Math.PI);
knob.setProperty('colorFG', '#88ff88');
knob.setProperty('trackWidth', 0.4);
knob.setProperty('valMin', 0);
knob.setProperty('valMax', 100);

// Set initial value.
knob.setValue(50);

var listener = function(knob, value) {
	console.log(value);
};

knob.addListener(listener);

// Create element node.
var node = knob.node();

// Add it to the DOM.
var elem = document.getElementById('knob');
elem.appendChild(node);