HTML5 Getusermedia/audiocontext to create sound spectrum graphics

Demand is the analysis of audio, with graphical display.

Ideas:

1, recall that the use of the player, such as XX listening to the General 2 kinds of graphical display of a bar column is a ripple

2, the analysis of data into an image this is the canvas commonly used, before the canvas analysis of the image data, do the filter deformation are hooping, here of course, graphic also to the canvas.

3, since the analysis of audio, it is necessary to convert the audio into data, can be analyzed, and about the audio HTML API has audio tags, and the microphone access to Getusermedia. What the? You asked me how I know this API? I can only tell you to check the MDN, Web site such as ...

First we want to get the audio data, here we use 2 ways to get, one is the audio stream, one is the microphone

1. API compatible

Window. Audiocontext = (window. Audiocontext | | Window.webkitaudiocontext | |  = Window.requestanimationframe | | Window.webkitrequestanimationframe; Try {    new  audiocontext;    Console.log (' browser support Audiocontext ');  Catch(e) {    console.log (' browser does not support Audiocontext ', e); };

2. Get Microphone Data

// start listening             . if (Navigator.getusermedia) {    console.log (' browser support Getusermedia ');     = "Checked";    Navigator.getusermedia (    //  We only get the microphone data, you can also set video to True to get the camera data     {         true     },     Else {    console.log (' browser does not support Getusermedia ')    ; = "false";};

Through onsccess to get data, interventional analysis

// Success Callback function Onsccess (stream) {    // sounds input pair like    Source = Audioctx.createmediastreamsource ( stream);    Source.connect (analyser);    Analyser.connect (distortion);    Distortion.connect (biquadfilter);    Biquadfilter.connect (convolver);    Convolver.connect (Gainnode);    Gainnode.connect (audioctx.destination);    Visualize (); // Analyze Audio }

Similarly, the file is the same

if (mediasetting = = "File") {    loadFile ()    ; // get the data source    Source=Audioctx.createmediaelementsource (audio);     // Connecting Nodes     Source.connect (analyser);    Analyser.connect (distortion);    Distortion.connect (Gainnode);    Gainnode.connect (audioctx.destination);}

Visualize ();//analyze Audio

Get the data, then make a canvas king.

//Ripple 1if(visualsetting = = "Wave1") {analyser.fftsize= 2048; varBufferlength =analyser.fftsize;    Console.log (bufferlength); varDataArray =NewUint8array (bufferlength); Canvasctx.clearrect (0, 0, WIDTH, HEIGHT); Draw=function() {drawvisual=Requestanimationframe (Draw);        Analyser.getbytetimedomaindata (DataArray); Canvasctx.fillstyle= ' #000 '; Canvasctx.fillrect (0, 0, WIDTH, HEIGHT); Canvasctx.linewidth= 2; Canvasctx.strokestyle= ' #4aeb46 ';        Canvasctx.beginpath (); varSlicewidth = WIDTH * 1.0/bufferlength; varx = 0;  for(vari = 0; i < bufferlength; i++) {            varv = dataarray[i]/128.0; vary = v * height/2; if(i = = 0) {Canvasctx.moveto (x, y); } Else{canvasctx.lineto (x, y); } x+=Slicewidth; } canvasctx.lineto (Canvas.width, Canvas.height/2);    Canvasctx.stroke ();    }; Draw ();}

//CircleElse if(visualsetting = = "Circle") {    //analyser.fftsize = 1024x768;    //var bufferlength = analyser.fftsize;    //var dataarray = new Uint8array (bufferlength);Analyser.fftsize = 128; varFrequencydata =NewUint8array (Analyser.frequencybincount); varCount =Analyser.frequencybincount; varCircles = []; varCirclemaxwidth = (height*0.66) >> 0; Canvasctx.clearrect (0, 0, WIDTH, HEIGHT); Canvasctx.linewidth= 1;  for(vari = 0; I < count; i++) {Circles.push (i/count*circlemaxwidth)} Draw=function() {Canvasctx.clearrect (0, 0, WIDTH, HEIGHT);        Analyser.getbytefrequencydata (Frequencydata); Drawvisual=Requestanimationframe (Draw);  for(vari = 0; i < circles.length; i++) {            varv = frequencydata[i]/128.0; vary = v * height/2; varCircle =Circles[i];            Canvasctx.beginpath (); Canvasctx.arc (WIDTH/2,HEIGHT/2, Y/2, Math.PI * 2, false);Canvasctx.stroke ()}};                    Draw (); }

//Cylindrical BarElse if(visualsetting = = "Bar") {analyser.fftsize= 256; varBufferlength =Analyser.frequencybincount;    Console.log (bufferlength); varDataArray =NewUint8array (bufferlength); Canvasctx.clearrect (0, 0, WIDTH, HEIGHT); varGradient = canvasctx.createlineargradient (0, 0, 0, 200); Gradient.addcolorstop (1, ' #0f0 '); Gradient.addcolorstop (0.5, ' #ff0 '); Gradient.addcolorstop (0, ' #f00 '); varBarWidth = 10; varGap = 2;//spacing    varCapheight = 2;//height of top    varCapstyle = ' #fff '; varBarnum = WIDTH/(barwidth + gap);//Bar Number    varCapypositionarray = []; varStep = Math.Round (Dataarray.length/Barnum); Draw=function() {drawvisual=Requestanimationframe (Draw);        Analyser.getbytefrequencydata (DataArray); Canvasctx.clearrect (0, 0, WIDTH, HEIGHT);  for(vari = 0; I < Barnum; i++) {            varValue = Dataarray[i *Step]; if(Capypositionarray.length <Math.Round (Barnum))            {Capypositionarray.push (value);            }; Canvasctx.fillstyle=Capstyle; //Top Hat            if(Value <Capypositionarray[i]) {Canvasctx.fillrect (i*, HEIGHT-(--Capypositionarray[i]), BarWidth, capheight); } Else{canvasctx.fillrect (i*, HEIGHT-value, BarWidth, capheight); Capypositionarray[i]=value;            }; Canvasctx.fillstyle= gradient;//GradientCanvasctx.fillrect (i *, Height-value + capheight, barwidth, HEIGHT-2);//Draw Bar        }    }; Draw ();}

Full code GitHub

HTML5 Getusermedia/audiocontext to create sound spectrum graphics