Edit in JSFiddle

// 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 = 261.63;
    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);

<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">

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