为何setSinkId与BiquadFilters结合使用时功能失效？

我正在开发一款可实时切换输出设备（耳机或扬声器）的音乐播放器，目前已实现通过setSinkId切换目标设备的功能，同时也能正常使用BiquadFilters（低通、高通等滤波器）以及音频处理器生成增益条。

以下为部分代码：

设置输出设备的代码 #

if (audiooutput_ch1active == 0) {
    if (typeof audiooutput_headphonesid !== "undefined") {
        audiooutput_ch1active = 1;
        await audio_ch1.setSinkId(audiooutput_headphonesid);
        return;
    }
} else if (audiooutput_ch1active == 1) {
    if (typeof audiooutput_speakersid !== "undefined") {
        audiooutput_ch1active = 0;
        await audio_ch1.setSinkId(audiooutput_speakersid);
        return;
    }
}  

定义滤波器的代码 #

var filter_ch1_lowpass = audioCtx_ch1.createBiquadFilter();  
filter_ch1_lowpass.type = "lowpass";  
filter_ch1_lowpass.frequency.value = 12000;  
var filter_ch1_highpass = audioCtx_ch1.createBiquadFilter();  
filter_ch1_highpass.type = "highpass";  
filter_ch1_highpass.frequency.value = 0;  
var filter_ch1_lowshelf = audioCtx_ch1.createBiquadFilter();  
filter_ch1_lowshelf.type = "lowshelf";  
filter_ch1_lowshelf.frequency.value = 100;  
filter_ch1_lowshelf.gain.value = 0;

连接滤波器与处理器的代码 #

audio_ch1.src = path;
source_ch1 = audioCtx_ch1.createMediaElementSource(audio_ch1);
source_ch1.connect(filter_ch1_lowpass);
filter_ch1_lowpass.connect(filter_ch1_highpass);
filter_ch1_highpass.connect(filter_ch1_lowshelf);
filter_ch1_lowshelf.connect(processor_ch1);
filter_ch1_lowshelf.connect(audioCtx_ch1.destination);
processor_ch1.connect(filter_ch1_lowshelf);

遇到的问题：当将滤波器连接到音频上下文后，无法使用setSinkId，会抛出错误：Uncaught (in promise) DOMException: The operation could not be performed and was aborted。跳过滤波器连接代码时，setSinkId可正常工作。请问setSinkId是否不支持音频上下文滤波器？我是JavaScript音频开发新手。

setSinkId本身支持搭配Web Audio API的滤波器使用，你遇到的错误核心原因是：当音频元素被createMediaElementSource连接到AudioContext后，音频的输出控制权已转移给AudioContext，此时再直接给<audio>元素调用setSinkId会触发冲突。

正确实现方案 #

要同时实现滤波器效果和输出设备切换，需调整输出目标的设置对象：

1. 不要操作<audio>元素的setSinkId，改为给AudioContext调用setSinkId()来切换输出设备
2. 确保所有音频输出都经过AudioContext链路，不要保留<audio>元素的默认输出

调整后的代码示例 #

切换输出设备的代码

// 切换设备时直接操作AudioContext
if (audiooutput_ch1active == 0) {
    if (typeof audiooutput_headphonesid !== "undefined") {
        audiooutput_ch1active = 1;
        await audioCtx_ch1.setSinkId(audiooutput_headphonesid);
        return;
    }
} else if (audiooutput_ch1active == 1) {
    if (typeof audiooutput_speakersid !== "undefined") {
        audiooutput_ch1active = 0;
        await audioCtx_ch1.setSinkId(audiooutput_speakersid);
        return;
    }
}  

音频链路注意事项

你的滤波器连接逻辑基本正确，但需要确保：不要让<audio>元素直接输出音频（可以设置<audio>的muted属性为true，避免双重输出），所有音频都通过AudioContext处理后输出到目标设备。

错误原因详解 #

当你使用createMediaElementSource将<audio>元素接入AudioContext时，浏览器会拦截<audio>的原生输出，把音频流导向AudioContext进行处理。此时<audio>元素本身已不再负责输出，调用它的setSinkId自然会触发操作中止的错误——因为输出通道的控制权已经不在<audio>这里了。

内容的提问来源于stack exchange，提问作者Unknown Guy