JSFiddle - React, Tailwind, and code Playground

by nynexman4464

HTML

<input type=range min=0 max=100 id=range>
<input type=number min=20 max=20000 id=number>
<button onclick="toggle()">
start/stop
</button>

JavaScript

var context = new AudioContext();

var osc = context.createOscillator();
osc.frequency.value = 440;

let x = false;

osc.start(0);
// position will be between 0 and 100
var minp = 0;
var maxp = 100;

// The result should be between 100 an 10000000
var minv = Math.log(10);
var maxv = Math.log(20000);

// calculate adjustment factor
var scale = (maxv - minv) / (maxp - minp);

function logslider(position) {

  return Math.exp(minv + scale * (position - minp));
}

function logposition(value) {
  // set minv, ... like above
  // ...
  return (Math.log(value) - minv) / scale + minp;
}

function toggle() {
  if (!x) {
    osc.connect(context.destination);
  } else {
    osc.disconnect(context.destination);
  }
  x = !x;
}
document.getElementById('range').addEventListener('input', elt => {
  document.getElementById('number').value = osc.frequency.value = logslider(elt.target.value);

});
document.getElementById('number').addEventListener('input', elt => {
  const v = osc.frequency.value = elt.target.value;
  document.getElementById('range').value = logposition(v);
});