1个来源：
=======
359 github.com/cbrandolino /本地-音频-可视化器2调整：
=======
2.1删除源代码，注释。
比2.2更简洁，更易于操作，更能理解核心代码。
3文件结构：
========
3.1图
3.2文字分析：一个文件夹是xx。 有一个index.html、css文件夹(style.css文件)和js文件夹) local_audio_visualizer.js文件。
3.3索引. html代码：
！ 文档类型html
meta charset='utf-8 '
html
头部
标题本地_音频_可视化器/标题
脚本类型='文本/JavaScript ' SRC=' JS /本地_音频_可视化器. JS ' /脚本
链接列='样式表' href=' CSS/style.CSS ' /
/head
主体
div标识='容器'
！ - -拖动音乐文件时表示搏动的音乐bar--
div id='容器'
“canvas width”=800高度=300 id=“canvas”/“canvas”
“canvas width”=800高度=300 id=“canvas -复制”/“canvas”
/div
！ - -在中间显示文字-
div标识=' instructions '
h2
！ -br是换行的意思-
draganaudiofiletoplayitlocallybr /
拖动音乐文件进行本地br /
可视化itbr /
然后可视化ta
/h2
/div
/div
/body
/html3.4 style.css代码：
# #指导{
显示：块；
位置：绝对；
width :百分之百；
文本对齐：中心；
top: 50%；
margin-top: -100px帕克斯；
字型系列： '奇数三星'；
/*中文字的颜色、loading*/
颜色： # FFF； }
# #容器{
显示：块；
位置：绝对；
top: 0；
left: 0；
width :百分之百；
height: 100%；
背景：径向-梯度(
ellipse farthest-corner，
//网页的背景颜色/
#7d7d7d 0%，
#0e0e0e 100%
)； }
# # canvas -容器{
width: 800px；
height: 600px；
margin :自动；
位置：相对关系；
top: 50%；
margin -顶级：-300 px； }
# # canvas -复制
opacity: 0.05；
- WebKit-transform : scaley (-1；
margin-top: -6px型号； {1}3. 5本地_音频_可视化器. js代码：
(函数() ) {
varrequestanimationframe=window.requestanimationframe|| window.mozrequestanimationframe||
window.webkitrequestanimationframe|| window.msrequestanimationframe；
window.requestanimationframe=requestanimationframe；
() )
window.onload=function (
var element=文档. getelementbyid ('容器' ) ) ) ) )。
dropandload (元素、初始化、'阵列缓冲区' ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) )。
}
函数辅助加载(拖放元素、回调、读取格式) {
varreadformat=读格式||'数据文件'
drop element.addevent监听器('拖动器'，函数(e ) {
e .停止传播(
e .预设值(
e .数据传输效果='复制'
(，假) )
drop element.addevent监听器(' drop '，函数(e ) {
e .停止传播(
e .预设值(
loadfile (e .数据传输.文件[0] )。
(，假) )
功能加载文件(文件)
虚拟文件=文件
var reader=新文件夹()
reader.onload=函数(e ) {
回调(e.target.result )。
}
读取器读取格式
}
}
函数单元(阵列缓冲器) {
document.getelementbyid (' instructions ' ).innerHTML='Loading . '
window.audio CTX=newaudiocontext (
window.analyser=音频CTX .创建分析程序(
if (窗口.源)
source .注释关闭(0) )。
audio CTX .解码器缓冲区(阵列缓冲区，功能缓冲区) {
window.source=audio CTX.createbuffersource (
source.buffer=缓冲器
source.connect (分析程序) )。
analyser.connect (音频CTX .目的地) ) ) )。
source.start(0) )。
var viz=新简单viz (
新可视化程序(viz [ '更新' ]，分析器)。
文档. getelementbyid (' instructions ' ).innerHTML=' ' )。
() )
}
功能可视化器(可视化，分析器) {
var自f=this
this .可视化=可视化
var last=Date.now (
var loop=函数
vardt=date.now(-last
varbytefreq=新单元8阵列(analyser.frequencybincount ) )。
analyser.getbytefrequencydata (字节频率) )。
last=Date.now (
self .可视化(字节频率，字节频率) ) ) ) ) ) ) ) ) ) )。
请求标准框架(环路)
}
请求标准框架(环路)
}
功能组合(canvas ) {
var自f=this
this.canvas=文档. getelementbyid (' canvas ' ) ) )。
this.CTX=this.canvas.get上下文('2d ' ) ) )。
this.copy CTX=文档. getelementbyid (文化副本.获取上下文) ) 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.barwidththis.bargap ) )
this .更新=函数(字节频率)。
self.CTX.clear rect (0，0，self.canvas.width，self.canvas.height ) ) )。
var step=math.floor (字节频率/长度/自基准) )。
for (气量=0； I自助银行； I ) {2}
//draw搜索栏
var bar height=字节频率
使用self.ctx.fillRect (
I * (自助银行自助银行)、
self.canvas.height - barHeight表示，
自助式窗口，
barHeight ) )
self.copy CTX.clear rect (0，0，self.canvas.width，self.canvas.height ) ) ) ) )。
self.copy CTX.drawimage (self.canvas，0，0 ) ) ) ) )。) ) ) ) ) ) ) ) ) )。
}
}
}3.5效果图：拖动音乐文件mp3如下
=====完美，整理后共享========