XY Sound

by Ehsan Ziya

HTML

<script src="http://anthonyterrien.com/js/jquery.kontrol.js"></script>
<input type="button" value="Play" id="play">
<input type="button" value="Stop" id="stop">
</br>
    <input type="text" class="xy" value='{"x": 0, "y": 0}' data-width=300 data-height=300>

JavaScript

$(document).ready(function(){
var context = new webkitAudioContext();
var mastergain = context.createGain();
var filter = context.createBiquadFilter();
    filter.type = "lowpass";
    filter.connect(mastergain);
    filter.frequency.value = 16000;
    mastergain.connect(context.destination);




function Sound(source){

    var that = this;
    that.source = source;
    that.buffer = null;
    that.isLoaded = false;
    this.soundGain = context.createGainNode();

    var request = new XMLHttpRequest();
        request.open('GET', source , true);
        request.responseType = "arraybuffer";
    request.onload = function(){
        context.decodeAudioData(request.response, function(buffer){
        that.buffer = buffer;
        that.isLoaded = true;
        });
    };
    request.send();
    
    this.play = function(destination, loop, speed, gain){
        
        if(that.isLoaded === true){
    this.sound = context.createBufferSource();
    
    this.sound.buffer = this.buffer;
    this.destination = destination;
    this.speed = speed;
    this.gain = gain;
    this.sound.loop = loop;
    this.sound.playbackRate.value = speed; 
    this.soundGain.gain.value = gain;
    this.sound.connect(this.soundGain);
    this.soundGain.connect(destination);
    this.sound.start(0);
        }
};
    
    this.stop = function(){
    this.sound.stop(0);
};
}
var sound = new Sound('http://thelab.thingsinjars.com/web-audio-tutorial/hello.mp3');


    $('#play').click(function(){
    sound.play(filter , true , 1 , 1);
    });
    
    $('#stop').click(function(){
    sound.stop();
    });
    
    $(".xy").xy({
        min : 1,
        max : 100,
        step : 1,
        
        'draw' : function(){
        var obj = JSON.parse($(".xy").val());
        filter.frequency.value = obj.x * 100;
        sound.sound.playbackRate.value = (obj.y + 100) * 0.01;
        }
        
    }).css({
    'border': '5px solid #DDD'
    });


});