HTML5 Webaudioapi (iv)--plot spectrum Figure 2

Draws all data from the parser array. The contents of this article, to undertake the above

1.800 width Drawing

varUrl= '. /content/audio/. mp3 ';if(!window. Audiocontext) {alert (' Your browser does not support Audiocontext ');} Else {    //Create Context    varATX =NewAudiocontext (); varSource =NULL; //using AJAX to get audio files    varRequest =NewXMLHttpRequest (); Request.open (' GET ', url,true); Request.responsetype= ' Arraybuffer ';//return type of configuration data    //Load CompleteRequest.onload =function () {        varArraybuffer =Request.response; Atx.decodeaudiodata (Arraybuffer,function(buffer) {//Creating analyzers            varAnalyser =Atx.createanalyser (); SOURCE=Atx.createbuffersource (); //link Source to parserSource.connect (analyser); //link the parser to the destination to form the path to the speakerAnalyser.connect (atx.destination); //Copy the decoded buffer data to the sourceSource.buffer =buffer; //PlaySource.start (0); //start to draw a spectrum map            varCanvas = document.getElementById (' Canvas '), Cwidth=Canvas.width, Cheight=Canvas.height; varCTX = Canvas.getcontext (' 2d '); //define a gradient style for drawing            varGradient = ctx.createlineargradient (0, 0, 0, 300); Gradient.addcolorstop (1, ' #0f0 '); Gradient.addcolorstop (0.5, ' #ff0 '); Gradient.addcolorstop (0, ' #f00 '); Ctx.fillstyle=gradient; //plot a spectral map            functionDrawspectrum () {varArray =NewUint8array (Analyser.frequencybincount);                Analyser.getbytefrequencydata (array); //clean up the canvasCtx.clearrect (0, 0, Cwidth, cheight); //draw only the lines within the current width                /** from the frequency distribution data can be seen in the array of data greater than 800 is 0*/                 for(vari = 0; i < cwidth; i++) {                    varValue =Array[i]; Ctx.fillrect (i, Cheight-Value, 1, Cheight);            } requestanimationframe (Drawspectrum);        } requestanimationframe (Drawspectrum); }, function(e) {console.info (' Processing error ');    });        } request.send (); //Bind play button$ (' #playBtn '). Click (function () {        varIcon = $ ( This). Find (' I ');; Icon.toggleclass (' Glyphicon-play '). Toggleclass (' Glyphicon-pause ')); //Stop playingSource.stop (); });}

2.1024 width Drawing

varurl = '.. /content/audio/. mp3 ';if(!window. Audiocontext) {alert (' Your browser does not support Audiocontext ');} Else {    //Create Context    varATX =NewAudiocontext (); varSource =NULL; //using AJAX to get audio files    varRequest =NewXMLHttpRequest (); Request.open (' GET ', url,true); Request.responsetype= ' Arraybuffer ';//return type of configuration data    //Load CompleteRequest.onload =function () {        varArraybuffer =Request.response; Atx.decodeaudiodata (Arraybuffer,function(buffer) {//Creating analyzers            varAnalyser =Atx.createanalyser (); SOURCE=Atx.createbuffersource (); //link Source to parserSource.connect (analyser); //link the parser to the destination to form the path to the speakerAnalyser.connect (atx.destination); //Copy the decoded buffer data to the sourceSource.buffer =buffer; //PlaySource.start (0); //start to draw a spectrum map            varCanvas = document.getElementById (' Canvas '), Cwidth=Canvas.width, Cheight= Canvas.height-2; CTX= Canvas.getcontext (' 2d '), Gradient= ctx.createlineargradient (0, 0, 0, 300); Gradient.addcolorstop (1, ' #0f0 '); Gradient.addcolorstop (0.5, ' #ff0 '); Gradient.addcolorstop (0, ' #f00 '); varDrawmeter =function () {                varArray =NewUint8array (Analyser.frequencybincount);                Analyser.getbytefrequencydata (array); Ctx.clearrect (0, 0, Cwidth, cheight); number++; if(Number > && number < 1003) {console.info (array); }                if(array[1020] > 0) {console.info (array); }                 for(vari = 0; i < Array.Length; i++) {                    varValue =Array[i]; Ctx.fillstyle=gradient; Ctx.fillrect (i, Cheight-Value, 1, Cheight);            } requestanimationframe (Drawmeter);        } requestanimationframe (Drawmeter); }, function(e) {console.info (' Processing error ');    });    } request.send (); varNumber = 0; //Bind play button$ (' #playBtn '). Click (function () {        varIcon = $ ( This). Find (' I ');; Icon.toggleclass (' Glyphicon-play '). Toggleclass (' Glyphicon-pause ')); //Stop playingSource.stop (); });}

For more information:

Brief introduction of HTML5 Webaudioapi (i.)

HTML5 webaudioapi-Example (ii)

HTML5 Webaudioapi (iii)---plot spectrum map

HTML5 Webaudioapi (iv)--plot spectrum Figure 2