在網路音訊中變更目的地輸出裝置

François Beaufort
François Beaufort
GitHub

目前只有 <video> 和 <audio> 支援透過 HTMLMediaElement.setSinkId() 設定音訊輸出裝置。在 Web Audio 中，AudioContext 會使用預設裝置，使用者必須手動變更系統音訊輸出裝置。

自 Chrome 110 起，您可以使用 AudioContext.setSinkId()，以程式輔助方式將 Web Audio 中的音訊輸出導向任何允許的裝置。

這在各種即時通訊情境中特別實用。舉例來說，網頁應用程式可使用這項功能，以程式輔助方式將輸出內容導向特定音訊輸出裝置，例如藍牙耳機或擴音模式。

將音訊輸出路徑設定為特定裝置

首先，您需要想做為目的地的音訊輸出裝置 ID。使用 navigator.mediaDevices.enumerateDevices() 取得可用媒體裝置清單，只篩選音訊輸出裝置，並取得所選音訊輸出裝置的 deviceId 屬性。空字串 "" 值也可以做為 deviceId 的預設裝置。

取得音訊輸出裝置的 ID 後，請建立 AudioContext 並呼叫 audioContext.setSinkId(deviceId)。成功後，當音訊傳送至所選的已連線輸出裝置時，傳回的 Promise 會解析。如果 AudioContext 已關閉，這項作業可能會失敗。

以下範例說明如何視需要要求麥克風存取權，並將 Web Audio 中的音訊輸出導向第一個可用的輸出裝置。

const permission = await navigator.permissions.query({ name: "microphone" });
if (permission.state == "prompt") {
  // More audio outputs are available when user grants access to the mic.
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  stream.getTracks().forEach((track) => track.stop());
}

// Request a list of media devices and filter audio output devices.
const devices = await navigator.mediaDevices.enumerateDevices();
const audioOutputs = devices.filter(device => device.kind == "audiooutput");

const audioContext = new AudioContext();

// Pick the first available audio output.
const deviceId = audioOutputs[0].deviceId;
await audioContext.setSinkId(deviceId);

請注意，建立 AudioContext 時，您也可以將 deviceId 做為 sinkId 參數傳遞。

const audioContext = new AudioContext({ sinkId: deviceId });

使用靜音的 AudioContext 算繪音訊

您現在可以在 Web Audio 中指定「無聲輸出裝置」，盡量減少耗電量。這次請將 { type: "none" } 傳遞至 AudioContext.setSinkId()，而非字串值。

請注意，透過 audioContext.currentTime 存取的音訊時鐘仍會前進，以算繪音訊圖表。這個靜音 AudioContext 的主要目標是算繪音訊圖，但不產生可聽見的聲音。主要用途是分析麥克風輸入內容，但不會發出聲音。

// Silent Web Audio output.
await audioContext.setSinkId({ type: "none" });

特徵偵測

如要檢查是否支援 AudioContext.setSinkId()，請使用：

if ("setSinkId" in AudioContext.prototype) {
  // AudioContext.setSinkId() is supported.
}

範例

如要試用，請前往 https://codepen.io/web-dot-dev/pen/emNwEaN/。AudioContext.setSinkId()

瀏覽器支援

AudioContext.setSinkId() 適用於 Chrome 110 以上版本。

意見回饋

Chrome 團隊和網路標準社群很想聽聽您對 AudioContext.setSinkId() 的使用體驗。如要提供意見回饋，請對現有 GitHub 問題發表評論，或回報新問題。

特別銘謝

感謝 Hongchan Choi 和 Michael Wilson 審查本文。

日曆圖片：Steve Harvey 發表於 Unsplash。