【web audio】web简易、可视化、音频播放器 0 0

是跟着慕课网的教程做的。看第一遍的时候不记得node了。。然后听得也有点懵逼。。看第二遍的时候就豁然开朗了。（一定是因为睡饱了）。。。

自己挺喜欢的，特别是可视化的Dot，黑色底看着像星空。自己对于这种东西总是有点痴迷。。虽然于是打算当成一个项目（这样随意....），添加暂停，播放，歌曲切换，单曲循环，列表循环的功能（因为很简单，所以介绍起来莫名的有点羞耻。。）

主要知识点：web audio, nodejs, ajax

功能：

1.播放，暂停

2.音量调节

3.可视化效果（经典柱状和球形）

4.歌曲切换，单曲循环，连续播放

5.进度条匹配

待改进：

2.添加缓存功能（目前不可能）

3.增添，美化可视化效果

5.歌词显示功能（滚动最好）

本来想根据歌曲播放的次数把常用歌曲缓存在客户端。。但是看了cookie，localstorage...都不大行。用localstorage的时候，由于歌曲信息是audiobuffer类型，转到缓存的时候转成字符串就出错了。。。貌似不能存储object数据。。

祭效果图！：

其实学习一个新的技术，还是看官方文档最好了，，查查api什么的。。。看教程的时候主要是觉得那几个audionode不懂是干嘛的，所以很混乱，导致那张关系图也是一点看不进去。。后来明白了，就觉得那张关系图简直是条理清晰23333。虽然说H5有audio标签，但是只能做简单的音频处理。所以需要使用web audio接口。

科普：对于音频流的处理，需要一个源节点（audiocontext）和一个目的节点（destination）。其中audiocontext像canvas中的context，他是所有节点的产生器（？），其他的节点都由其产生（设为ac），并且只有一个输出，没有输入。ac.destination是目的节点，他只有一个输入，没有输出。作用相当于音频的播放设备。

对于其他的audionode节点，都有输入和输出。每个node节点通过connect方法连接他的输出节点。

待改进：

2.添加缓存功能（目前不可能）

3.增添可视化效果

4.整理代码API

5.歌词显示功能（滚动最好

音量大小--->gainnode

分析音频--->anlysernode

音频缓存，设置播放--->audiobuffersource

主要流程：

【祭出老师的图！】

通过每个节点的连接形成音频处理流，通过js的动画函数利用canvas进行可视化的绘图。但是实践中发现，animation函数是根据浏览器的情况进行合理的帧数实现的，所以。。如果我将浏览器挂到后台。。。这个函数就停止调用了。。这个不是问题。。反正那时候我也不看嘛。。但是。。歌曲切换全都依靠着这个函数啊。。。。这样浏览器已挂到后台，歌曲就不能正常『下一首』了。所以又用settimeout了。。

歌曲切换的问题：

buffersource有一个onended的用于回调的接口，我们可以设置在播放结束的时候切换下一首。但是由于每个buffersource只能start一次，所以在处理歌曲暂停和开始的时候，每次暂停开始都需要create一个新的buffersource。。。。所以用了手动判断结束。。。0 0

然后是界面问题，input[type="range"]样式重定义的方法和兼容：http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html