<input id="freqRange" type="range" min="220" max="880" value="440">

<input id="freqView" type="number" readonly>

<button id="play">Play</button>
#freqView {
  width: 3em;
}
// 指定の周波数のSin波を1秒奏でる
const playSin = (freq) => {
  const context = new AudioContext();
  const snd = context.createOscillator();
  snd.connect(context.destination);
  snd.type = "sine";
  snd.frequency.value = freq
  snd.start(0);
  setTimeout(() => snd.stop(0), 1000);
}

// rangeで指定した周波数表示
const updateFreqView = () => freqView.value = freqRange.value;
updateFreqView();
freqRange.addEventListener('change', updateFreqView);

// Playボタンを押して鳴らす
play.addEventListener('click', () => playSin(freqRange.value));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.