web Audio 音频可视化

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

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

点赞

发表评论

电子邮件地址不会被公开。