Web Audio Oscillator Test w/ Linear Ramp

by razh

HTML

<button id="play">Play</button>
<button id="stop">Stop</button>

JavaScript

var audioContext = new webkitAudioContext();

var oscillator;
var gain = audioContext.createGainNode();

gain.connect(audioContext.destination);
gain.gain.value = 0.1;

var glideStartTime = 1000,
    glideTime = 2;

var startFrequency  = 440,
    targetFrequency = 880;

function start() {
    oscillator = audioContext.createOscillator();
    
    oscillator.type = 0;
    oscillator.frequency.value = startFrequency;
    oscillator.connect(gain);

    oscillator.start(0);
    
    setTimeout(function() {
        oscillator.frequency.setValueAtTime(startFrequency, audioContext.currentTime);
        oscillator.frequency.linearRampToValueAtTime(targetFrequency, audioContext.currentTime + glideTime);
        console.log('Start glide.');
    }, glideStartTime);
    
    step();
}

var elapsed = 0;
function step() {
    elapsed++;
    if (elapsed > 5) {
        console.log(oscillator.frequency.value);
        elapsed = 0;
    }
    requestAnimationFrame(step);
}

function stop() {
    oscillator.stop(0);
    running = false;
}

$('#play').bind('click', start);
$('#stop').bind('click', stop);