वेब ऑडियो में डेस्टिनेशन आउटपुट डिवाइस बदलना

François Beaufort
François Beaufort

अब तक, डेस्टिनेशन ऑडियो आउटपुट डिवाइस को सिर्फ़ HTMLMediaElement.setSinkId() के साथ <video> और <audio> के लिए सेट किया जा सकता था. वेब ऑडियो में, AudioContext डिफ़ॉल्ट डिवाइस का इस्तेमाल करता है. इससे उपयोगकर्ता को सिस्टम के ऑडियो आउटपुट डिवाइस को मैन्युअल तरीके से बदलना पड़ता है.

Chrome 110 में, AudioContext.setSinkId() का इस्तेमाल करके, वेब ऑडियो में ऑडियो आउटपुट को प्रोग्राम के हिसाब से, अनुमति वाले किसी भी डिवाइस पर भेजा जा सकता है.

यह सुविधा, रीयल-टाइम में होने वाले अलग-अलग तरह के बातचीत के मामलों में खास तौर पर मददगार होती है. उदाहरण के लिए, कोई वेब ऐप्लिकेशन इसका इस्तेमाल करके, प्रोग्राम के हिसाब से आउटपुट को किसी खास ऑडियो आउटपुट डिवाइस पर भेज सकता है. जैसे, ब्लूटूथ हेडसेट या स्पीकरफ़ोन.

ऑडियो आउटपुट को किसी डिवाइस पर भेजना

सबसे पहले, आपको उस ऑडियो आउटपुट डिवाइस का आइडेंटिफ़ायर चाहिए जिसे आपको डेस्टिनेशन के तौर पर इस्तेमाल करना है. navigator.mediaDevices.enumerateDevices() की मदद से, उपलब्ध मीडिया डिवाइसों की सूची पाएं. इसके बाद, सिर्फ़ ऑडियो आउटपुट डिवाइसों को फ़िल्टर करें और अपनी पसंद के ऑडियो आउटपुट डिवाइस का deviceId एट्रिब्यूट पाएं. खाली स्ट्रिंग "" वैल्यू का इस्तेमाल, deviceId के लिए डिफ़ॉल्ट डिवाइस के तौर पर भी किया जा सकता है.

ऑडियो आउटपुट डिवाइस का आइडेंटिफ़ायर मिलने के बाद, AudioContext बनाएं और audioContext.setSinkId(deviceId) को कॉल करें. ऑडियो को चुने गए कनेक्ट किए गए आउटपुट डिवाइस पर भेजने के बाद, रिटर्न किया गया प्रॉमिस रिज़ॉल्व हो जाता है. अगर AudioContext बंद है, तो यह काम नहीं करेगा.

नीचे दिए गए उदाहरण में, ज़रूरत पड़ने पर माइक्रोफ़ोन के ऐक्सेस का अनुरोध करने और Web Audio में ऑडियो आउटपुट को पहले उपलब्ध आउटपुट डिवाइस पर भेजने का तरीका बताया गया है.

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 बनाते समय, deviceId को sinkId पैरामीटर के तौर पर भी पास किया जा सकता है.

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

म्यूट किए गए AudioContext के साथ ऑडियो रेंडर करना

अब Web Audio में, बैटरी खपत को कम करने के लिए, "साइलेंट आउटपुट डिवाइस" तय किया जा सकता है. इस बार, स्ट्रिंग वैल्यू के बजाय, { type: "none" } को AudioContext.setSinkId() पर पास करें.

ध्यान दें कि audioContext.currentTime की मदद से ऐक्सेस की जा सकने वाली ऑडियो घड़ी, ऑडियो ग्राफ़ को रेंडर करने के लिए अब भी आगे बढ़ेगी. म्यूट किए गए इस AudioContext का मुख्य मकसद, ऑडियो ग्राफ़ को बिना आवाज़ के रेंडर करना है. इस्तेमाल का मुख्य उदाहरण, आवाज़ किए बिना माइक्रोफ़ोन इनपुट का विश्लेषण करना होगा.

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

फ़ीचर का पता लगाना

यह देखने के लिए कि AudioContext.setSinkId() काम करता है या नहीं, इनका इस्तेमाल करें:

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

नमूना

AudioContext.setSinkId() के साथ खेलने के लिए, https://sinkid.glitch.me/ पर एक डेमो उपलब्ध है.

ब्राउज़र समर्थन

AudioContext.setSinkId(), Chrome 110 या इसके बाद के वर्शन में उपलब्ध है.

सुझाव/राय दें या शिकायत करें

Chrome की टीम और वेब स्टैंडर्ड कम्यूनिटी को AudioContext.setSinkId() के साथ आपके अनुभवों के बारे में जानना है. कृपया मौजूदा GitHub समस्याओं पर टिप्पणी करके या नई समस्याएं दर्ज करके सुझाव/राय दें या शिकायत करें.

आभार

इस लेख की समीक्षा करने के लिए, हॉन्गचैन चोई और माइकल विल्सन को धन्यवाद.

Unsplash पर स्टीव हार्वे की कैलेंडर इमेज.