使用 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>