Bisher war es nur für <video> und <audio> mit HTMLMediaElement.setSinkId() möglich, das Zielgerät für die Audioausgabe 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 Kennung 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. Der Vorgang kann fehlschlagen, wenn der AudioContext geschlossen ist.
Das folgende Beispiel zeigt, wie Sie bei Bedarf den 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 deviceId auch als sinkId-Parameter beim Erstellen eines AudioContext übergeben.
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 fortgesetzt, 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 einreichen.
Nützliche Links
Danksagungen
Vielen Dank an Hongchan Choi und Michael Wilson für die Überprüfung dieses Artikels.
Kalenderbild von Steve Harvey auf Unsplash.