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