# 音频图

Web Audio API 使用户可以在音频上下文(AudioContext) 中进行音频操作,具有模块化路由的特点。在音频节点上操作进行基础的音频, 它们连接在一起构成音频路由图。

音频节点通过它们的输入输出相互连接,形成一个链或者一个简单的网。一般来说,这个链或网起始于一个或多个音频源。

# 创建音频上下文

new AudioContext()

// 兼容性处理
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext: AudioContext = new AudioContext();

# 创建音频源

音频源可以提供一个片段一个片段的音频采样数据(以数组的方式),一般,一秒钟的音频数据可以被切分成几万个这样的片段。这些片段可以是经过一些数学运算得到 (比如 OscillatorNode ),也可以是音频或视频的文件读出来的(比如 AudioBufferSourceNodeMediaElementAudioSourceNode ),又或者是音频流( MediaStreamAudioSourceNode )。

audioCtx.createMediaElementSource()

const audioCtx = new AudioContext();
const audioSourceNode = audioCtx.createMediaElementSource(someMediaElement);

# 增益节点

这些节点的输出可以连接到其它节点的输入上,然后新节点可以对接收到的采样数据再进行其它的处理,再形成一个结果流。一个最常见的操作是通过把输入的采样数据放大来达到扩音器的作用(缩小就是一个弱音器)

audioCtx.createGain(options)

new GainNode(context, options)

const audioGainNode = new GainNode(audioCtx, { gain: 1 });

# 创建音频输出

声音处理完成之后,可以连接到一个目的地(AudioContext.destination),这个目的地负责把声音数据传输给扬声器或者耳机。

audioCtx.destination

const audioDestNode = audioCtx.destination;

# 连接节点

audioNode.connect(anotherAudioNode)

audioSourceNode.connect(audioDestNode);

# 音频图

一个简单而典型的 Web Audio 流程如下:

  • 创建音频上下文
  • 在音频上下文里创建源 — 例如 <audio>,振荡器,流
  • 创建效果节点,例如混响、双二阶滤波器、平移、压缩
  • 为音频选择一个目的地,例如你的系统扬声器
  • 连接源到效果器,对目的地进行效果输出

下面这个示例的音频图,如下所示:

# 预览效果

# 做个测试

将两个不同音频上下文的节点相连会怎样 ?

let audioCtx = new AudioContext();
let audioCtx2 = new AudioContext();
// ...
const audioDestNode2 = audioCtx2.destination;
audioSourceNode.connect(audioGainNode).connect(audioDestNode2);

会提示如下内容

cannot connect to an AudioNode belonging to a different audio context