Web Audio API

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

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

    1. const context = new AudioContext();
    3. fetch('sound.mp4')
    4.   .then(response => response.arrayBuffer())
    5.   .then(arrayBuffer => context.decodeAudioData(arrayBuffer))
    6.   .then(audioBuffer => {
    7.     // 播放声音
    8.     const source = context.createBufferSource();
    9.     source.buffer = audioBuffer;
    10.     source.connect(context.destination);
    11.     source.start();

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

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

    方法接受三个参数。

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

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

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

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

    1. const data = buffer.getChannelData(0)
    3. // singal 是一个声音数组
    4. // singalLengal 是该数组的长度
    5. for (let i = 0; i < signalLength; i += 1) {
    6.   data[i] = signal[i]
    7. }

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

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

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

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

    1. const filter = audioContext.createBiquadFilter();

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

    1. filter.type = 'lowpass';

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

    • lowpass
    • highpass
    • bandpass
    • lowshelf
    • highshelf
    • peaking
    • notch
    • allpass

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