Zielausgabegerät in Web Audio ändern

François Beaufort
François Beaufort
GitHub

Bisher war es nur für <video> und <audio> mit HTMLMediaElement.setSinkId() möglich, das Ziel-Audioausgabegerät festzulegen. In Web Audio wurde für AudioContext das Standardgerät verwendet. Der Nutzer musste das Audioausgabegerät des Systems manuell ändern.

Ab Chrome 110 können Sie mit AudioContext.setSinkId() die Audioausgabe in Web Audio programmatisch an ein beliebiges zulässiges Gerät weiterleiten.

Das ist besonders in verschiedenen Echtzeitkommunikationsszenarien hilfreich. Eine Web-App kann damit beispielsweise die Ausgabe programmatisch an ein bestimmtes Audioausgabegerät wie ein Bluetooth-Headset oder eine Freisprecheinrichtung weiterleiten.

Audioausgabe an ein bestimmtes Gerät weiterleiten

Zuerst benötigen Sie die ID des Audioausgabegeräts, das Sie als Ziel verwenden möchten. Rufen Sie die Liste der verfügbaren Mediengeräte mit navigator.mediaDevices.enumerateDevices() ab, filtern Sie nur nach Audioausgabegeräten und rufen Sie das Attribut deviceId des gewünschten Audioausgabegeräts ab. Der Wert des leeren Strings "" kann auch als Standardgerät für deviceId verwendet werden.

Sobald Sie die ID des Audioausgabegeräts haben, erstellen Sie ein AudioContext und rufen Sie audioContext.setSinkId(deviceId) auf. Bei Erfolg wird das zurückgegebene Promise aufgelöst, wenn das Audio an das ausgewählte verbundene Ausgabegerät weitergeleitet wird. Dies kann fehlschlagen, wenn der AudioContext geschlossen ist.

Das folgende Beispiel zeigt, wie Sie bei Bedarf den Zugriff auf das Mikrofon anfordern und die Audioausgabe in Web Audio an das erste verfügbare Ausgabegerät weiterleiten.

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);

Sie können deviceId auch als sinkId-Parameter übergeben, wenn Sie eine AudioContext erstellen.

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

Audio mit einem stummgeschalteten AudioContext rendern

Sie können jetzt in Web Audio ein „stilles Ausgabegerät“ angeben, um den Stromverbrauch zu minimieren. Übergeben Sie dieses Mal anstelle eines Stringwerts { type: "none" } an AudioContext.setSinkId().

Die Audio-Zeitachse, auf die über audioContext.currentTime zugegriffen werden kann, wird weiterhin aktualisiert, um das Audio-Diagramm zu rendern. Das Hauptziel dieses stummgeschalteten AudioContext ist es, den Audiographen zu rendern, ohne hörbaren Ton zu erzeugen. Der primäre Anwendungsfall wäre die Analyse von Mikrofoneingaben, ohne dass Geräusche gemacht werden.

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

Funktionserkennung

So prüfen Sie, ob AudioContext.setSinkId() unterstützt wird:

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

Beispiel

Unter https://codepen.io/web-dot-dev/pen/emNwEaN/ finden Sie eine Demo, mit der Sie AudioContext.setSinkId() ausprobieren können.

Unterstützte Browser

AudioContext.setSinkId() ist ab Chrome 110 verfügbar.

Feedback

Das Chrome-Team und die Webstandards-Community möchten gern mehr über Ihre Erfahrungen mit AudioContext.setSinkId() erfahren. Bitte geben Sie Feedback, indem Sie vorhandene GitHub-Probleme kommentieren oder neue erstellen.

Danksagungen

Vielen Dank an Hongchan Choi und Michael Wilson für die Überprüfung dieses Artikels.