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

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

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

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

准备 audio 和 canvas 标签

<audio class="audio" ref='audio' :src='tune' @ended='ended'></audio>
<canvas ref='canvas' width='300px' height='300px'></canvas>

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

const ctx = new AudioContext();

创建一个新的MediaElementAudioSourceNode对象

• AudioContext 接口的 createMediaElementSource() 方法用于创建一个新的MediaElementAudioSourceNode对象,输入某个存在的 HTMLor` 元素, 对应的音频即可被播放或者修改.

const audioSrc = ctx.createMediaElementSource(this.audioElement)