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 来进行节奏检测，因此我尝试在音频加载时访问缓冲区，代码如下：

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

- david_adler

---

这个回答解决了你的问题吗？<audio>标签转换为audioBuffer - 可行吗？ - user

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);
}

- david_adler

---

很遗憾，这在2018年仍然是事实。Web音频API规范尝试建议使用audio元素来完成这项工作，但是除了基本播放之外，您不能对其执行任何操作：没有预渲染的音频可视化，没有访问音频数据，什么都没有。 - John Weisz