javascript - Web 音频 API 获取 <audio> 元素的 AudioBuffer

Question

我有一个音频元素

var audioSrc = 'https://mfbx9da4.github.io/assets/audio/dope-drum-loop_C_major.wav'
var audio = document.createElement('audio')
audio.src = audioSrc

我需要 AudioBuffer 做beat detection所以我尝试在加载音频时访问缓冲区:

audio.oncanplaythrough = () => {
  console.info('loaded');
  var source = context.createMediaElementSource(audio);
  source.connect(context.destination);
  console.info('source.buffer', source.buffer);
  source.start()
}

但是，上面的代码片段日志

> loaded
> source.buffer undefined

Answer 1

似乎最好的方法是避免 <audio>标记并通过 XHR 加载音频:

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const audioSrc =
  "https://davidalbertoadler.com/assets/audio/dope-drum-loop_C_major.wav";

const audioData = await fetchAudio(audioSrc);
audioContext.decodeAudioData(audioData, onDecoded, onDecodeError);

function fetchAudio(url) {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.responseType = "arraybuffer";
    request.onload = () => resolve(request.response);
    request.onerror = (e) => reject(e);
    request.send();
  });
}

function onDecoded(buffer) {
  // Play the song
  console.log("Got the decoded buffer now play the song", buffer);
  const source = audioContext.createBufferSource();
  source.buffer = buffer;
  source.connect(audioContext.destination);
  source.loop = true;
  source.start();
}

function onDecodeError(e) {
  console.log("Error decoding buffer: " + e.message);
  console.log(e);
}