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

फ्रांकोइस ब्यूफ़ोर्ट
फ्रांकोइस ब्यूफ़ोर्ट
GitHub

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

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

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

ऑडियो आउटपुट को किसी खास डिवाइस पर रूट करें

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

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

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

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 में "साइलेंट आउटपुट डिवाइस" तय किया जा सकता है. इस बार, किसी स्ट्रिंग वैल्यू के बजाय, AudioContext.setSinkId() को { type: "none" } पास करें.

ध्यान दें कि 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 पर स्टीव हार्वे की कैलेंडर इमेज.