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>

使用AudioBuffer作为HTMLAudioElement的源吗？

1 个答案: