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

Furkan
François Beaufort

Şu ana kadar hedef ses çıkış cihazı, HTMLMediaElement.setSinkId() aracılığıyla yalnızca <video> ve <audio> için ayarlanıyordu. Web Audio'da AudioContext varsayılan cihazı kullandı ve kullanıcının sistem ses çıkış cihazını manuel olarak değiştirmesine izin verdi.

Chrome 110'da, Web Audio'daki ses çıkışını izin verilen herhangi bir cihaza programlı bir şekilde yönlendirmek için AudioContext.setSinkId() özelliğini kullanabilirsiniz.

Bu, özellikle çeşitli gerçek zamanlı iletişim senaryolarında yararlı olur. Örneğin, bir web uygulaması bunu, çıkışı programatik olarak Bluetooth mikrofonlu 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() içeren kullanılabilir medya cihazlarının listesini alın, yalnızca ses çıkış cihazlarına göre filtreleyin ve istediğ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ı öğrendikten sonra bir AudioContext oluşturup audioContext.setSinkId(deviceId) numarasını arayın. Başarılı olduğunda döndürülen söz, ses seçilen bağlı çıkış cihazına yönlendirildiğinde çözümlenir. AudioBağlam kapatılırsa işlem başarısız olabilir.

Aşağıdaki örnekte, gerekirse mikrofon erişimi isteğinde nasıl bulunulacağı ve Web Audio'daki ses çıkışının kullanılabilir ilk çıkış cihazına nasıl yönlendirileceği 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 });

Ses kapalı bir AudioBağlam ile ses oluştur

Güç tüketimini en aza indirmek için artık Web Audio'da bir "sessiz çıkış cihazı" belirtebilirsiniz. Bu kez, dize değeri yerine { type: "none" } öğesini AudioContext.setSinkId() öğesine iletin.

audioContext.currentTime üzerinden erişilebilen sesli saatin, ses grafiğini oluşturmak için ilerlemeye devam edeceğini unutmayın. Bu sessiz AudioBağlam'ın ana hedefi, ses grafiğini sesli 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() hizmetinin desteklenip desteklenmediğini kontrol etmek için şunu kullanın:

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

Örnek

AudioContext.setSinkId() ile oynayabileceğiniz bir demoyu https://sinkid.glitch.me/ adresinde bulabilirsiniz.

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ını yorumlayarak veya yeni sorun bildiriminde bulunarak geri bildirimde bulunun.

Teşekkür

Bu makaleyi inceledikleri için Hongchan Choi ve Michael Wilson'a teşekkür ederiz.

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