<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));
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.