播放音频

要使用 Web Audio API 播放音频,我们需要获取音频数据的 ArrayBuffer 并将其传递给 BufferSource 进行播放。

要获得要播放的声音的音频缓冲区,你需要使用 AudioContext.decodeAudioData 方法,如下所示:

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
// Fetch the MP3 file from the server
fetch("sound/track.mp3")
    // Return the data as an ArrayBuffer
    .then(response => response.arrayBuffer())
    // Decode the audio data
    .then(buffer => audioCtx.decodeAudioData(buffer))
    .then(decodedData => {
        // ...
    });

当最终承诺解决时,你将获得 AudioBuffer 形式的音频。这可以附加到 AudioBufferSourceNode - 并播放 - 就像这样:

const source = context.createBufferSource();
source.buffer = decodedData; // <==
source.start(...);

其中 .start() 有三个参数可以偏移何时播放样本,偏移样本中要播放的位置,并分别说明播放样本的时间。

有关如何操作缓冲区源的更多信息可以在 MDN 上找到。