Web Audio API

Web Audio API 用于操作声音。这个 API 可以让网页发出声音。

基本用法

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

const audioContext = new AudioContext();

然后，获取音源文件，将其在内存中解码，就可以播放声音了。

const context = new AudioContext();

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();
  });

context.createBuffer()

context.createBuffer()方法生成一个内存的操作视图，用于存放数据。

const buffer = audioContext.createBuffer(channels, signalLength, sampleRate);

createBuffer方法接受三个参数。

channels：整数，表示声道。创建单声道的声音，该值为 1。
signalLength：整数，表示声音数组的长度。
sampleRate：浮点数，表示取样率，即一秒取样多少次。

signalLength和sampleRate这两个参数决定了声音的长度。比如，如果取样率是1/3000（每秒取样3000次），声音数组长度是6000，那么播放的声音是2秒长度。

接着，使用buffer.getChannelData方法取出一个声道。

const data = buffer.getChannelData(0)

上面代码中，buffer.getChannelData的参数0表示取出第一个声道。

下一步，将声音数组放入这个声道。

const data = buffer.getChannelData(0)

// singal 是一个声音数组
// singalLengal 是该数组的长度
for (let i = 0; i < signalLength; i += 1) {
  data[i] = signal[i]
}

最后，使用context.createBufferSource方法生成一个声音节点。

// 生成一个声音节点
const node = audioContext.createBufferSource();
// 将声音数组的内存对象，放入这个节点
node.buffer = buffer;
// 将声音上下文与节点连接
node.connect(audioContext.destination);
// 开始播放声音
node.start(audioContext.currentTime);

默认情况下，播放一次后就将停止播放。如果需要循环播放，可以将节点对象的looping属性设为true。

node.looping = true;

过滤器

Web Audio API 原生提供了一些过滤器（filter），用来处理声音。

首先，使用context.createBiquadFilter方法建立过滤器实例。

const filter = audioContext.createBiquadFilter();

然后，通过filter.type属性指定过滤器的类型。

filter.type = 'lowpass';

目前，过滤器有以下这些类型。

lowpass
highpass
bandpass
lowshelf
highshelf
peaking
notch
allpass

然后指定过滤器的频率（frequency）属性。

filter.frequency.value = frequency

最后，过滤器实例连接节点实例，就可以生效了。

sourceNode.connect(filter);