Signatur
Beschreibung
EncodedAudioChunk ist der Datencontainer der WebCodecs-API für komprimiertes Audio. Ein AudioEncoder liefert solche Chunks in seinem output-Callback, und ein AudioDecoder erwartet sie als Eingabe für decode(). Jeder Chunk enthält typischerweise genau einen kodierten Frame, etwa ein Opus-Paket oder einen AAC-Frame.
Der Konstruktor new EncodedAudioChunk(init) nimmt ein Objekt mit type ("key" oder "delta"), timestamp (Mikrosekunden), optional duration (Mikrosekunden) und data (ein ArrayBuffer, TypedArray oder DataView) entgegen. Die Daten werden beim Erzeugen kopiert, sofern sie nicht über transfer übertragen werden. Das Objekt ist danach unveränderlich.
Schreibgeschützte Eigenschaften sind type, timestamp, duration (oder null) und byteLength. Mit der Methode copyTo(destination) kopiert man die kodierten Bytes in einen eigenen Puffer, etwa um sie in einen Container (WebM, MP4) zu schreiben oder über WebSocket bzw. WebTransport zu verschicken.
Man verwendet EncodedAudioChunk, wenn man die Kodierung bzw. Dekodierung selbst steuern will: bei Echtzeit-Streaming mit niedriger Latenz, in browserbasierten Audio-Editoren oder beim Demuxen von Mediendateien in JavaScript bzw. WebAssembly.
Rückgabewert
EncodedAudioChunk-Instanz mit den Eigenschaften type, timestamp, duration und byteLength sowie der Methode copyTo().Beispiele
Chunk aus empfangenen Opus-Bytes erzeugen und dekodieren
const decoder = new AudioDecoder({
output: (audioData) => {
console.log(`Dekodiert: ${audioData.numberOfFrames} Frames @ ${audioData.sampleRate} Hz`);
audioData.close(); // Speicher freigeben
},
error: (e) => console.error('Decoder-Fehler:', e)
});
decoder.configure({ codec: 'opus', sampleRate: 48000, numberOfChannels: 2 });
// packetBytes: Uint8Array mit einem Opus-Paket, z. B. per WebSocket empfangen
const handlePacket = (packetBytes, timestampUs) => {
const chunk = new EncodedAudioChunk({
type: 'key',
timestamp: timestampUs,
duration: 20_000, // 20 ms
data: packetBytes
});
decoder.decode(chunk);
};
Chunks aus dem AudioEncoder auslesen und mit copyTo() versenden
const socket = new WebSocket('wss://example.com/audio');
socket.binaryType = 'arraybuffer';
const encoder = new AudioEncoder({
output: (chunk, metadata) => {
const buffer = new Uint8Array(chunk.byteLength);
chunk.copyTo(buffer);
console.log(chunk.type, chunk.timestamp, chunk.duration, chunk.byteLength);
if (socket.readyState === WebSocket.OPEN) socket.send(buffer);
},
error: (e) => console.error(e)
});
encoder.configure({
codec: 'opus',
sampleRate: 48000,
numberOfChannels: 1,
bitrate: 64_000
});
Eigenschaften prüfen und Zero-Copy-Transfer
const bytes = new Uint8Array([0xfc, 0xff, 0xfe]).buffer;
const chunk = new EncodedAudioChunk({
type: 'key',
timestamp: 1_000_000, // 1 Sekunde
data: bytes,
transfer: [bytes] // ohne Kopie übergeben
});
console.log(chunk.type, chunk.timestamp, chunk.duration, chunk.byteLength);
console.log('Originalpuffer:', bytes.byteLength); // detached
// Wichtig · Fallstricke
- Einheiten:
timestampunddurationwerden in Mikrosekunden angegeben, nicht in Millisekunden oder Samples. Ein Opus-Frame mit 20 ms hat alsoduration: 20000. - Unveränderlich: Die Daten lassen sich nicht direkt lesen, es gibt keine
data-Eigenschaft. Man kommt nur übercopyTo()an die Bytes. Ist der Zielpuffer kleiner alsbyteLength, wirft die Methode einenTypeError. - Kopie vs. Transfer: Ohne
transferwerden die Daten kopiert. Mittransfersind die übergebenenArrayBufferdanach detached. Die Unterstützung vontransferist neuer und fehlt in älteren Browsern. - Codec-Konfiguration: Bei AAC muss der Decoder meist mit
description(AudioSpecificConfig) konfiguriert werden. Diese erhält man beim Kodieren übermetadata.decoderConfigimoutput-Callback. - Kompatibilität: WebCodecs ist nur in sicheren Kontexten (HTTPS) verfügbar, im Fenster und in Workern. Chromium unterstützt die API ab Version 94, Firefox ab 130, Safari hat Audio-WebCodecs erst spät erhalten. Vorher per Feature-Test prüfen:
'EncodedAudioChunk' in globalThisundAudioDecoder.isConfigSupported(). EncodedAudioChunkist serialisierbar und lässt sich perpostMessage()an Worker senden.