Web Audio API

Posted by eye on 10-10,2023

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:浮点数,表示取样率,即一秒取样多少次。

signalLengthsampleRate这两个参数决定了声音的长度。比如,如果取样率是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);