javascript - 使用 AudioBuffer 作为 HTMLAudioElement 的来源？

Question

如何使用解码后的 AudioBuffer 数据设置为 HTMLAudioElement 的源？

假设我们有一个 HTMLAudioElement:

let audio = new Audio();

而且我们还能够接收和解码音频数据:

let context = new AudioContext();
let source = context.createBufferSource(); //this represents the audio source. We need to now populate it with binary data.

Api.getAudioFile(url).then((data) => {
  context.decodeAudioData(data, (buffer) => {
    source.buffer = buffer;
  }, null);
});

如何使用 source 作为 audio 的来源？我想我必须为此创建一个 MediaStream 对象，但不太清楚如何去做。

Answer 1

最简单的解决方案显然是将 AudioElement 的 src 设置为您从中获取数据的 url。

在你的情况下，这似乎并不那么容易(因为你需要一些凭据来传递请求)，在这种情况下，如果可以的话，让你的响应成为一个 Blob 而不是 ArrayBuffer，然后简单地设置你的 AudioElement src 到您从该 Blob 创建的 blobURI。

const audio = document.querySelector('audio');
const url = "https://dl.dropboxusercontent.com/s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3";

fetch(url)
  .then(r => r.blob()) // request as Blob
  .then(blob => audio.src = URL.createObjectURL(blob))

<audio controls></audio>

如果您不能修改您的请求，或者只需要那个 ArrayBuffer 例如用于网络音频上下文，那么只需从中创建一个 Blob:

const audio = document.querySelector('audio');
const url = "https://dl.dropboxusercontent.com/s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3";

fetch(url)
  .then(r => r.arrayBuffer()) // request as ArrayBuffer
  .then(buffer => {
    audio.src = URL.createObjectURL(new Blob([buffer]));
    const ctx = new AudioContext();
    return ctx.decodeAudioData(buffer);
  })
  .then(console.log);

<audio controls></audio>