Audio Output Devices API

Betriebssysteme ermöglichen es den Nutzern häufig, festzulegen, dass Audio über Lautsprecher, ein Bluetooth-Headset oder ein anderes Audio-Ausgabegerät abgespielt werden soll. Diese API erlaubt es Anwendungen, diese Funktionalität direkt aus einer Webseite heraus anzubieten.

Selbst wenn eine Erlaubnisrichtlinie dies zulässt, erfordert der Zugriff auf ein bestimmtes Audio-Ausgabegerät dennoch explizite Zustimmung durch den Nutzer, da sich dieser möglicherweise an einem Ort befindet, an dem die Wiedergabe über bestimmte Ausgabegeräte nicht angemessen ist.

Die API stellt die Methode MediaDevices.selectAudioOutput() bereit, die es Nutzern ermöglicht, ihr gewünschtes Audio-Ausgabegerät aus denen auszuwählen, die durch die Richtlinie speaker-selection des Permissions-Policy HTTP-Headers für das Dokument erlaubt sind. Das ausgewählte Gerät erhält dann die Erlaubnis des Nutzers, wodurch es mit MediaDevices.enumerateDevices() aufgelistet und als Audio-Ausgabegerät mit HTMLMediaElement.setSinkId() festgelegt werden kann.

Audio-Geräte können beliebig verbunden und getrennt werden. Anwendungen, die auf solche Änderungen reagieren möchten, können das devicechange Ereignis überwachen und enumerateDevices() verwenden, um festzustellen, ob sinkId in den zurückgegebenen Geräten vorhanden ist. Dies könnte beispielsweise das Pausieren oder Fortsetzen der Wiedergabe auslösen.

Die Audio Output Devices API erweitert die folgenden APIs und fügt die aufgeführten Funktionen hinzu:

MediaDevices

MediaDevices.selectAudioOutput()

Diese Methode fordert den Nutzer auf, ein spezifisches Audio-Ausgabegerät auszuwählen, beispielsweise einen Lautsprecher oder ein Headset. Die Auswahl eines Geräts gewährt die Nutzererlaubnis zur Nutzung dieses Geräts und gibt Informationen über das Gerät, einschließlich seiner ID, zurück.

HTMLMediaElement

HTMLMediaElement.setSinkId()

Diese Methode legt die ID des zur Ausgabe zu verwendenden Audiogeräts fest, das verwendet wird, sofern dies erlaubt ist.

HTMLMediaElement.sinkId

Diese Eigenschaft gibt die eindeutige ID des für die Ausgabe verwendeten Audiogeräts zurück oder einen leeren String, wenn das Standardgerät des Benutzeragenten verwendet wird.

Der Zugriff auf die API unterliegt den folgenden Einschränkungen:

• Alle Methoden und Eigenschaften dürfen nur in einem sicheren Kontext aufgerufen werden.

• MediaDevices.selectAudioOutput() gewährt eine Erlaubnis des Nutzers für ein ausgewähltes Gerät als Audio-Ausgang:

  • Der Zugang kann durch die speaker-selection HTTP Berechtigungsrichtlinie beschränkt sein.
  • Transiente Benutzeraktivierung ist erforderlich. Der Nutzer muss mit der Seite oder einem UI-Element interagieren, damit die Methode aufgerufen werden kann.

• HTMLMediaElement.setSinkId() setzt eine erlaubte ID als Audio-Ausgabe:

  • Der Zugang kann durch die speaker-selection HTTP Berechtigungsrichtlinie beschränkt sein.
  • Eine Erlaubnis des Nutzers ist erforderlich, um eine nicht standardmäßige Geräte-ID zu setzen.
    • Diese Erlaubnis kann durch die Auswahl im von MediaDevices.selectAudioOutput() gestarteten Dialog gewährt werden.
    • Die Nutzererlaubnis, das Ausgabegerät zu setzen, wird implizit gewährt, wenn der Nutzer bereits die Erlaubnis für die Verwendung eines Medien-Eingabegeräts in derselben Gruppe mit MediaDevices.getUserMedia() erteilt hat.

Hier ist ein Beispiel für die Verwendung von selectAudioOutput(), innerhalb einer Funktion, die durch einen Button-Klick ausgelöst wird, und anschließendem Setzen des ausgewählten Geräts als Audio-Ausgabe.

Der Code überprüft zunächst, ob selectAudioOutput() unterstützt wird, und nutzt es dann, um ein Ausgabegerät auszuwählen und eine Geräte-ID zurückzugeben. Dann spielen wir Audio über das Standardausgabegerät ab und rufen setSinkId() auf, um auf das ausgewählte Ausgabegerät umzuschalten.

document.querySelector("#myButton").addEventListener("click", async () => {
  if (!navigator.mediaDevices.selectAudioOutput) {
    console.log("selectAudioOutput() not supported or not in secure context.");
    return;
  }

  // Display prompt to select device
  const audioDevice = await navigator.mediaDevices.selectAudioOutput();

  // Create an audio element and start playing audio on the default device
  const audio = document.createElement("audio");
  audio.src = "https://example.com/audio.mp3";
  audio.play();

  // Change the sink to the selected audio output device.
  audio.setSinkId(audioDevice.deviceId);
});

Beachten Sie, dass bei der Ausgabe-Details protokolliert werden könnten, die ähnlich wie folgt aussehen:

console.log(
  `${audioDevice.kind}: ${audioDevice.label} id = ${audioDevice.deviceId}`,
);
// audiooutput: Realtek Digital Output (Realtek(R) Audio) id = 0wE6fURSZ20H0N2NbxqgowQJLWbwo+5ablCVVJwRM3k=