Start · Sprachen · JavaScript · Referenz · BaseAudioContext.createChannelSplitter()

BaseAudioContext.createChannelSplitter()

Methode

Erzeugt einen <code>ChannelSplitterNode</code>, der die Kanäle eines Audio-Streams auf getrennte Mono-Ausgänge aufteilt, damit du sie einzeln bearbeiten kannst.

seit JavaScript Baseline: alle modernen Browser (Web Audio API) Kategorie: webapi

Signatur

BaseAudioContext.prototype.createChannelSplitter(numberOfOutputs)

Beschreibung

createChannelSplitter() ist eine Fabrikmethode von AudioContext und OfflineAudioContext (beide erben von BaseAudioContext). Sie liefert einen ChannelSplitterNode mit einem Eingang und n Ausgängen. Jeder Ausgang führt genau einen Kanal des Eingangssignals als Mono-Signal: Ausgang 0 den linken Kanal, Ausgang 1 den rechten usw.

Du brauchst die Methode, wenn du Kanäle getrennt verarbeiten willst, z. B. um nur den linken Kanal zu filtern, links und rechts getrennt zu messen (Pegelanzeige mit zwei AnalyserNodes), Kanäle zu tauschen oder einzelne Kanäle eines Mehrkanal-Streams (5.1) herauszuziehen. Meist verwendest du sie zusammen mit createChannelMerger(), um die bearbeiteten Kanäle wieder zusammenzufügen.

Wichtig: Beim Aufruf von connect() gibst du über den zweiten Parameter (outputIndex) an, welcher Ausgang des Splitters angeschlossen wird. Ausgänge, die keinem Eingangskanal entsprechen (z. B. Ausgang 3 bei einem Stereo-Eingang), geben Stille aus.

Alternativ kannst du den Konstruktor new ChannelSplitterNode(context, { numberOfOutputs }) nutzen, der dasselbe Ergebnis liefert und etwas moderner wirkt.

Parameter

Name Typ Default Beschreibung
$numberOfOutputs number 6 Anzahl der Ausgänge (und damit der getrennten Kanäle). Muss zwischen 1 und 32 liegen, sonst wird ein IndexSizeError geworfen.

Rückgabewert

Typ
ChannelSplitterNode
Beschreibung
Ein neuer ChannelSplitterNode mit einem Eingang und numberOfOutputs Mono-Ausgängen.

Beispiele

Stereo-Signal in linken und rechten Kanal aufteilen

const ctx = new AudioContext();
const osc = ctx.createOscillator();

// Nur zwei Ausgänge für Stereo
const splitter = ctx.createChannelSplitter(2);
console.log(splitter.numberOfInputs, splitter.numberOfOutputs);

osc.connect(splitter);
// Nur den linken Kanal (Ausgang 0) zum Ziel leiten
splitter.connect(ctx.destination, 0);
osc.start();
1 2

Getrennte Pegelanzeige für links und rechts

const ctx = new AudioContext();
const audioEl = document.querySelector('audio');
const source = ctx.createMediaElementSource(audioEl);

const splitter = ctx.createChannelSplitter(2);
const analyserL = ctx.createAnalyser();
const analyserR = ctx.createAnalyser();

source.connect(splitter);
splitter.connect(analyserL, 0); // links
splitter.connect(analyserR, 1); // rechts
source.connect(ctx.destination); // weiterhin hörbar

const bufL = new Float32Array(analyserL.fftSize);
const bufR = new Float32Array(analyserR.fftSize);

const rms = (buf) => Math.sqrt(buf.reduce((s, v) => s + v * v, 0) / buf.length);

const tick = () => {
  analyserL.getFloatTimeDomainData(bufL);
  analyserR.getFloatTimeDomainData(bufR);
  console.log(`L: ${rms(bufL).toFixed(3)}  R: ${rms(bufR).toFixed(3)}`);
  requestAnimationFrame(tick);
};

audioEl.addEventListener('play', async () => {
  await ctx.resume();
  tick();
});
L: 0.142 R: 0.137 (fortlaufend)

Linken und rechten Kanal vertauschen

const ctx = new AudioContext();
const audioEl = document.querySelector('audio');
const source = ctx.createMediaElementSource(audioEl);

const splitter = ctx.createChannelSplitter(2);
const merger = ctx.createChannelMerger(2);

source.connect(splitter);
// Ausgang 0 (links) -> Merger-Eingang 1 (rechts) und umgekehrt
splitter.connect(merger, 0, 1);
splitter.connect(merger, 1, 0);
merger.connect(ctx.destination);

document.querySelector('#play').addEventListener('click', async () => {
  await ctx.resume();
  audioEl.play();
});

// Wichtig · Fallstricke

  • Ausgang wählen: Ohne outputIndex verbindet splitter.connect(ziel) nur Ausgang 0, also nur den linken Kanal. Das ist ein häufiger Grund für „nur noch links hörbar“.
  • Wertebereich: numberOfOutputs außerhalb von 1–32 wirft einen IndexSizeError.
  • Feste Kanalkonfiguration: channelCount ist immer gleich numberOfOutputs, channelCountMode ist "explicit" und channelInterpretation ist "discrete". Wer diese Werte ändern will, bekommt einen InvalidStateError. Ältere Browser-Versionen haben das teilweise anders umgesetzt.
  • Mono-Quellen: Ist der Eingang mono, führt nur Ausgang 0 ein Signal. Alle anderen Ausgänge geben Stille aus.
  • Autoplay: Ein AudioContext startet in vielen Browsern im Zustand "suspended". Rufe ctx.resume() nach einer Nutzeraktion auf.
  • CORS: Bei createMediaElementSource() mit Audio von fremden Domains sind die Daten ohne passende CORS-Header stummgeschaltet. Dann liefern auch die Analyser nur Nullen.
  • Kompatibilität: Wird von allen aktuellen Browsern unterstützt. Sehr alte WebKit-Versionen brauchten webkitAudioContext.