音频输出设备 API

操作系统通常允许用户指定音频应通过扬声器、蓝牙耳机或其他音频输出设备播放。此 API 允许应用程序在网页中提供相同的功能。

即使权限策略允许，访问特定音频输出设备仍然需要用户的明确许可，因为用户可能位于播放音频通过某些输出设备不合适的位置。

该 API 提供了MediaDevices.selectAudioOutput()方法，允许用户从文档的speaker-selection指令（Permissions-Policy HTTP 标头）允许的输出设备中选择所需的音频输出。然后，所选设备将获得用户许可，允许其使用MediaDevices.enumerateDevices()枚举，并使用HTMLMediaElement.setSinkId()将其设置为音频输出设备。

音频设备可能会任意连接和断开连接。希望对这种更改做出反应的应用程序可以监听devicechange事件，并使用enumerateDevices()确定返回的设备中是否存在sinkId。这可能会触发暂停或恢复播放等操作。

音频输出设备 API 扩展了以下 API，并添加了列出的功能

MediaDevices

MediaDevices.selectAudioOutput()

此方法提示用户选择特定的音频输出设备，例如扬声器或耳机。选择设备会授予用户使用该设备的权限，并返回有关该设备的信息，包括其 ID。

HTMLMediaElement

HTMLMediaElement.setSinkId()

此方法设置要用于输出的音频设备的 ID，如果允许，将使用该 ID。

HTMLMediaElement.sinkId

此属性返回正在用于输出的音频设备的唯一 ID，如果正在使用默认的用户代理设备，则返回空字符串。

对 API 的访问受以下约束

• 所有方法和属性只能在安全上下文中调用。
• MediaDevices.selectAudioOutput()授予用户许可，允许所选设备用作音频输出接收器
  • 访问权限可能会受到speaker-selection HTTP权限策略的限制。
  • 需要短暂的用户激活。用户必须与页面或 UI 元素交互才能调用该方法。
• HTMLMediaElement.setSinkId()将允许的 ID 设置为音频输出
  • 访问权限可能会受到speaker-selection HTTP权限策略的限制。
  • 设置非默认设备 ID 需要用户许可。
    • 这可以来自MediaDevices.selectAudioOutput()启动的提示中的选择
    • 如果用户已使用MediaDevices.getUserMedia()授予了在同一组中使用媒体输入设备的权限，则也会隐式授予用户设置输出设备的权限。

以下是在由按钮点击触发的函数中使用selectAudioOutput()并将其选定的设备设置为音频输出的示例。

代码首先检查是否支持selectAudioOutput()，如果支持，则使用它来选择输出并返回设备 ID。然后，我们使用默认输出播放一些音频，然后调用setSinkId()以切换到选定的输出设备。

document.querySelector("#myButton").addEventListener("click", async () => {
  if (!navigator.mediaDevices.selectAudioOutput) {
    console.log("selectAudioOutput() not supported or not in secure context.");
    return;
  }

  // Display prompt to select device
  const audioDevice = await navigator.mediaDevices.selectAudioOutput();

  // Create an audio element and start playing audio on the default device
  const audio = document.createElement("audio");
  audio.src = "https://example.com/audio.mp3";
  audio.play();

  // Change the sink to the selected audio output device.
  audio.setSinkId(audioDevice.deviceId);
});

请注意，如果记录输出详细信息，它们可能如下所示

console.log(
  `${audioDevice.kind}: ${audioDevice.label} id = ${audioDevice.deviceId}`,
);
// audiooutput: Realtek Digital Output (Realtek(R) Audio) id = 0wE6fURSZ20H0N2NbxqgowQJLWbwo+5ablCVVJwRM3k=