अब तक, ऑडियो आउटपुट के लिए डेस्टिनेशन डिवाइस को सिर्फ़ <video> और <audio> के साथ HTMLMediaElement.setSinkId() पर सेट किया जा सकता था. Web Audio में, AudioContext डिफ़ॉल्ट डिवाइस का इस्तेमाल करता था. इसलिए, उपयोगकर्ता को सिस्टम ऑडियो आउटपुट डिवाइस को मैन्युअल तरीके से बदलना पड़ता था.
Chrome 110 से, AudioContext.setSinkId() का इस्तेमाल करके, Web Audio में ऑडियो आउटपुट को प्रोग्राम के हिसाब से किसी भी ऐसे डिवाइस पर भेजा जा सकता है जिस पर अनुमति मिली हो.
यह खास तौर पर, रीयल-टाइम में कम्यूनिकेशन से जुड़े कई मामलों में मददगार होता है. उदाहरण के लिए, कोई वेब ऐप्लिकेशन इस सुविधा का इस्तेमाल करके, प्रोग्राम के हिसाब से आउटपुट को किसी खास ऑडियो आउटपुट डिवाइस पर भेज सकता है. जैसे, ब्लूटूथ हेडसेट या स्पीकरफ़ोन.
ऑडियो आउटपुट को किसी डिवाइस पर रूट करना
सबसे पहले, आपको उस ऑडियो आउटपुट डिवाइस का आइडेंटिफ़ायर चाहिए जिसे आपको डेस्टिनेशन के तौर पर इस्तेमाल करना है. 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://codepen.io/web-dot-dev/pen/emNwEaN/ पर उपलब्ध है.
ब्राउज़र समर्थन
AudioContext.setSinkId() Chrome 110 या उसके बाद के वर्शन में उपलब्ध है.
सुझाव/राय दें या शिकायत करें
Chrome टीम और वेब स्टैंडर्ड कम्यूनिटी, AudioContext.setSinkId() के बारे में आपके अनुभव जानना चाहती है. कृपया मौजूदा GitHub समस्याओं पर टिप्पणी करके या नई समस्याएं सबमिट करके सुझाव/राय दें या शिकायत करें.
काम के लिंक
Acknowledgements
इस लेख की समीक्षा करने के लिए, Hongchan Choi और Michael Wilson का धन्यवाद.
कैलेंडर की इमेज वाली फ़ोटो, Unsplash पर Steve Harvey ने क्लिक की है.