WebAudio and WebMIDI Experiments
Support for the Web Audio API is not the same in all browsers. If you have trouble playing the examples, try using Chrome.
Simple Tone
Use a WebAudio and JavaScript to generate a tone using an oscillator.
Roll mouse over the paragraphs below to start and stop sound.
Roll mouse over for 800 Hz tone
Roll mouse over for 400 Hz tone
Roll mouse over for 200 Hz tone
Roll mouse over for 100 Hz tone
JavaScript code for the tone generator.
The example below creates an Oscillator. It uses "webaudio_tools.js".
// Example showing how to produce a tone using Web Audio API.
// Load the file webaudio_tools.js before loading this file.
// This code will write to a DIV with an id="soundStatus".
var oscillator;
var amp;
// Create an oscillator and an amplifier.
function initAudio()
{
// Use audioContext from webaudio_tools.js
if( audioContext )
{
oscillator = audioContext.createOscillator();
fixOscillator(oscillator);
oscillator.frequency.value = 440;
amp = audioContext.createGain();
amp.gain.value = 0;
// Connect oscillator to amp and amp to the mixer of the audioContext.
// This is like connecting cables between jacks on a modular synth.
oscillator.connect(amp);
amp.connect(audioContext.destination);
oscillator.start(0);
writeMessageToID( "soundStatus", "<p>Audio initialized.</p>");
}
}
// Set the frequency of the oscillator and start it running.
function startTone( frequency )
{
var now = audioContext.currentTime;
oscillator.frequency.setValueAtTime(frequency, now);
// Ramp up the gain so we can hear the sound.
// We can ramp smoothly to the desired value.
// First we should cancel any previous scheduled events that might interfere.
amp.gain.cancelScheduledValues(now);
// Anchor beginning of ramp at current value.
amp.gain.setValueAtTime(amp.gain.value, now);
amp.gain.linearRampToValueAtTime(0.5, audioContext.currentTime + 0.1);
writeMessageToID( "soundStatus", "<p>Play tone at frequency = " + frequency + "</p>");
}
function stopTone()
{
var now = audioContext.currentTime;
amp.gain.cancelScheduledValues(now);
amp.gain.setValueAtTime(amp.gain.value, now);
amp.gain.linearRampToValueAtTime(0.0, audioContext.currentTime + 1.0);
writeMessageToID( "soundStatus", "<p>Stop tone.</p>");
}
// init once the page has finished loading.
window.onload = initAudio;