//setup audio context

window.AudioContext = window.AudioContext || window.webkitAudioContext;

var context = new window.AudioContext();

​

//create nodes

var osc; //create in event listener so we can press the button more than once

var masterGain = context.createGain();

var analyser = context.createAnalyser();

​

//routing

masterGain.connect(analyser);

analyser.connect(context.destination);

​

//draw function for canvas

function drawWave(buffer, canvas) {

  var canvasContext = canvas.getContext('2d');

  canvasContext.fillstyle = 'black';

  canvasContext.clearRect(0, 0, 1024, 220);

  for (var i = 0; i < buffer.length; i++) {

    var length = buffer.length;

    var xPercentage = i/length;

    var yHeight = ((buffer[i])*100) + 100;

    canvasContext.beginPath();

    canvasContext.rect(xPercentage * canvas.width, yHeight, 1, 1);

    canvasContext.fill();   

    canvasContext.closePath();

  }

}

​

//button trigger

$(function() {  

  var c = document.getElementById('scope');

  c.height = 220;

  c.width = 1024;

  $('.playsound').on('mousedown', function() {

    osc = context.createOscillator();

    //osc settings

    osc.frequency.value = 220;

    var real = new Float32Array([0,0,1,0,1]);

    var imag = new Float32Array(real.length);

    var customWave = context.createPeriodicWave(real,imag);

    osc.setPeriodicWave(customWave);

​

    osc.connect(masterGain);

    osc.start();

    var analyserData = new Float32Array(1024);

    analyser.getFloatTimeDomainData(analyserData);

    console.log(analyserData);

    drawWave(analyserData,c);

  });

​

  $('.playsound').on('mouseup', function() {

    osc.stop();

  }); 

});