Skip to content

Web Audio API

· 1 min

Web Audio API 提供了在 Web 上控制音频的一个非常有效通用的系统，允许开发者来自选音频源，对音频添加特效，使音频可视化，添加空间效果（如平移），等等。

AudioContext#

decodeAudioData 实例方法#

将音频的 ArrayBuffer 解码成 AudioBuffer

AudioNode#

AudioBufferSourceNode#

该节点代表音源

创建后需要往其 buffer 属性上挂载需要播放的数据

AudioDestinationNode#

该节点代表声音输出

在创建 audioContext 时会自动挂载到 audioContext.destination 上，所以一般不需要创建。

GainNode#

该节点代表音量控制

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

function play(decodedAudioData) {
    const audioContext = new AudioContext();
    const sourceNode = audioContext.createBufferSource();
    sourceNode.buffer = decodedAudioData;


    const gainNode = audioContext.createGain();
    sourceNode.connect(gainNode);
    gainNode.connect(audioContext.destination);
    gainNode.gain.value = 0.5;
    sourceNode.start(0);
}

参考资料#

https://baijiahao.baidu.com/s?id=1699893965659796910&wfr=spider&for=pc

audioContext & audio 音频播放

Web Audio 简易教程

Web Audio在音频可视化中的应用

decode-audio-data-fast