使用getDisplayMedia()并设preferCurrentTab:true后，如何阻止标签页静音？

当调用navigator.mediaDevices.getDisplayMedia()并设置preferCurrentTab: true和audio: true时，浏览器会自动静音当前标签页的本地音频输出——这是为了避免捕获的音频被本地播放产生循环回声的设计。以下是几种针对性的解决方案：

方案1：不捕获当前标签页音频（适合无需共享当前标签声音的场景） #

如果你的屏幕共享不需要包含当前标签的音频，直接将audio配置设为false，即可避免浏览器触发标签静音机制：

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: false, // 关闭音频捕获，解除标签静音限制
  preferCurrentTab: true,
});
let audio = new Audio("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3");
audio.play(); // 音频可正常播放

方案2：用Web Audio API绕过静音限制（需捕获当前标签音频时） #

若必须捕获当前标签的音频，同时要播放本地音频，可使用Web Audio API替代HTMLAudioElement，因为它不受浏览器标签静音机制的限制：

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: true,
  preferCurrentTab: true,
});

async function playLocalAudio() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  // 加载音频文件
  const res = await fetch("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3");
  const buffer = await res.arrayBuffer();
  const audioBuffer = await audioContext.decodeAudioData(buffer);
  
  // 创建音频源并播放
  const sourceNode = audioContext.createBufferSource();
  sourceNode.buffer = audioBuffer;
  sourceNode.connect(audioContext.destination);
  sourceNode.start();
}

playLocalAudio();

方案3：调整音频捕获范围（共享系统音频而非当前标签） #

如果需要共享的是系统全局音频而非当前标签的音频，可修改audio配置为系统音频偏好，或在浏览器的屏幕共享选择界面手动切换到系统音频（需浏览器支持），这样当前标签不会被静音：

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    // 部分浏览器支持指定音频来源为系统音频，可根据浏览器文档调整
  },
  preferCurrentTab: true,
});
let audio = new Audio("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3");
audio.play();

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