Playing Sound in JavaScript Setting Frequencies and Playback with OscillatorNode
Are you looking for a way to play sound in JavaScript but aren’t sure which method to use?
In this article, we explain in detail how to generate and play tones of specific frequencies using AudioContext and OscillatorNode.
Set a frequency and press the “Play Sound” button to hear the tone
Please be careful with the volume when playing sounds.
It’s recommended to start with a low volume and gradually increase it.
Depending on your speakers, high‑frequency tones may not be audible.
Frequency:
440Hz
Volume:
5
1000Hz 2000Hz 4000Hz 8000Hz 12000Hz
Do Re Mi Fa So La Ti Do
Play Sound Stop Sound
Source Code
<div style="display:flex;"><div>Frequency：</div><div id="hz_label">440Hz</div></div>
<input type="range" value="440" max="12000" min="10" step="1" id="hz" style="max-width:100%;width:600px;"><br>
<div style="display:flex;"><div>Volume：</div><div id="vol_label">5</div></div>
<input type="range" value="5" max="100" min="1" step="1" id="vol" style="max-width:100%;width:600px;"><br>
<a onclick="setHz(1000)" style="cursor:pointer;">1000Hz</a>
<a onclick="setHz(2000)" style="cursor:pointer;">2000Hz</a>
<a onclick="setHz(4000)" style="cursor:pointer;">4000Hz</a>
<a onclick="setHz(8000)" style="cursor:pointer;">8000Hz</a>
<a onclick="setHz(12000)" style="cursor:pointer;">12000Hz</a>
<br>
<a onclick="setHz(261)" style="cursor:pointer;">Do</a>
<a onclick="setHz(294)" style="cursor:pointer;">Re</a>
<a onclick="setHz(330)" style="cursor:pointer;">Mi</a>
<a onclick="setHz(349)" style="cursor:pointer;">Fa</a>
<a onclick="setHz(392)" style="cursor:pointer;">So</a>
<a onclick="setHz(440)" style="cursor:pointer;">La</a>
<a onclick="setHz(494)" style="cursor:pointer;">Ti</a>
<a onclick="setHz(522)" style="cursor:pointer;">Do</a>
<br>
<a onclick="" style="cursor:pointer;" id="play">Play Sound</a>
<a onclick="" style="cursor:pointer;" id="stop">Stop Sound</a>
<script>
var audioCtx=null,oscillator=null,gainNode=null,vol=5;
window.addEventListener('DOMContentLoaded',function(){
//Change Frequency
document.getElementById('hz').addEventListener('input',function(){
document.getElementById('hz_label').innerHTML=document.getElementById('hz').value+'Hz';
if(oscillator!=null){
let hz=document.getElementById('hz').value;
oscillator.frequency.setValueAtTime(hz, audioCtx.currentTime);
}
});
//Change Volume
document.getElementById('vol').addEventListener('input',function(){
document.getElementById('vol_label').innerHTML=document.getElementById('vol').value;
vol=document.getElementById('vol').value;
if(gainNode!=null){
gainNode.gain.value=vol/100;
}
});
//Play Sound
document.getElementById('play').addEventListener('click',function(){
if(audioCtx==null){
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
}
if(gainNode==null){
gainNode = audioCtx.createGain();
gainNode.gain.value=vol/100;
}
if(oscillator==null){
oscillator = audioCtx.createOscillator();
oscillator.type = 'sine';
let hz=document.getElementById('hz').value;
oscillator.frequency.setValueAtTime(hz, audioCtx.currentTime);
oscillator.connect(gainNode).connect(audioCtx.destination);
oscillator.start();
}
});
//Stop Sound
document.getElementById('stop').addEventListener('click',function(){
if(oscillator!==null){
oscillator.stop();
oscillator=null;
}
});
});
function setHz(hz){
document.getElementById('hz').value=hz;
document.getElementById('hz_label').innerHTML=hz+'Hz';
if(oscillator!=null){
let hz=document.getElementById('hz').value;
oscillator.frequency.setValueAtTime(hz, audioCtx.currentTime);
}
}
</script>