使用JavaScript Bluetooth API连接蓝牙音频输出设备求助

你用错API了。navigator.bluetooth 对应的Web Bluetooth API，仅用于和蓝牙低功耗（BLE）设备做GATT协议的数据交互，从设计层面就不支持连接蓝牙音频输出设备（蓝牙耳机、蓝牙音箱等走经典蓝牙A2DP/HFP协议的音频类设备）。哪怕你把现有代码的bug都修完，成功调用gatt.connect()连上设备，也没法把音频输出路由到该设备上。

你现有代码本身还有几个语法/逻辑问题，即使做BLE开发也需要修正：

• navigator.bluetooth.requestDevice() 返回的是单个BluetoothDevice对象，不是设备列表，参数命名为devices存在误导
• 调用requestDevice时必须在配置里声明你要访问的GATT服务列表，否则后续gatt.connect()会直接抛权限错误
• Web Bluetooth API仅能在HTTPS环境（本地localhost调试除外）下调用，且必须由用户主动交互事件（如点击按钮）触发，否则浏览器会直接拦截请求

Chrome环境下要实现切换音频输出到蓝牙设备，需要使用Audio Output Devices API，而非Web Bluetooth API，实现逻辑如下：

1. 提前在系统层面完成蓝牙音频设备的配对连接，浏览器本身不负责蓝牙配对流程，只有系统已经识别的音频设备才会被浏览器读取到
2. 申请音频设备访问权限，枚举当前系统所有可用的音频输出设备
3. 提供选择界面让用户选中目标蓝牙音频设备
4. 将页面音频/视频、WebRTC流的输出路由到选中的设备

参考实现代码：

// 注意：该函数必须绑定到用户主动触发的交互事件（如按钮点击回调）上，否则会被浏览器权限策略拦截
async function switchToBluetoothAudio() {
  try {
    // 申请音频设备访问权限
    await navigator.mediaDevices.getUserMedia({ audio: true });
    // 枚举所有可用的音频输出设备
    const allOutputDevices = await navigator.mediaDevices.enumerateDevices();
    const audioOutputs = allOutputDevices.filter(device => device.kind === 'audiooutput');

    // 此处可替换为自定义的下拉选择UI，这里用原生prompt做最简示例
    const optionText = audioOutputs
      .map((device, idx) => `${idx}: ${device.label || '未命名设备'}`)
      .join('\n');
    const selectIdx = Number(prompt(`请选择目标音频输出设备：\n${optionText}`));
    const targetDevice = audioOutputs[selectIdx];
    if (!targetDevice) throw new Error('选中的设备无效');

    // 将页面所有audio、video标签的音频输出切换到目标设备
    const mediaEls = document.querySelectorAll('audio, video');
    for (const el of mediaEls) {
      await el.setSinkId(targetDevice.deviceId);
    }

    // 如果是WebRTC场景，给音频流绑定输出设备即可
    // const audioEl = new Audio();
    // audioEl.srcObject = remoteStream;
    // await audioEl.setSinkId(targetDevice.deviceId);

    console.log('音频输出已切换至：', targetDevice.label);
  } catch (err) {
    console.error('切换音频输出失败：', err);
  }
}

兼容性说明 #

setSinkId方法从Chrome 49版本开始正式支持，不需要开启任何实验性开关，覆盖目前绝大多数主流Chrome版本。

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