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

François Beaufort
François Beaufort

Hedef ses çıkış cihazını ayarlamak şimdiye kadar yalnızca HTMLMediaElement.setSinkId() ile <video> ve <audio> için mümkündü. Web Audio'da AudioContext varsayılan cihazı kullandığından 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ı izin verilen herhangi bir cihaza programatik olarak yönlendirmek için AudioContext.setSinkId() kullanabilirsiniz.

Bu özellik özellikle çeşitli gerçek zamanlı iletişim senaryolarında yararlıdır. Örneğin, bir web uygulaması çıkışı Bluetooth kulaklık veya hoparlör gibi belirli bir ses çıkış cihazına programlı olarak yönlendirmek için bu özelliği 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 bir AudioContext oluşturun ve audioContext.setSinkId(deviceId) işlevini çağırın. İşlem başarılı olursa ses, seçilen bağlı çıkış cihazına yönlendirildiğinde döndürülen söz çözülür. AudioContext kapalıysa başarısız olabilir.

Aşağıdaki örnekte, gerekirse mikrofon erişimi isteğinde bulunma ve Web Audio'daki ses çıkışını kullanılabilir ilk çı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 parametresini sinkId parametresi olarak da iletebileceğinizi unutmayın.

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

Sesleri sessiz bir AudioContext ile 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()'e 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 asıl amacı, ses grafiğini 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() değerinin desteklenip desteklenmediğini kontrol etmek için:

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

Örnek

AudioContext.setSinkId() ile oynamak için https://sinkid.glitch.me/ adresindeki denemeyi kullanabilirsiniz.

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 sorunlara yorum yaparak veya yeni GitHub sorunları bildirerek geri bildirimde bulunun.

Teşekkür ederiz

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

Steve Harvey'nin Unsplash'taki takvim resmi fotoğrafı.