BaseAudioContext: createStereoPanner() 方法

基线广泛可用

此功能已确立，并在许多设备和浏览器版本中运行。它自 2021 年 4 月.

报告反馈

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

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

注意：建议使用 StereoPannerNode() 构造函数创建 StereoPannerNode；请参阅创建 AudioNode.

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