JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<input id="one" type="range" value="200" min="30" max="1000" />

<input id="two" type="range" value="200" min="30" max="1000" />

<!-- <input id="3" type="range" value="200" min="30" max="1000" /> -->

JavaScript

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

const oscillator1 = audioCtx.createOscillator();

const slider1 = document.querySelector("#one");
oscillator1.frequency.setValueAtTime(Number(slider1.value), audioCtx.currentTime);
slider1.addEventListener("input", (event) => {
  oscillator1.frequency.setValueAtTime(Number(slider1.value), audioCtx.currentTime);
});

oscillator1.type = 'sine';
oscillator1.connect(audioCtx.destination);
oscillator1.start();




const oscillator2 = audioCtx.createOscillator();

const slider2 = document.querySelector("#two");
oscillator2.frequency.setValueAtTime(Number(slider2.value), audioCtx.currentTime);
slider2.addEventListener("input", (event) => {
  oscillator2.frequency.setValueAtTime(Number(slider2.value), audioCtx.currentTime);
});

oscillator2.type = 'sine';
oscillator2.connect(audioCtx.destination);
oscillator2.start();