Web Audio'da hedef çıkış cihazını değiştir

François Beaufort
François Beaufort
GitHub

Şimdiye kadar hedef ses çıkışı cihazını ayarlamak yalnızca HTMLMediaElement.setSinkId() ile <video> ve <audio> için mümkündü. Web Audio'da AudioContext, varsayılan cihazı kullanıyordu ve kullanıcının sistem ses çıkışı cihazını manuel olarak değiştirmesi gerekiyordu.

Chrome 110'dan itibaren, Web Audio'daki ses çıkışını programatik olarak izin verilen herhangi bir cihaza yönlendirmek için AudioContext.setSinkId() kullanabilirsiniz.

Bu özellik, özellikle çeşitli anlık iletişim senaryolarında yararlıdır. Örneğin, bir web uygulaması bunu, çıkışı programatik olarak Bluetooth kulaklık veya hoparlör gibi belirli bir ses çıkışı cihazına yönlendirmek için kullanabilir.

Ses çıkışını belirli bir cihaza yönlendirme

Öncelikle hedef olarak kullanmak istediğiniz ses çıkışı cihazının tanımlayıcısına ihtiyacınız vardır. navigator.mediaDevices.enumerateDevices() ile kullanılabilir medya cihazlarının listesini alın, yalnızca ses çıkış cihazlarını filtreleyin ve seçtiğiniz ses çıkış cihazının deviceId özelliğini alın. Boş dize "" değeri, deviceId için varsayılan cihaz olarak da kullanılabilir.

Ses çıkışı cihazının tanımlayıcısını aldıktan sonra AudioContext oluşturun ve audioContext.setSinkId(deviceId) işlevini çağırın. İşlem başarılı olduğunda, döndürülen söz, ses seçilen bağlı çıkış cihazına yönlendirildiğinde çözümlenir. AudioContext kapatılırsa başarısız olabilir.

Aşağıdaki örnekte, gerekirse mikrofon erişimi isteğinde bulunma ve Web Audio'daki ses çıkışını ilk kullanılabilir çıkış cihazına yönlendirme işlemleri gösterilmektedir.

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

AudioContext oluştururken deviceId öğesini sinkId parametresi olarak da iletebileceğinizi unutmayın.

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

Sesi kapatılmış bir AudioContext ile ses oluşturma

Artık güç tüketimini en aza indirmek için Web Audio'da "sessiz çıkış cihazı" belirtebilirsiniz. Bu kez, dize değeri yerine { type: "none" } değerini AudioContext.setSinkId() parametresine iletin.

audioContext.currentTime üzerinden erişilebilen ses saatinin, ses grafiğini oluşturmak için ilerlemeye devam edeceğini unutmayın. Bu sessiz AudioContext'in temel amacı, ses grafiğini duyulabilir ses üretmeden oluşturmaktır. Birincil kullanım alanı, ses çıkarmadan mikrofon girişini analiz etmektir.

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

Özellik algılama

AudioContext.setSinkId() öğesinin desteklenip desteklenmediğini kontrol etmek için:

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

Örnek

AudioContext.setSinkId() ile denemeler yapabileceğiniz bir demo https://codepen.io/web-dot-dev/pen/emNwEaN/ adresinde mevcuttur.

Tarayıcı desteği

AudioContext.setSinkId(), Chrome 110 veya sonraki sürümlerde kullanılabilir.

Geri bildirim

Chrome ekibi ve web standartları topluluğu, AudioContext.setSinkId() ile ilgili deneyimlerinizi öğrenmek istiyor. Lütfen mevcut GitHub sorunlarına yorum yaparak veya yeni sorunlar bildirerek geri bildirimde bulunun.

Teşekkür

Bu makaleyi inceleyen Hongchan Choi ve Michael Wilson'a teşekkür ederiz.