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
createStereoPanner()
Parameter
Keine.
Rückgabewert
Ein StereoPannerNode.
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.
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
BCD tables only load in the browser