Signatur
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
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();
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();
});
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
outputIndexverbindetsplitter.connect(ziel)nur Ausgang 0, also nur den linken Kanal. Das ist ein häufiger Grund für „nur noch links hörbar“. - Wertebereich:
numberOfOutputsaußerhalb von 1–32 wirft einenIndexSizeError. - Feste Kanalkonfiguration:
channelCountist immer gleichnumberOfOutputs,channelCountModeist"explicit"undchannelInterpretationist"discrete". Wer diese Werte ändern will, bekommt einenInvalidStateError. Ä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
AudioContextstartet in vielen Browsern im Zustand"suspended". Rufectx.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.