Web Audio API更换音频源后如何保留PannerNode声像效果？

问题核心是你复用了旧的MediaElementSource节点——这个节点和初始的<audio>元素是绑定死的，更换audioElement后，旧的audioSource并不会自动关联新音频，导致新音频完全没经过pannerNode处理。

修改思路很简单：每次切换音频时，为新的audioElement重新创建MediaElementSource节点，再连接到已有的pannerNode即可，不需要重建pannerNode，这样就能保留之前设置的空间化参数。

修改后的完整代码：

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();

// 初始音频变量
let audioElement = document.getElementById('underwater-source');
let audioSource = audioContext.createMediaElementSource(audioElement);
const pannerNode = audioContext.createPanner();

// 初始连接
audioSource.connect(pannerNode);
pannerNode.connect(audioContext.destination);

function audioSelector(){
    // 暂停当前音频
    audioElement.pause();
    // 断开旧音频源的连接
    audioSource.disconnect(pannerNode);
    
    // 获取选中的音频并更新audioElement
    const selectedAudioId = document.getElementById("audio-select").value;
    audioElement = document.getElementById(`${selectedAudioId}-source`);
    
    // 为新音频创建新的MediaElementSource节点
    audioSource = audioContext.createMediaElementSource(audioElement);
    // 将新音频源连接到pannerNode
    audioSource.connect(pannerNode);
    
    // 播放新音频
    audioElement.play();
}

关键改动说明：

• 每次切换时重新调用createMediaElementSource，让新音频的数据流接入pannerNode
• 复用已有的pannerNode，确保之前设置的空间化参数（比如方位、距离等）完全保留

内容的提问来源于stack exchange，提问作者Kerby Elpenord