模拟制作网易云音乐(AudioContext) - _糊一笑_H5之家

记得好早前在慕课网上看到一款可视化音乐播放器，当前是觉得很是神奇，还能这么玩。由于当时刚刚转行不久，好多东西看得稀里糊涂不明白，于是趁着现在有时间又重新梳理了一遍，然后参照官网的API模拟做了一款网易播放器。没有什么创新的点，只是想到了就想做一下而已。

效果可以看这里：，如果看不了，说明博主的服务器已经不在工作啦。（建议使用电脑浏览器打开，同时切换到手机模式来打开，因为在手机上测试时有问题，而且有很大性能损耗，经常会导致浏览器奔溃）

代码在这里：github

效果图一览：

xiaoguo

看着自己洋洋洒洒写了快1000多行的js，我现在心里也是一万屁草泥马飘过。当然其中还有很多代码没有经过提炼，很多变量可以公用，用对象化的方式来说写这个会更有条理，这个博主以后有时间再梳理一遍。下面来讲讲主要的实现过程。

一、整体思路

API可以到上面去看，只是一个草案，并没有纳入标准，所以有些地方还是有问题，在下面我会说到我遇到了什么问题。但是这个草案上的东西其实可以做出很多其他的效果。比如多音频源来达到混音效果、音频振荡器效果等等...

整体的思路图如下：

silu

大致上来说就是通过window上的AudioContext方法来创建一个音频对象，然后连接上数据，分析器和音量控制。最后通过BufferSourceNode的start方法来启动音频。

二、具体分析 2.1 路由

routes/index.js

(req(err() { first = names[1]; names song )...nameslistPostssongsingerlistPosts[0] ); });

这里mac平台和windows不同，mac文件夹会有一个.DS_Store文件，因此作了一点小处理。

另外由于用的海外服务器，所以请求mp3资源的时候会有很长时间，因此我把音频资源放在了七牛云，而不是从本地获取，但是数据还是在本地拿，因为并没有用到数据库。

2.2 主页面

页面运用了手淘的flexible，因此在最开始切换到手机模式的时候，可能需要刷新一下浏览器才能显示正常。样式采用的是预处理sass，感兴趣的可以去看一下代码

2.3 创建音频

(buffer) () { ac .webkitAudioContext)(); } audioBuffer onStateChange; // 创建BufferSrouceNode bufferSource .gainNode .analyser ....connect(ac.destination); }

结合上面的图，这里创建音频的代码就比较好理解了。

2.4 播放

播放其实是一个非常简单的API，直接调用BufferSourceNode的start方法即可，start方法有两个我们会用到的参数，第一个是开始时间，第二个是时间位移，决定了我们从什么时候开始，这将在跳播的时候会用到。

另外有一个注意的点是，不能再同一个BufferSourceNode上调用两次start方法，否则会报错。

bufferSource && bufferSource.start(0);

2.5 获取频谱图数据

() ((arr); renderInter

通过不断触发这个函数，将最新的数据填充到一个8位的无符号数组中，进而开始渲染数据。此时的音频范围默认设置为256。

2.6 音量调节

音量调节也有现成的API，这点也没什么可讲的。

.];

2.7 暂停与恢复播放

我在AudioBufferSourceNode上找了好久，本来以为有start/stop方法，那么就会有类似于puase方法之类的，但是遗憾的是，确实没有。最开始我也不知道怎么做播放和暂停，但是好在天无绝人之路，意外发现在全局的AudioContext上有两个方法resume/suspend，这也是实现播放和暂停的两个方法。

() { playState ().(); // 重启定时器 startInter && clearInterval(startInter); startInter (start(startSecond, totalTime); startSecond)() { playState ()(); startInter .suspend(); }

2.8 跳动播放

跳动播放需要用到开始时间，这里我默认设置为0，接下来就是时间位移了。通过跳动播放进度条的游标，我们不难计算出我们应该播放的时间。

这里有一个问题，我之前也说到过，就是在同一个AudioBufferSourceNode上不能同时start两次，那么也就是说，我如果这里再直接调用start(0, offsetTime)将会报错，是的，这里我也卡了好久，最后再一个论坛(是哪个我倒是忘记了)上给了一个建议，不能同时在一个AudioBufferSourceNode上start两次，那就在不同的AudioBufferSourceNode上start，也就意味着我可以新建一个节点，然后依然用之前ajax请求到的数据来创建一个新的音频数据。实验是可以行的。

(time) analyser && analyser.disconnect(gainNode); gainNode && gainNode.disconnect(ac.destination); bufferSource .gainNode .analyser ...onPlayEndedtime); playState ()()(start, executeTime(time)); startSecond (); // 重新开始计时 startInter && clearInterval(startInter); startSecond++; startInter (start(startSecond, totalTime); startSecond); }