播放音訊

要使用 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 上找到。