BaseAudioContext: Methode createStereoPanner()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Die createStereoPanner()-Methode der BaseAudioContext-Schnittstelle erstellt einen StereoPannerNode, der verwendet werden kann, um Stereo-Panning auf eine Audioquelle anzuwenden. Sie positioniert einen eingehenden Audiostream in einem Stereo-Image unter Verwendung eines kostengünstigen Panning-Algorithmus.

Hinweis: Der StereoPannerNode()-Konstruktor ist die empfohlene Methode, um einen StereoPannerNode zu erstellen; siehe Erstellen eines AudioNode.

Syntax

js
createStereoPanner()

Parameter

Keine.

Rückgabewert

Beispiele

In unserem StereoPannerNode-Beispiel (siehe Quellcode) HTML haben wir ein einfaches <audio>-Element zusammen mit einem Schieberegler <input> zum Erhöhen und Verringern des Pan-Wertes. Im JavaScript erstellen wir einen MediaElementAudioSourceNode und einen StereoPannerNode und verbinden die beiden mithilfe der connect()-Methode. Anschließend verwenden wir einen oninput-Event-Handler, um den Wert des StereoPannerNode.pan-Parameters zu ändern und die Pan-Wert-Anzeige zu aktualisieren, wenn der Schieberegler bewegt wird.

Wenn Sie den Schieberegler nach links und rechts bewegen, während die Musik spielt, wird die Musik entsprechend auf die linken und rechten Lautsprecher des Ausganges verschoben.

js
const audioCtx = new AudioContext();
const myAudio = document.querySelector("audio");

const panControl = document.querySelector(".panning-control");
const panValue = document.querySelector(".panning-value");

// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
const source = audioCtx.createMediaElementSource(myAudio);

// Create a stereo panner
const panNode = audioCtx.createStereoPanner();

// Event handler function to increase panning to the right and left
// when the slider is moved

panControl.oninput = () => {
  panNode.pan.setValueAtTime(panControl.value, audioCtx.currentTime);
  panValue.textContent = panControl.value;
};

// connect the MediaElementAudioSourceNode to the panNode
// and the panNode to the destination, so we can play the
// music and adjust the panning using the controls
source.connect(panNode);
panNode.connect(audioCtx.destination);

Spezifikationen

Specification
Web Audio API
# dom-baseaudiocontext-createstereopanner

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
createStereoPanner

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch