BaseAudioContext: createStereoPanner() 方法

Baseline 已广泛支持

此特性已得到良好支持，可在多种设备和浏览器版本上使用。自 2021 年 4 月起，所有浏览器均已支持此特性。

BaseAudioContext 接口的 createStereoPanner() 方法会创建一个 StereoPannerNode，可用于对音频源应用立体声声像。它使用一个低成本声像算法将传入的音频流定位到立体声像中。

注意： StereoPannerNode() 构造函数是创建 StereoPannerNode 的推荐方法；请参阅创建 AudioNode。

在我们的 StereoPannerNode 示例（查看源代码）的 HTML 中，我们有一个简单的 <audio> 元素，以及一个 <input> 滑块，用于增加和减少声像值。在 JavaScript 中，我们创建了一个 MediaElementAudioSourceNode 和一个 StereoPannerNode，并使用 connect() 方法将它们连接起来。然后，我们使用 oninput 事件处理程序在移动滑块时更改 StereoPannerNode.pan 参数的值并更新声像值显示。

在音乐播放时左右移动滑块，可以将音乐分别平移到输出的左扬声器和右扬声器。

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);