Music, let ' s go

Recently, I've been studying a new gadget called window. Audiocontext: Don't you understand? It's okay, I'm just in touch, it's all a whole new field,
What the hell is this thing doing? As the name implies, the media context, that is, your media data analysis, is a string of data ah? What's the use? Yes, pure data is meaningless, but if the data are combined with canvas, it will produce magical effects (such as Baidu's Echart), where the audiocontext combined with canvas can produce a music visualization effect, that is, the kind of mobile phone MP3 player effect, also called music visualization;
First principle:
The front end obtains the buffer data, then uses the parsing object, parses the data, puts the analytic result in the array, then joins, finally uses the canvas to draw out;

Background code

Const EXPRESS = require (' Express '= require (' fs '= Express (); App.get (function  (Req,res) {  fs.readfile (' maksim-Croatian rhapsody. mp3 ', (err, name) = =      {ifreturn       res.send (name)})  })

HTML section

< Body > <  type= "Range"  ID= "Radio">  //Change volume <  id = "MyCanvas" ></canvas >   </body>

First the front-end initiates the request, requests the stream of music

      functionGetData () {varXHR =NewXMLHttpRequest () Xhr.open (' Get ', '/app/test '); Xhr.responsetype= ' Arraybuffer '; Xhr.onload=function () {          //parse the data from the background, and then copy the data to the buffer on the front;the first link must be the analyst, who gets the raw data ac.decodeaudiodata (Xhr.response,function(buffer) {varBuffesource =Ac.createbuffersource ();//Create data, where Buffersource has an attribute loop is whether the music is looping

                  = buffer                  buffesource.connect (analyser)                  Buffesource.start (0)//Here star can be three parameters, once meaning, how long to wait to play, Where to start playback, how long              to play function  (err) {                  console.log (err)              })          }          xhr.send ()      }

Then create an audio control object

      var New // This is a browser-compatible notation      var gainnode = Ac[ac.creategain? ' Creategain ': ' Creategainnode '() This old-fashioned and new API        is different var// created by analyst         var size =        n = size * 2;   The number of pillars here is ffsize half         analyser.connect (gainnode)        Gainnode.connect ( Ac.destination)

Initialize Canvas

        function Caninit () {            var line = ctx.createlineargradient (0,0,0,600)            line.addcolorstop (0, ' Red ')            line.addcolorstop (. 5, ' yellow ')            line.addcolorstop (1, ' green ')            = line        }        caninit ()

Assigning raw data to an array

        function asyc () {            varnew  Uint8array (analyser.frequencybincount)            Analyser.getbytefrequencydata (arr)            Draw (arr)            nextframe (ASYC)        } to set a UNIT8 array, Then assign the data to it. Note that this is not a 8-bit unsigned array, then analyser.getbytefrequencydata this method will error, saying the first parameter must be Uint8array

Finally, draw the effect

        function Draw (arr) {            ctx.clearrect (0, 0, width, height)            var w = width/ size            
   
    for (
    var i = 0; i < arr.length; i++
    ) {              
    var h = (Arr[i]/h) *
     height ;               * I, Height-h, W *.6
    , h)            }         }
   

OK, the page effect is like this

All the code is being compiled and uploaded, you are interested to write a few Echart type table play AH

Music, let ' s go