Meter Canvas

by Ehsan Ziya

HTML

<canvas id='meter' width='100' height='400'></canvas></br>
		<button id='button' value='play'>Play</button>

CSS

body{
			text-align: center;
		}
		canvas#meter{
			border: solid 1px black;
		}

JavaScript

window.onload = function(){
	
	var context = new webkitAudioContext();
	//var osc1 = context.createOscillator();
	//var osc2 = context.createOscillator();
	var gainL = context.createGainNode();
	var gainR = context.createGainNode();
	var merger = context.createChannelMerger();
	var splitter = context.createChannelSplitter();
	var scpr = context.createScriptProcessor(1024,2,2);


	var canvas = document.querySelector('#meter');
	var ctx = canvas.getContext("2d");
	var height = canvas.height;
	var width = canvas.width;

	var button = document.getElementById('button');

	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 seda = new Sound('http://thelab.thingsinjars.com/web-audio-tutorial/hello.mp3');

	button.addEventListener('click',function(){
		seda.play(splitter,false,1,1);
		splitter.connect(gainL,0,0);
		splitter.connect(gainR,1,0);
		//splitter.connect(gainR,0,1);
		gainL.gain.value = 0.5;
		gainR.gain.value =...