Html可视化播放音乐mp3文件拖动即可播放伴跳动音乐节律bar

　　1 来源：
　　======https://github.com/cbrandolino/local-audio-visualizer
　　2 调整：
　　======
　　2.1 对源代码进行删减，注释。
　　2.2 更简洁，更易操作，更能理解核心代码。
　　3 文件结构：
　　=========
　　3.1 图
　　3.2 文字解析：一个文件夹为xx：有一个index.html、css文件夹（style.css文件）和js文件夹（local_audio_visualizer.js文件）。
　　3.3 index.html代码：                                                              
                  Drag an audio file to play it locally
         拖动一个音乐文件去本地播放
         and visualize it
         然后可视化ta       
          
　　3.4 style.css代码：#instructions {   display: block;   position: absolute;   width: 100%;   text-align: center;   top: 50%;   margin-top: -100px;   font-family: ＂Droid Sans＂;   /*中间文字颜色，loading*/   color: #fff;} #container {   display: block;   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   background: radial-gradient(      ellipse farthest-corner,      /*网页背景颜色*/     #7d7d7d 0%,     #0e0e0e 100%     );} #canvas-container {   width: 800px;   height: 600px;   margin: auto;   position: relative;   top: 50%;   margin-top: -300px;} #canvas-copy {   opacity: 0.05;  -webkit-transform: scaleY(-1);   margin-top: -6px;}
　　3.5 local_audio_visualizer.js代码：(function() {   var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||                               window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;   window.requestAnimationFrame = requestAnimationFrame; })(); window.onload = function() {   var element = document.getElementById(＂container＂)   dropAndLoad(element, init, ＂ArrayBuffer＂) } function dropAndLoad(dropElement, callback, readFormat) {   var readFormat = readFormat || ＂DataUrl＂   dropElement.addEventListener(＂dragover＂, function(e) {     e.stopPropagation()     e.preventDefault()     e.dataTransfer.dropEffect = ＂copy＂   }, false)   dropElement.addEventListener(＂drop＂, function(e) {     e.stopPropagation()     e.preventDefault()     loadFile(e.dataTransfer.files[0])   }, false)    function loadFile(files) {     var file = files     var reader = new FileReader()     reader.onload = function(e) {       callback(e.target.result)     }     reader[＂readAs＂+readFormat](file)   } } function init(arrayBuffer) {   document.getElementById(＂instructions＂).innerHTML = ＂Loading ...＂   window.audioCtx = new AudioContext()   window.analyser = audioCtx.createAnalyser()   if (window.source)     source.noteOff(0)   audioCtx.decodeAudioData(arrayBuffer, function(buffer) {     window.source = audioCtx.createBufferSource()        source.buffer = buffer     source.connect(analyser)     analyser.connect(audioCtx.destination)     source.start(0)     var viz = new simpleViz()     new visualizer(viz[＂update＂], analyser)     document.getElementById(＂instructions＂).innerHTML = ＂＂   }) } function visualizer(visualization, analyser) {   var self = this   this.visualization = visualization     var last = Date.now()   var loop = function() {     var dt = Date.now() - last     var byteFreq = new Uint8Array(analyser.frequencyBinCount)     analyser.getByteFrequencyData(byteFreq)     last = Date.now()     self.visualization(byteFreq, dt)     requestAnimationFrame(loop)   }   requestAnimationFrame(loop) } function simpleViz(canvas) {   var self = this   this.canvas = document.getElementById(＂canvas＂)   this.ctx = this.canvas.getContext(＂2d＂)   this.copyCtx = document.getElementById(＂canvas-copy＂).getContext(＂2d＂)   //跳动音乐bar的颜色设置，关键点   //this.ctx.fillStyle = ＂#fff＂ //白色   this.ctx.fillStyle = ＂#00FF00＂ //绿色lime   this.barWidth = 10   this.barGap = 4   this.bars = Math.floor(this.canvas.width / (this.barWidth + this.barGap))   this.update = function(byteFreq) {     self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height)     var step = Math.floor(byteFreq.length / self.bars)     for (var i = 0; i < self.bars; i ++) {       // Draw each bar       var barHeight = byteFreq[i*step]       self.ctx.fillRect(         i * (self.barWidth + self.barGap),          self.canvas.height - barHeight,          self.barWidth,          barHeight)       self.copyCtx.clearRect(0, 0, self.canvas.width, self.canvas.height)       self.copyCtx.drawImage(self.canvas, 0, 0)     }   } }
　　3.5 效果图：拖动一个音乐文件mp3，如下
　　====完美，整理并分享出来========