Basic Oscillator Waves

Using the Web Audio API to generate basic oscillator waves. Click and hold on an image to play the sound. Move the mouse up and down to change the frequency.

HTML

<img id="sine" src="http://upload.wikimedia.org/wikipedia/commons/0/02/Simple_sine_wave.svg" draggable="false">
<img id="square" src="http://upload.wikimedia.org/wikipedia/commons/1/1c/Square_wave.svg" width="49%" draggable="false">
<img id="triangle" src="http://upload.wikimedia.org/wikipedia/commons/1/12/Triangle_wave.svg" draggable="false">
<img id="sawtooth" src="http://upload.wikimedia.org/wikipedia/commons/a/a6/Sawtooth_wave.svg" draggable="false">

CSS

img {
    width: 49%;
    float: left;
    border:1px solid blue;
}

JavaScript

// Fix up prefixing
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var ctx = new AudioContext(), currentOsc, isMouseDown, lastY;

function playWave(e) {
    var o = ctx.createOscillator();
    lastY = e.pageY;
    isMouseDown = true;
    o.type = e.currentTarget.id;
    o.frequency.value = 333.333;
    o.start(0);
    o.connect(ctx.destination);
    currentOsc = o;
}
function stopWave(e) {
    isMouseDown = false;
    currentOsc.stop(0);
}
function changeFreq(e) {
    if (isMouseDown) {
        if (e.pageY > lastY) {
            currentOsc.frequency.value -= 1;
            lastY = e.pageY;
        }
        else if (e.pageY < lastY) {
            currentOsc.frequency.value += 1;
            lastY = e.pageY;
        }
    }
}

$("img").mousedown(playWave);
$("img").mouseup(stopWave);
$("img").mousemove(changeFreq);