How to use an HTMLAudioElement controls to play the content of an AudioBuffer?

Considering the requirement of this function signature:

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

I’m looking for a way to control the AudioBuffer playback using the provided HTMLAudioElement.

I see plenty of examples using the start() method of a AudioBufferSourceNode, such as

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

However this only plays the audio, it does not bind it to the player’s controls; play, pause, stop, seek, etc. have no effect.

There are also other solutions, using a Blob, or an ArrayBuffer from some downloaded mp3 file, for example. However the provided AudioBuffer is the only value I can work with, here.

I have looked at creating a audio/wav (or audio/mp3) Blob, but I can’t wrap my head around the idea that AudioBuffer can’t be directly played from a HTMLAudioElement.

Why is that, and what’s the proper solution to control the playback using the browser media player?