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

François Beaufort
François Beaufort

Ş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 belirli bir ses çıkışı cihazına (ör. Bluetooth kulaklık veya hoparlörlü telefon) 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şimini nasıl isteyeceğiniz ve Web Audio'daki ses çıkışını ilk kullanılabilir çıkış cihazına nasıl yönlendireceğiniz 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 AudioContext.setSinkId()'ye { type: "none" } değerini 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.

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