getStreamElement

getStreamElement(id: string): HTMLAudioElement | undefined;

The HTMLAudioElement behind a stream, for the things only it can do.

soundhub covers playback, volume, panning, rate and progress itself. The element is exposed for what sits outside that: how much of the file has downloaded, and the operating system's own media controls.

Parameter	Type	Description
id	string	Id of a sound loaded with loadStream

Returns the element, or undefined if the id is not a stream.

warning

Do not call play(), pause() or set volume on the element directly. soundhub tracks state and routes volume through a gain node, so going around it puts the two out of step. Use play, pause and setSoundVolume as you would for any other sound.

---

A loading bar

const element = soundHub.getStreamElement('episode-42');

if (element?.buffered.length) {
  const loadedUpTo = element.buffered.end(element.buffered.length - 1);
  const duration = soundHub.getDuration('episode-42');
  bufferBar.style.width = `${(loadedUpTo / duration) * 100}%`;
}

---

Lock screen controls

If you would rather wire Media Session yourself than use setMediaSession, the element is all you need:

if ('mediaSession' in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Episode 42: naming things',
    artist: 'The Podcast',
    artwork: [{ src: '/cover-512.png', sizes: '512x512', type: 'image/png' }],
  });

  navigator.mediaSession.setActionHandler('play', () => soundHub.resume('episode-42'));
  navigator.mediaSession.setActionHandler('pause', () => soundHub.pause('episode-42'));
}