前言
秋招躺平，想着用前端做点和专业相关的事就尝试做了一些音频处理，主要内容是音频可视化和均衡器。过程中发现网上教程比较少，在这里写一下，分为音频可视化和均衡器两篇。原理部分会涉及专业知识，如果不太感兴趣可以直接看代码。点击这里查看案例。
原理
1. 时域和频域
信号通常会分为时域和频域，时域就是我们平常看见的语音波形，而通过傅里叶变化我们知道一个信号其实是可以用多个正弦波来进行叠加逼近的，这些正弦波的频率不一，振幅不一，所以我们在一个坐标轴上将这些正弦波表示出来，成为频域。
2. FFT（快速傅里叶变换）
是一种适合计算机处理信号和进行傅里叶变换的算法。
如果感兴趣可以在网上找一些资料看看，很多。在这里我们只需要知道它可以将时域的信号转换到频域。
3. Web Audio API
> Web Audio API 提供了在 Web 上控制音频的一个非常有效通用的系统，允许开发者来自选音频源，对音频添加特效，使音频可视化，添加空间效果（如平移），等等。
一个简单而典型的 web audio 流程如下：
1. 创建音频上下文`ctx = new AudioContext()`
2. 在音频上下文里创建源 - 例如 `<audio>`
3. 创建效果节点(Node) - `analyser = ctx.createAnalyser()`
5. 连接源到节点(Node)，并输出 - `analyser.connect(xxx)`
4. 音频可视化
在Web Audio Api中提供了fft的方法可以直接调用，其详细的使用方法在代码部分进行讲解，下面是我们获得的数据，注意，获得的数据类型是Uint8Array，在这里踩过坑。
在我们获得了频域的数据之后就可以将这些数据进行展示了。可以用Canvas,也可以用Three.js，我是用的Echarts。下面放出一些网上的例子
代码
let AudioContext = window.AudioContext || window.webkitAudioContext;
let audioContext = new AudioContext();
let analyser = audioContext.createAnalyser();
// 设置fft的窗口大小，fftSize必须是2的幂，且在2^5-2^15之间。
// fftSize越大越精细，但并不是越大越好，和性能和音频的质量有关。
analyser.fftSize = 256;
analyser = audioContext.createAnalyser();
// 获取并创建源节点
let audio = document.getElementById('audio');
let audioSrc = audioContext.createMediaElementSource(audio);
// 将analyser节点连接到音源和输出源
audioSrc.connect(analyser);
analyser.connect(audioContext.destination);
// 渲染函数自行发挥，我是用的Echarts
const render = () => {
requestAnimationFrame(render);
// 注意这个地方，getByteFrequencyData即获取频域数据的函数，他会直接把数据赋值给传入的参数，且只接受Unit8Array类型
analyser.getByteFrequencyData(this.dataArray);
option.series[0].data = Array.from(this.dataArray);
option && myChart.setOption(option);
};
render();
结尾
第一次写文章，如果有做的不好的地方欢迎指正。
在结尾推荐我的个人网站，欢迎访问
