移动端浏览器中能否切换HTML5 <audio>元素的音频输出设备？

一、先做兼容性检测 #

首先在代码里判断当前浏览器是否支持setSinkId和媒体设备枚举API，避免直接调用报错：

const isSetSinkIdSupported = 'setSinkId' in HTMLAudioElement.prototype;
const isMediaDevicesSupported = 'mediaDevices' in navigator && 'enumerateDevices' in navigator.mediaDevices;

二、支持setSinkId时的实现流程 #

如果浏览器支持，按以下步骤实现设备选择：

1. 请求设备权限：需要先获取媒体设备访问权限（哪怕仅针对音频输出，部分浏览器仍需权限触发），可通过创建临时媒体流触发授权：

async function requestDevicePermission() {
  try {
    // 创建临时流获取权限，之后立即关闭
    const tempStream = await navigator.mediaDevices.getUserMedia({ audio: true });
    tempStream.getTracks().forEach(track => track.stop());
  } catch (err) {
    console.error('获取设备权限失败:', err);
  }
}

2. 枚举可用输出设备：权限获取后，筛选出所有音频输出设备：

async function getAudioOutputDevices() {
  if (!isMediaDevicesSupported) return [];
  const devices = await navigator.mediaDevices.enumerateDevices();
  return devices.filter(device => device.kind === 'audiooutput');
}

3. 绑定设备选择UI：把设备列表渲染成下拉框或按钮，用户选择后调用setSinkId设置输出设备：

async function setAudioOutputDevice(audioElement, deviceId) {
  if (!isSetSinkIdSupported) return false;
  try {
    await audioElement.setSinkId(deviceId);
    return true;
  } catch (err) {
    console.error('设置输出设备失败:', err);
    return false;
  }
}

三、不支持setSinkId时的降级方案 #

对于不支持的浏览器（尤其是部分移动端浏览器），采用以下替代方案：

• 引导系统级切换：在UI上显示提示，引导用户通过手机系统设置（比如iOS控制中心、Android声音设置）手动切换音频输出设备。
• 利用系统自动路由：大部分移动端系统会在耳机插拔时自动切换音频输出，可监听设备变化事件更新UI，确保播放逻辑正常响应：

if (isMediaDevicesSupported) {
  navigator.mediaDevices.addEventListener('devicechange', () => {
    // 设备变化时重新枚举设备，更新选择UI
    getAudioOutputDevices().then(devices => {
      // 这里更新页面上的设备选择控件
    });
  });
}

• 保留默认播放逻辑：如果无法指定输出设备，就让音频按系统默认规则播放，优先保证核心播放功能可用。

四、额外注意事项 #

• 移动端浏览器限制：iOS Safari从14.5版本才开始支持setSinkId，旧版本只能依赖系统切换；部分Android内置浏览器对媒体API支持有限，需针对性测试。
• 权限前置：必须确保用户授权媒体设备访问权限，否则无法枚举输出设备。
• 多设备测试：重点测试目标场景的浏览器，比如微信内置浏览器、Android Chrome、iOS Safari等。

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