web Audio 音频可视化

2019年04月22日Web前端0

简单的录音功能已经实现了，在此基础上，实现下录音音频可视化。

createAnalyser

创建

可视化主要用到的是这个方法，他返回的是一个录音分析节点。在录音时，只需要将节点connect上，我们就能拿到频率数据。

this.analyser = this.context.createAnalyser(); // 录音分析节点
this.analyser.fftSize = 2048; // 表示存储频域的大小

连接音频源

开始录音时，需要connect，

// audioInput 为声音源，连接到处理节点 recorder
this.audioInput.connect(this.analyser);
this.analyser.connect(this.recorder);
// 处理节点 recorder 连接到扬声器
this.recorder.connect(this.context.destination);

这样的话，音频源（声音源）输入到analyse节点，我们再根据频率绘制波形图。

获取频率数据

api提供了接口用来获取频率数据，我这使用的是getByteTimeDomainData()方法，他会将波形或时域数据复制并传入到方法的第一个参数中(Uint8Array类型，和方法有关)，还有其他方法，也可以使用。

let dataArray = new Uint8Array(this.analyser.frequencyBinCount);
// 将数据拷贝到dataArray中。
this.analyser.getByteTimeDomainData(dataArray);

frequencyBinCount，FFT大小的一半，表示dataArray可使用的数据值的数量。

可视化

requestAnimationFrame

用requestAnimationFrame取代setTimeout或setInterval，稳定60fps的输出。

canvas

此处可视化借助canvas绘图，将波形绘制出来。

ctx.beginPath();

var sliceWidth = canvas.width * 1.0 / bufferLength, // 一个点占多少位置，共有bufferLength个点要绘制
    x = 0; // 绘制点的x轴位置

for (var i = 0; i < bufferLength; i++) {
    var v = dataArray\[i\] / 128.0;
    var y = v * canvas.height / 2;

    if (i === 0) {
        // 第一个点
        ctx.moveTo(x, y);
    } else {
        // 剩余的点
        ctx.lineTo(x, y);
    }

    // 依次平移，绘制所有点
    x += sliceWidth;
}

ctx.lineTo(canvas.width, canvas.height / 2);
ctx.stroke();

思路就是将canvas的宽度分割成对应数量的，再计算y轴方向的位置，并绘制成线。

详细的代码可以参考：github。