唠唠叨叨

最近快放寒假了，虽然在实验室也不知道干嘛，但是目前还不能走，每天要打卡。最近学了一下react，而且无意中看到了一篇讲音频可视化的，于是就想将两者结合，反正也没事干。

1. Web Audio Api

Web Audio Api是一个很强大的Api而我只是用了其中很小很小的一部分功能，而且更强大的一些功能就需要一些专业知识了。先说一下我一会儿会提到的东西。

• AudioContext
• AudioBuffer
• AudioBufferSourceNode
• MediaElementAudioSourceNode
• GainNode
• AudioDestinationNode
• AnalyserNode

是不是人傻了？

我已经尽力了，这是我总结的这些东西的关系：

首先，audiocontext可以看作是老大哥，是个音频处理环境，所有的东西都要在它底下运行。

然后，是两个节点Node，AudioBufferSourceNode和MediaElementAudioSourceNode他们是负责管理音频的…大炮，对你可以想象为大炮，反正他们很重要就是了，都Node了对吧，Node都是很重要的就完事了。

然后，大炮想要发射就得有炮弹作为填充物对吧，这两台大炮的炮弹分别是AudioBuffer和一个Audio对象（可以是一个Audio标签，也可是js中的new Audio()），你想要用这两个Node播放出来声音，就必须把这两个炮弹塞进去。

具体说说AudioBuffer，AudioBuffer是一个声音片段，正如它的名字，它是一个声音片段存储在内存里，是一个缓冲，那么这个缓冲可以由你自己生成，比如你可以用createBuffer()函数创建一个2s的AudioBuffer，并且用白噪音填充它，这就是你自己生成的。你也可以由一段音频文件生成AudioBuffer，说到这里你就应该想到了，我们可以利用这个办法把一段MP3文件转换为AudioBuffer，并填入AudioBufferSourceNode，然后再播放，这里用到的是AudioContext.decodeAudioData()函数，这个函数可以把音频文件转换为AudioBuffer。

而MediaElementAudioSourceNode可以直接由audioContext.createMediaElementSource(Audio Dom Element / Audio Object)函数生成。

自此，你有了一个Node节点，可以是AudioBufferSourceNode或MediaElementAudioSourceNode，根据我上面的描述，你会发现，这两个办法都可以。

但是文档中提到：AudioBuffer往往被用于45s以内的短小的音频片段，对于更长的声音适合用MediaElementAudioSourceNode处理。

我本来看的那个文章，用的是第一种方法，我本来打算照着敲一遍的，后来想想还是算了，既然他都这么说了，那我就自己摸索一下吧。

有了Node以后，其实你可以直接输出了，你需要把它连接到一个输出Node上，比如AudioDestinationNode。但如果你这么做了会显得十分蠢比，因为你如此麻烦地使用了如此强大的API不如直接绑定到一个< audio />标签上来的快。

所以我们要在Node节点和输出节点中介上加一大堆的中间节点Middle Node（我觉得拿express的中间件做类比也不是不可以，如果你用过express的话）来作其他处理，你可以理解为流水线，一个产品生产出形状了直接卖也不是不行，但你还可以经过许多工序来美化它，比如第一个工序是上色，第二个工序是包装等。

其中我可以用到的Middle Node有 GainNode和AnalyserNode，我这里懒得弄了，所以没有用上GainNode，这是一个处理声音响度的节点。

我们重点要说的就是这个AnalyserNode，正如它的名字一样，他可以分析音频，比如我们要做的频率、频谱，就可以用它来分析，并呈现出来。

其实搞这个我觉得最难的就是整明白这么一大堆Api之间的关系，我觉得我已经梳理的很透彻了，接下来你自己去看文档就好了，MDN的文档说的也很清楚，甚至还有很多代码示例，我试了一下，都是可以直接跑的。

关于在这之中遇到的坑，我在我的上一篇博客中也有所提及，可以先看看避避雷。

2. 实际效果

3. 代码在我的Github上

代码我后面会发到我的github上，我会把地址贴在这里，如果你没有看到地址，说明我忘了。