2

如何使用解码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对象，但不太清楚如何去做。

4

1 回答 1

5

最简单的解决方案显然是将 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>

于 2018-07-19T13:53:42.383 回答