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