如何使用 HTMLAudioElement 控件来播放 AudioBuffer 的内容？

Question

考虑到这个函数签名的要求：

function initPlayer(player: HTMLAudioElement, buffer: AudioBuffer): void;

我正在寻找一种使用提供的

AudioBuffer

控制

HTMLAudioElement

播放的方法。

我看到很多使用

start()

的

AudioBufferSourceNode

方法的例子，例如

const context = new AudioContext();
const destination = context.createMediaStreamDestination();
const source = context.createBufferSource();
source.buffer = buffer;  // some AudioBuffer instance
source.connect(destination);
source.start(0);

然而，这仅播放音频，并没有将其绑定到播放器的控件；播放、暂停、停止、查找等均无效。

还有其他解决方案，例如使用

Blob

或某些下载的 mp3 文件中的

ArrayBuffer

。然而，提供的

AudioBuffer

是我可以使用的唯一值，在这里。

我已经考虑过创建一个

audio/wav

（或

audio/mp3

）

Blob

，但我无法理解

AudioBuffer

不能直接从

HTMLAudioElement

播放。

这是为什么，使用浏览器媒体播放器控制播放的正确解决方案是什么？

Answer 1

HTMLAudioElement 和 AudioBuffer 是两个独立的东西，不相互作用，每种情况都应该选择正确的一个，它们都可以达到相同的目的，但应根据情况进行选择。

HTMLAudioElement 对象加载文件并具有自己的控件（播放、停止等...）。

AudioBuffer 对象将表示保存在内存中的通常很短的音频剪辑，也是通过加载文件创建的，通过将其传递到 AudioBufferSourceNode 来播放该音频剪辑，该节点与 HTMLAudioElement 中的控件“并行”。

为了清楚起见，我建议阅读文档：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement

https://developer.mozilla.org/en-US/docs/Web/API/AudioBuffer

https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode