<div class="content-wrapper">

​

    <audio id="audiosource" controls >

        <source src="http://www.tonycuffe.com/mp3/tail%20toddle.mp3"/>

    </audio>

    <br>

​

    <canvas id="drawer" width="640" height="240"></canvas>

    <textarea id="debugger" style="width: 100%" rows="20"></textarea>

</div>

​

<script>

    window.onload = function(){

​

​

        var stopaudioprocessfordebug = false;

        var audioCtx = null;

        if (typeof AudioContext !== 'undefined') {

            audioCtx = new AudioContext();

        } else if (typeof webkitAudioContext !== 'undefined') {

            audioCtx = new webkitAudioContext();

        } else {

            audioCtx = null;

        }

​

        if(audioCtx){

​

​

            if(typeof audioCtx.createJavaScriptNode!='undefined'){

                javascriptNode = audioCtx.createJavaScriptNode(2048, 1, 1);

            }

            if(typeof audioCtx.createScriptProcessor!='undefined'){

                javascriptNode = audioCtx.createScriptProcessor(4096, 1, 1);

                //console.log(javascriptNode);

            }

​

            analyser = audioCtx.createAnalyser();

            analyser.smoothingTimeConstant = 0.3;

            analyser.fftSize = 512;

​

​

            //oscillator = audioCtx.createOscillator();

            //oscillator.start(0);

​

// Set up a script node that sets output to white noise

            javascriptNode.onaudioprocess = function(event) {

                //var output = event.outputBuffer.getChannelData(0);

                //for (i = 0; i < output.length; i++) {

                //    output[i] = Math.random() / 10;

                //}

​

                if(stopaudioprocessfordebug){

                    return;

                }

​

​

​

                var array =  new Uint8Array(analyser.frequencyBinCount);

                //console.info(analyser, analyser.getByteFrequencyData(array), new Uint8Array(analyser.frequencyBinCount));

//                console.log('Processing buffer', array);

​

                var sw_test = false;

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

//                    console.info(array[i])

//                    jQuery('#debugger').val(jQuery('#debugger').val() + array[i]);

                    if(Number(array[i])>0){

                        sw_test = true;

                    }

​

                }

​

//                console.info(sw_test);

                if(sw_test){

//                    jQuery('#debugger').val('array values not 0')

​

                }else{

​

//                    jQuery('#debugger').val('array values 0')

                }

​

//                    jQuery('#debugger').val(jQuery('#debugger').val() + '\n \n');

​

                analyser.getByteFrequencyData(array);

                console.info(array, array[20]);

​

//                analyser.getByteTimeDomainData(array);

                lastarray = array;

​

                drawSpectrum(lastarray);

            };

​

// Connect oscillator to script node and script node to destination

// (should output white noise)

//                                oscillator.connect(javascriptNode);

​

​

            setTimeout(function(){

//                stopaudioprocessfordebug = true;

            },3000);

​

            var _cmedia = document.getElementById('audiosource');

            webaudiosource = audioCtx.createMediaElementSource(_cmedia);

            webaudiosource.connect(analyser);

            //console.log(webaudiosource);

            analyser.connect(audioCtx.destination);

​

​

            javascriptNode.connect(audioCtx.destination);

        }

​

        var _can = document.getElementById('drawer');

        var _scrubBgCanvasCtx = _can.getContext('2d');

        var canw = _can.width;

        var canh = 240;

​

        function drawSpectrum(parray){

​

            var gradient = _scrubBgCanvasCtx.createLinearGradient(0,0,canw,canh);

            /*

             gradient.addColorStop(1,'#000000');

             gradient.addColorStop(0.75,'#ff0000');

             gradient.addColorStop(0.25,'#ffff00');

             gradient.addColorStop(0,'#ffffff');

             */

            _scrubBgCanvasCtx.clearRect(0, 0, canw, canh);

            _scrubBgCanvasCtx.fillStyle='#333333';

​

​

​

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

                var value = parray[i];

                //console.log(i, value, canh - (canh-value/256));

                _scrubBgCanvasCtx.fillRect(i/256 * canw,canh-((value/256)*canh),canw/parray.length,canh);

                // console.log([i,value])

​

            }

        }

​

    }

​

</script>