web技术分享| AudioContext 实现音频可视化

要实现音频可视化，实现一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext。

• AudioContext接口表示由链接在一起的音频模块构建的音频处理图，每个模块由一个AudioNode表示。音频上下文控制它包含的节点的创建和音频处理或解码的执行。

• 在做任何其他操作之前，您需要创建一个AudioContext对象，因为所有事情都是在上下文中发生的。建议创建一个AudioContext对象并复用它，而不是每次初始化一个新的AudioContext对象，并且可以对多个不同的音频源和管道同时使用一个AudioContext对象。

准备 audio 和 canvas 标签

创建并返回一个新的AudioContext对象。

const ctx = new AudioContext();

创建一个新的MediaElementAudioSourceNode对象

• AudioContext 接口的 createMediaElementSource() 方法用于创建一个新的 MediaElementAudioSourceNode对象,输入某个存在的 HTMLnull .
• 2d建立一个 CanvasRenderingContext2D 二维渲染上下文。

this.canvas = this.$refs.canvas.getContext('2d');draw(arr) {    canvas.clearRect(0, 0, document.body.clientWidth, this.canvasHeight);    const start = ((document.body.clientWidth / 2) - ((arr.length / 2) * 3));    arr.forEach((item, index) => {        this.canvas.beginPath();        this.canvas.strokeStyle = '#B2AFF4';        this.canvas.lineWidth = 3;        this.canvas.moveTo(start + (index * 4), this.canvasHeight);        this.canvas.lineTo(start + (index * 4), this.canvasHeight - item / 2);        this.canvas.stroke();    });}

效果展示