AudioTrack.sourceBuffer — Eigenschaft · JavaScript-Referenz

Signatur

AudioTrack.sourceBuffer

Beschreibung

Die Eigenschaft sourceBuffer eines AudioTrack-Objekts verweist auf den SourceBuffer der Media Source Extensions (MSE), aus dem die Audiospur stammt. Fügt man einem SourceBuffer über appendBuffer() ein Initialisierungssegment hinzu, legt der Browser dafür passende AudioTrack-Objekte an. Diese erscheinen sowohl in SourceBuffer.audioTracks als auch in HTMLMediaElement.audioTracks.

Die Eigenschaft ist null, wenn die Spur nicht aus einem SourceBuffer stammt, etwa bei einer normalen Datei über src. Sie ist ebenfalls null, wenn der zugehörige SourceBuffer mit MediaSource.removeSourceBuffer() aus seiner MediaSource entfernt wurde.

Nützlich ist die Eigenschaft beim adaptiven Streaming mit mehreren Puffern, zum Beispiel wenn es für jede Sprache einen eigenen Puffer gibt. Man kann damit von einer Spur des Medienelements auf den Puffer schließen, der sie liefert, und dort Daten nachladen, entfernen oder den Pufferstand prüfen.

Rückgabewert

Typ

SourceBuffer | null

Beschreibung

Der SourceBuffer, der die Spur erzeugt hat, oder null, wenn die Spur nicht aus MSE stammt oder der Puffer entfernt wurde.

Beispiele

Prüfen, ob eine Audiospur aus MSE stammt

const video = document.querySelector('video');

// audioTracks wird nicht überall unterstützt
if (video.audioTracks) {
  for (const track of video.audioTracks) {
    const herkunft = track.sourceBuffer ? 'MSE-SourceBuffer' : 'normale Quelle';
    console.log(`${track.label || track.id} (${track.language}): ${herkunft}`);
  }
} else {
  console.log('AudioTrackList wird nicht unterstützt');
}

Deutsch (de): MSE-SourceBuffer English (en): MSE-SourceBuffer

Zur aktiven Spur den Puffer ermitteln und seinen Füllstand anzeigen

const video = document.querySelector('video');

const zeigePufferStand = () => {
  const aktiv = [...(video.audioTracks ?? [])].find((t) => t.enabled);
  const sb = aktiv?.sourceBuffer;
  if (!sb) {
    console.log('Aktive Spur hat keinen SourceBuffer');
    return;
  }
  const { buffered } = sb;
  for (let i = 0; i < buffered.length; i++) {
    console.log(`Bereich ${i}: ${buffered.start(i).toFixed(1)}s – ${buffered.end(i).toFixed(1)}s`);
  }
};

video.audioTracks?.addEventListener('change', zeigePufferStand);

Bereich 0: 0.0s – 24.0s

Die Referenz wird nach removeSourceBuffer() zu null

const video = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', async () => {
  const sb = mediaSource.addSourceBuffer('audio/mp4; codecs="mp4a.40.2"');
  const init = await (await fetch('/media/audio-init.mp4')).arrayBuffer();
  sb.appendBuffer(init);

  sb.addEventListener('updateend', () => {
    const track = sb.audioTracks?.[0];
    console.log(track?.sourceBuffer === sb); // true

    mediaSource.removeSourceBuffer(sb);
    console.log(track?.sourceBuffer); // null
  }, { once: true });
});

true null

// Wichtig · Fallstricke

Browser-Unterstützung: HTMLMediaElement.audioTracks und damit AudioTrack werden kaum unterstützt. Safari unterstützt sie. In Chrome muss man experimentelle Web-Plattform-Funktionen aktivieren, in Firefox ist ein Konfigurationsschalter nötig. Deshalb vor der Nutzung immer mit video.audioTracks?. prüfen.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird still ignoriert, im Strict Mode wirft sie einen TypeError.
Bei normalen Quellen über src oder <source> ist der Wert immer null. Ein null bedeutet also nicht automatisch einen Fehler.
Nach MediaSource.removeSourceBuffer() wird der Wert null. Wer die Referenz vorher in einer Variablen gespeichert hat, arbeitet danach mit einem entfernten Puffer. Weitere Aufrufe wie appendBuffer() werfen dann einen InvalidStateError.
Unter iOS-Safari, wo nur ManagedMediaSource verfügbar ist, kann das Verhalten abweichen. Bitte auf echten Geräten testen.

Siehe auch

ImageTrackList.selectedIndex AudioTrack.enabled AudioTrack.label AudioTrack.language AudioTrack.id