Zmień docelowe urządzenie wyjściowe w Web Audio

François Beaufort
François Beaufort
GitHub

Do tej pory ustawienie docelowego urządzenia do odtwarzania dźwięku było możliwe tylko w przypadku <video> i <audio> z HTMLMediaElement.setSinkId(). W Web Audio komponent AudioContext używał domyślnego urządzenia, a użytkownik musiał ręcznie zmienić urządzenie wyjściowe systemu.

Od wersji 110 Chrome możesz użyć AudioContext.setSinkId(), aby programowo kierować wyjście dźwięku w Web Audio na dowolne dozwolone urządzenie.

Jest to szczególnie przydatne w różnych scenariuszach komunikacji w czasie rzeczywistym. Na przykład aplikacja internetowa może użyć tego polecenia, aby programowo kierować dane wyjściowe na określone urządzenie wyjściowe, takie jak zestaw słuchawkowy Bluetooth lub głośnik.

Przekierowywanie wyjścia audio na konkretne urządzenie

Najpierw musisz mieć identyfikator urządzenia wyjściowego audio, którego chcesz użyć jako miejsca docelowego. Pobierz listę dostępnych urządzeń multimedialnych za pomocą navigator.mediaDevices.enumerateDevices(), odfiltruj tylko urządzenia wyjściowe audio i pobierz atrybut deviceId wybranego urządzenia wyjściowego audio. Wartość pustego ciągu "" może też służyć jako domyślne urządzenie dla deviceId.

Gdy już masz identyfikator urządzenia wyjściowego audio, utwórz AudioContext i wywołaj audioContext.setSinkId(deviceId). W przypadku powodzenia zwrócona obietnica zostanie rozwiązana, gdy dźwięk zostanie przesłany na wybrane podłączone urządzenie wyjściowe. Może się nie udać, jeśli AudioContext jest zamknięty.

Przykład poniżej pokazuje, jak w razie potrzeby poprosić o dostęp do mikrofonu i przekierować wyjście audio w Web Audio na pierwsze dostępne urządzenie wyjściowe.

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

Podczas tworzenia AudioContext możesz też przekazać wartość deviceId jako parametr sinkId.

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

Renderowanie dźwięku z wyciszonym kontekstem audio

Aby zminimalizować zużycie energii, możesz teraz określić w Web Audio „urządzenie wyjściowe z wyciszeniem”. Tym razem zamiast wartości ciągu znaków prześlij parametr { type: "none" } do parametru AudioContext.setSinkId().

Pamiętaj, że zegar dostępny w sekcji audioContext.currentTime będzie nadal przesuwać się, aby renderować wykres audio. Głównym celem wyciszonego kontekstu audio jest renderowanie grafu audio bez generowania dźwięku. Głównym przypadkiem użycia jest analiza danych z mikrofonu bez wydawania dźwięków.

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

Wykrywanie cech

Aby sprawdzić, czy AudioContext.setSinkId() jest obsługiwane, użyj:

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

Przykład

Wersję demonstracyjną AudioContext.setSinkId() znajdziesz na stronie https://sinkid.glitch.me/.

Obsługa przeglądarek

AudioContext.setSinkId() jest dostępna w Chrome 110 lub nowszej.

Prześlij opinię

Zespół Chrome i społeczność zajmująca się standardami internetowymi chce poznać Twoje wrażenia związane z użyciem AudioContext.setSinkId(). Prześlij opinię, komentując istniejące problemy na GitHubie lub zgłaszając nowe.

Podziękowania

Dziękujemy Hongchan Choi i Michaelowi Wilsonowi za sprawdzenie tego artykułu.

Zdjęcie kalendarza autorstwa Steve Harvey z Unsplash.