# AudioContext
# 简略的Audio
特点：简单音频播放/暂停、单线程。
<audio src="./song.mp3"></audio>
1
const audio = new Audio();
audio.src = './song.mp3';
1
2
2
更高级地控制音频：声道的合并与分割、音调、音频振幅压缩、混响等等，则需要 Web Audio Api。
# Web Audio Api
特点：音频合成/处理、模块化设计、可视化音频。
Web Audio API 可以通过 “音频节点（AudioNode）” 去处理 音频 ，多个音频节点 connect 到一起就形成了 “音频导向图”。
TIP
AudioContext（环境） 与AudioNode（模块） 的关系
=> 可以理解为： webpack （环境）与loader （模块） 的关系。
buffer
=> 可以理解为 js、css、image
# 音频合成/处理（Audio Context）
Audio Context 是 “音频播放和处理” 的上下文环境，包含一系列 “用来处理音频的 API”。
内置方法：创建 AudioNode、解码音频文件。
# AudioNode
AudioNode 是位于 source 、 destination 之间的一系列 “音频处理器”。
类型：
GainNode：音量处理器BiquadFilterNode：音调处理器PannerNode：3D环绕音效
const gainNode = audioContext.createGain();
const BiquadFilterNode = audioContext.createBiquadFilter();
const PanerNode = audioContext.createPanner();
1
2
3
4
5
2
3
4
5
source.connect(gainNode);
gainNode.connect(source.destination);
1
2
3
2
3
# API
decodeAudioData：解码音频文件。把 “音频数据” 转成 “buffer” （“音频数据”为由请求 './song.mp3' 后的响应）
- 入参：(data, callback)
- 出参：buffer（传入callback参数）
createBufferSource: 创建 source 节点
const URL = 'path/to/music.mp3';
const audioContext = new AudioContext();
const playAudio = function (buffer) {
const source = audioContext.createBufferSource();
source.buffer = buffer;
source.connect(audioContext.destination);
source.start();
};
const getBuffer = function (url) {
const request = new XMLHttpRequest();
return new Promise((resolve, reject) => {
request.open('GET', url, true);
request.responseType = 'arraybuffer';
request.onload = () => {
audioContext.decodeAudioData(request.response, buffer => buffer ? resolve(buffer) : reject('decoding error'));
};
request.onerror = error => reject(error);
request.send();
});
};
const buffer = await getBuffer(URL);
buffer && playAudio(buffer);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
- buffer:
audioContext.decodeAudioBuffer() - source:
audioContext.createBufferSource() - connect: source.connect
- destination:
audioContext.destination
# 模块化设计
- 一个音频源
source，可以使用多个处理器audioNode； - 多个音频源
source，可以合并为一个输出destination
