HTML5 Audio Visual Spectral bounce code

Today learn to use canvas to write the HTML5 audio visual spectrum Bounce code to do a summary of the code here:

<! DOCTYPE html>"en">"UTF-8"> <meta name="Viewport"Content="Width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible"Content="Ie=edge"> &LT;TITLE&GT;HTML5 Audio Visualization Spectrum Bounce Code </title> <style> *{margin:0; padding:0;      } #canvas {display:block; Background:linear-gradient (135deg, RGB (142, -,133)0%, RGB ( the, the, the) -%); }  </style>"Myaudio"Src="./Star Moon myth. mp3"></audio> <canvas id="Canvas"></canvas> <script>window.onload=function () {varOaudio = document.getElementById ('Myaudio'); Window.onclick=function () {if(oaudio.paused) {oaudio.play (); }Else{oaudio.pause (); }      }      //Creating an Audio context object      varOctx =NewAudiocontext (); //Console.log (OCTX); //Create a media source that can be obtained in addition to the audio itself, or through the API provided by the Octx object for media source operations      varAUDIOSRC =Octx.createmediaelementsource (Oaudio); //Creating an analysis machine      varAnalyser =Octx.createanalyser (); //Media source and analysis Machine ConnectionAudiosrc.connect (analyser); //output target: Connect the results analyzed by the analysis machine to the target point (headphone/speaker)Analyser.connect (octx.destination); //effect (concrete method of implementation)//draw the number of lines of an audio graph (fftsize)      /*according to the analysis of the audio data to get the frequency of the definition of the audio graph is placed in a high frequency with the tone of the 8-bit unsigned byte array uint8array: Initialize default value is 1024x768*/      //using Cancas gradients for audio rendering      varCTX = Canvas.getcontext ('2d'); Canvas.width=window.innerwidth; Canvas.height=Window.innerheight; varOW =Canvas.width; varOH =Canvas.height; varcolor = ctx.createlineargradient (OW/2, OH *2/3- -, OW/2, OH *2/3- -); Color.addcolorstop (0,'#000'); Color.addcolorstop (.5,'#069'); Color.addcolorstop (1,'#f6f'); //number of bars in the audio graph      varCount = Max; //buffer: Buffer processing of data, converted to binary data      varVoiceheight =NewUint8array (Analyser.frequencybincount); //Console.log (voiceheight);function Draw () {//Copy the current frequency data into an incoming array of unsigned bytes for real-time connectivityAnalyser.getbytefrequencydata (voiceheight); //Console.log (voiceheight); //Customizing the frequency steps to get the data inside the array        varStep = Math.Round (Voiceheight.length/count); Ctx.clearrect (0,0, OW, OH);  for(vari =0; I < count; i++) {          varAudioheight = Voiceheight[step *i]; Ctx.fillstyle=color; Ctx.fillrect (OW/2+ (I *Ten), OH *2/3,7, -audioheight); Ctx.fillrect (OW/2-(I *Ten), OH *2/3,7, -audioheight);      } window.requestanimationframe (Draw);      } draw (); /*Analysernode provides an analysis of the frequency and time domain to allow you to get real-time data and make audio visualizations Analysernode interface Fftsize Properties Fftsize: Unsigned Long value, used to determine the FFT (Fast Fourier transform) of the frequency domain Ffisize attribute value is 2 non-0 power from 32-bit to 32768 range, the default value is 2048*/    }  </script></body>
HTML5 Audio Visual Spectral bounce code