Zielausgabegerät in Web Audio ändern

François Beaufort
François Beaufort
GitHub

Bisher war es nur bei <video> und <audio> mit HTMLMediaElement.setSinkId() möglich, das Zielaudioausgabegerät festzulegen. In Web Audio wurde für AudioContext das Standardgerät verwendet. Der Nutzer musste das Systemaudioausgabegerät 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 einer Vielzahl von Echtzeit-Kommunikationsszenarien hilfreich. So kann beispielsweise eine Webanwendung 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 Kennung des Audioausgabegeräts, das Sie als Ziel verwenden möchten. Rufe mit navigator.mediaDevices.enumerateDevices() die Liste der verfügbaren Mediengeräte ab, filtere nur nach Audioausgabegeräten und hole das deviceId-Attribut des gewünschten Audioausgabegeräts ab. Der leere String "" kann auch als Standardgerät für deviceId verwendet werden.

Sobald du die ID des Audioausgabegeräts hast, erstelle eine AudioContext und rufe audioContext.setSinkId(deviceId) auf. Bei Erfolg wird das zurückgegebene Versprechen erfüllt, wenn die Audioausgabe an das ausgewählte verbundene Ausgabegerät weitergeleitet wird. Dies kann fehlschlagen, wenn der AudioContext geschlossen ist.

Im folgenden Beispiel wird gezeigt, wie Sie bei Bedarf Mikrofonzugriff 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 die deviceId auch als sinkId-Parameter übergeben, wenn Sie eine AudioContext erstellen.

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

Audio mit einer stummgeschalteten AudioContext rendern

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

Die Audiouhr, auf die du über audioContext.currentTime zugreifen kannst, läuft weiter, um das Audiodiagramm zu rendern. Das Hauptziel dieses stummgeschalteten AudioContexts besteht darin, den Audiographen zu rendern, ohne hörbaren Ton zu erzeugen. Der primäre Anwendungsfall besteht darin, die Mikrofoneingabe zu analysieren, ohne Geräusche zu machen.

// 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://sinkid.glitch.me/ ist eine Demo verfügbar, mit der du AudioContext.setSinkId() ausprobieren kannst.

Unterstützte Browser

AudioContext.setSinkId() ist in Chrome 110 oder höher verfügbar.

Feedback

Das Chrome-Team und die Webstandards-Community möchten 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.

Kalenderbild von Steve Harvey auf Unsplash