new BlobEvent() — Methode · JavaScript-Referenz

Signatur

new BlobEvent(type, options)

Beschreibung

Der Konstruktor BlobEvent() erzeugt ein Ereignisobjekt vom Typ BlobEvent. Solche Ereignisse kommen vor allem in der MediaStream Recording API vor: Ein MediaRecorder löst das Ereignis dataavailable als BlobEvent aus, dessen Eigenschaft data einen Ausschnitt der aufgenommenen Audio- oder Videodaten enthält.

Normalerweise muss man BlobEvent nicht selbst erzeugen, weil der Browser das übernimmt. Den Konstruktor braucht man aber für Unit-Tests, Mocks von MediaRecorder-Abläufen oder für eigene Komponenten, die Datenblöcke über dispatchEvent() an Listener weitergeben sollen.

Das zweite Argument ist Pflicht und muss eine Eigenschaft data vom Typ Blob enthalten. Optional kann man mit timecode einen Zeitstempel in Millisekunden angeben. Dazu kommen die üblichen EventInit-Optionen bubbles, cancelable und composed.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Name des Ereignisses, z. B. `"dataavailable"`. Groß- und Kleinschreibung wird beachtet.
$options Pflicht	object		Wörterbuch vom Typ `BlobEventInit` (erweitert `EventInit`): `data` (`Blob`, Pflicht): der Blob, den das Ereignis mitführt. `timecode` (`number`, optional): Zeitstempel in Millisekunden (`DOMHighResTimeStamp`) für die Daten. `bubbles`, `cancelable`, `composed` (`boolean`, optional, Standard jeweils `false`).

Rückgabewert

Typ

BlobEvent

Beschreibung

Ein neues BlobEvent-Objekt. Über event.data erreicht man den übergebenen Blob, über event.timecode den Zeitstempel.

Beispiele

BlobEvent erzeugen und auslesen

const blob = new Blob(['Hallo Welt'], { type: 'text/plain' });
const event = new BlobEvent('dataavailable', { data: blob, timecode: 1500 });

console.log(event.type);
console.log(event.data.size);
console.log(event.timecode);

dataavailable 10 1500

Eigenes Ereignis über EventTarget auslösen

const recorderMock = new EventTarget();

recorderMock.addEventListener('dataavailable', async (e) => {
  const text = await e.data.text();
  console.log(`Chunk empfangen: ${text}`);
});

const chunk = new Blob(['Teil 1'], { type: 'text/plain' });
recorderMock.dispatchEvent(new BlobEvent('dataavailable', { data: chunk }));

Chunk empfangen: Teil 1

MediaRecorder-Handler testen, ohne Mikrofon

const chunks = [];
const handleData = (e) => {
  if (e.data.size > 0) chunks.push(e.data);
};

// Ereignisse simulieren, wie sie ein MediaRecorder liefern würde
handleData(new BlobEvent('dataavailable', { data: new Blob([new Uint8Array(512)], { type: 'audio/webm' }) }));
handleData(new BlobEvent('dataavailable', { data: new Blob([]) }));

const recording = new Blob(chunks, { type: 'audio/webm' });
console.log(chunks.length, recording.size);

1 512

// Wichtig · Fallstricke

Ohne das zweite Argument oder ohne data wirft der Konstruktor einen TypeError. Auch für data ist nur ein Blob (bzw. eine File) erlaubt.
timecode wird nicht von allen Browsern gleich unterstützt. In älteren Versionen fehlt die Eigenschaft oder liefert undefined, also nicht blind darauf verlassen.
Selbst erzeugte Ereignisse haben isTrusted === false. So lassen sie sich von echten Browser-Ereignissen unterscheiden.
BlobEvent gibt es nur im Browser (Fenster-Kontext, teilweise auch in Workern). Node.js kennt es nicht, und in Test-Umgebungen wie jsdom braucht man eventuell ein Polyfill.
Bei echten Aufnahmen können leere Blobs (size === 0) ankommen. Diese sollte man vor dem Zusammenfügen herausfiltern.

Siehe auch

Blob new CloseEvent() new DragEvent() new ErrorEvent() new Event()