AudioContext

简介

浏览器原生提供AudioContext对象，该对象用于生成一个声音的上下文，与扬声器相连

以下是一段播放声音的实现代码

图解

可以把 AudioContext 想象成一个图

一开始只有一个节点，叫 destination，这是创建 AudioContext 就会自带的节点，是音频上下文的出口，相当于水龙头的出口，音频要从水龙头的出口出来才能播放

当获取到一个音频数据后，通过 createBufferSource 创建一个 source 节点，然后将 source 节点和 destination 节点相连

source 节点可以看成一个水源，connect 则是将水源和水龙头连接，最后水流出水龙头完成播放

AudioNode

每个AudioNode代码一个处理声音的模块，处理完成后交由下个AudioNode来处理，传递的方式由audioNode1.connect(audioNode2)来实现

以下是较为常用的 node 节点

节点名称	创建方式	含义
AudioDestinationNode	`audioContext.destination`属性获取（默认创建）	表示 context 的最终节点，一般是音频渲染设备
AudioBufferSourceNode	`audioContext.createBufferSource()`创建	音源
GainNode	`audioContext.createGain()`创建	调节音量
AnalyserNode	`audioContext.createAnalyser()` 创建	分析音频数据。可以用于获取音频的频谱信息、时域信息
MediaElementAudioSourceNode	`audioContext.createMediaElementSource()`创建	从 HTML5 `<audio>` 或 `<video>` 元素播放音频数据

AudioBufferSourceNode

该节点代表音源

属性/方法/事件	说明
`buffer`	播放的数据
`loop`	是否为循环播放
`loopStart/loopEnd`	循环区间
`playbackRate`	播放倍速，可以通过`source.playbackRate.value = 2`的方式来修改值
`start([when][, offest][, duration])`	when是何时被播放，如果when小于audioContext.currentTime或者是0，声音会被立即播放 duration播放的持续时间，如果没有设置就会播放到最后
`stop()`	停止播放
`onended`	播放结束事件

fetch('sound.mp4')
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => context.decodeAudioData(arrayBuffer))
  .then(audioBuffer => {
    // 播放声音
    const source = context.createBufferSource();
    source.buffer = audioBuffer;
    source.connect(context.destination);
    source.start();
  });

GainNode

该节点代表音量控制

通过设置gainNode.gain.value的值来设置音量，值的范围是 [0, 1]

const source = context.createBufferSource();
source.buffer = audioBuffer;
// 改变音量
const gainNode = context.createGain();
gainNode.gain.value = 0.5;
source.connect(gainNode);
gainNode.connect(context.destination);
source.start();

AnalyserNode

分析音频数据。可以用于获取音频的频谱信息、时域信息。实现数据可视化，它不对音频有任何修改作用，仅仅是分析。

属性/方法	说明
fftSize	快速傅立叶变换样本的窗口大小，fftSize的值必须是32-32768范围内的2的非零幂（就是 $2^{5}$ , $2^{6}$ , $2^{7}$ 等等），默认值是2048
getByteTimeDomainData()	获取时域
getByteFrequencyData()	获取频域

以下是音频可视化的例子