web audio 简单使用

发表于 | 分类于

一直想做一个显示音频频谱的界面，终于入门了。
MDN 上有详细的接口文档,详细可以参阅， 但这篇文章只是介绍将音频显示频谱。

  1. 根据文档，首先要创建一个 音频上下文（AudioContext）
    let audioCtx = new window.AudioContext()， 之后的 节点 都是通过这个上下文 来创建的。

  2. 创建 音频源节点
    可作为 音频源节点 的有 3 种，这里我们使用的是 AudioBufferSourceNode，是直接通过 AudioContext.createBufferSource() 创建的。 这个节点可以接受内存中的 audioBuffer 数据，而这个数据可以从 网络 和 文件 中读取的 arrayBuffer 数据 进行转换来得到。 AudioContext.decodeAudioData()。

  3. 创建处理节点，包括 输出节点 和 分析节点
    输出节点 就是把音频输出到扬声器。直接链接 音频源节点和输出节点就行。
    将 音频源节点和 分析节点链接后，我们就可以通过 分析节点的接口来获取 数据。根据需要将数据以一些形式绘制到 画布上。

结构图

web audio api 有点像 工厂流水线 的感觉，音频数据就像传送带上的物品，上一个节点处理后交由下一个节点处理，每个节点都有自己的 处理方式，最终输出结果。