Bisher konnte das Ziel-Audioausgabegerät nur für <video> und <audio> mit HTMLMediaElement.setSinkId() festgelegt werden. In Web Audio wurde für AudioContext das Standardgerät verwendet, sodass der Nutzer das Audioausgabegerät des Systems manuell ändern konnte.
In Chrome 110 kannst du AudioContext.setSinkId() verwenden, um die Audioausgabe in Web Audio programmatisch an ein zulässiges Gerät weiterzuleiten.
Dies ist besonders bei einer Vielzahl von Echtzeitkommunikationsszenarien hilfreich. Beispielsweise kann eine Web-App dies verwenden, um die Ausgabe programmatisch an ein bestimmtes Audioausgabegerät wie ein Bluetooth-Headset oder eine Freisprecheinrichtung weiterzuleiten.
Audioausgabe an ein bestimmtes Gerät weiterleiten
Zuerst benötigen Sie die ID des Audioausgabegeräts, das Sie als Ziel verwenden möchten. Mit navigator.mediaDevices.enumerateDevices() kannst du die Liste der verfügbaren Mediengeräte abrufen, nur nach Audioausgabegeräten filtern und das Attribut deviceId des gewünschten Audioausgabegeräts abrufen. Der leere String "" kann auch als Standardgerät für deviceId verwendet werden.
Sobald Sie die ID des Audioausgabegeräts kennen, erstellen Sie eine AudioContext und rufen Sie audioContext.setSinkId(deviceId) auf. Bei Erfolg wird das zurückgegebene Promise aufgelöst, wenn die Audiodaten an das ausgewählte verbundene Ausgabegerät weitergeleitet werden. Sie kann fehlschlagen, wenn AudioContext geschlossen wird.
Das folgende Beispiel zeigt, 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);
Beachten Sie, dass Sie die deviceId auch als sinkId-Parameter übergeben können, wenn Sie eine AudioContext erstellen.
const audioContext = new AudioContext({ sinkId: deviceId });
Audio mit stummgeschaltetem AudioContext rendern
Sie können in Web Audio jetzt ein Gerät für die stumme Ausgabe festlegen, um den Stromverbrauch zu minimieren. Übergeben Sie dieses Mal anstelle eines Stringwerts { type: "none" } an AudioContext.setSinkId().
Hinweis: Die über audioContext.currentTime zugängliche Audiouhr wird trotzdem zum Rendern des Audiodiagramms fortgesetzt. Bei diesem stummgeschalteten AudioContext wird hauptsächlich das Audiodiagramm ohne hörbaren Ton gerendert. Der primäre Anwendungsfall wäre die Analyse der Mikrofoneingabe, ohne Töne zu erzeugen.
// Silent Web Audio output.
await audioContext.setSinkId({ type: "none" });
Funktionserkennung
Mit dem folgenden Befehl kannst du prüfen, 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 uns Feedback, indem Sie vorhandene GitHub-Probleme kommentieren oder neue melden.
Hilfreiche Links
- WebAudio-Spezifikation
- TAG-Überprüfung
- Demo | Demoquelle
- Chromium-Programmfehler
- ChromeStatus.com-Eintrag
Danksagungen
Vielen Dank an Hongchan Choi und Michael Wilson für die Rezension dieses Artikels.
Foto eines Kalenders von Steve Harvey auf Unsplash.