Chrome में वेब ऑडियो ऐप्लिकेशन की प्रोफ़ाइल बनाना

about://tracing और Audion (Chrome DevTools में WebAudio एक्सटेंशन) का इस्तेमाल करके, Chrome में वेब ऑडियो ऐप्लिकेशन की परफ़ॉर्मेंस की प्रोफ़ाइल बनाने का तरीका जानें.

ऐसा हो सकता है कि आपने यह लेख इसलिए पढ़ा है, क्योंकि आपने ऐसा ऐप्लिकेशन डेवलप किया है जो Web Audio API का इस्तेमाल करता है. साथ ही, आपको आउटपुट से पॉपिंग आवाज़ें या कोई अनचाहा आवाज़ सुनाई दे रही है. हो सकता है कि आप पहले से ही crbug.com पर किसी चर्चा में शामिल हों और Chrome इंजीनियर ने आपसे "ट्रैकिंग डेटा" अपलोड करने या ग्राफ़ विज़ुअलाइज़ेशन को देखने के लिए कहा हो. इस लेख में, काम की जानकारी पाने का तरीका बताया गया है, ताकि हम किसी समस्या को समझ सकें और उसे ठीक कर सकें.

Web Audio की प्रोफ़ाइलिंग करने वाले टूल

Chrome DevTools में वेब ऑडियो, about://tracing, और WebAudio एक्सटेंशन की प्रोफ़ाइल बनाने के लिए, दो टूल आपकी मदद करेंगे.

about://tracing का इस्तेमाल कब किया जाता है?

जब अचानक "गड़बड़ियां" होती हैं. ट्रैकिंग टूल की मदद से ऐप्लिकेशन की प्रोफ़ाइल बनाने पर, आपको इनके बारे में अहम जानकारी मिलती है:

• अलग-अलग थ्रेड पर, किसी खास फ़ंक्शन कॉल में बिताया गया समय
• टाइमलाइन व्यू में ऑडियो कॉलबैक की समयावधि

आम तौर पर, यह ऑडियो कॉलबैक की तय समयसीमा खत्म होने या ग़ैर-ज़रूरी डेटा इकट्ठा होने की जानकारी दिखाता है. इससे ऑडियो में अचानक गड़बड़ियां हो सकती हैं. यह जानकारी, किसी समस्या को समझने के लिए मददगार होती है. इसलिए, Chromium के इंजीनियर अक्सर यह जानकारी मांगते हैं. खास तौर पर, जब समस्या को स्थानीय तौर पर दोहराना मुमकिन न हो. ट्रैकिंग के सामान्य निर्देश यहां दिए गए हैं.

वेब ऑडियो DevTools एक्सटेंशन का इस्तेमाल कब किया जाता है?

जब आपको ऑडियो ग्राफ़ को विज़ुअलाइज़ करना हो और यह मॉनिटर करना हो कि ऑडियो रेंडरर रीयल टाइम में कैसा परफ़ॉर्म करता है. ऑडियो ग्राफ़, AudioNode ऑब्जेक्ट का नेटवर्क होता है. इसका इस्तेमाल, ऑडियो स्ट्रीम जनरेट करने और सिंथेसाइज़ करने के लिए किया जाता है. यह अक्सर जटिल हो जाता है, लेकिन डिज़ाइन के हिसाब से ग्राफ़ की टॉपोलॉजी साफ़ नहीं होती. (Web Audio API में नोड/ग्राफ़ के बारे में जानकारी पाने की सुविधाएं नहीं हैं.) आपके ग्राफ़ में कुछ बदलाव होते हैं और अब आपको कुछ सुनाई नहीं देता. इसके बाद, ऑडियो सुनकर गड़बड़ी का पता लगाएं. यह कभी भी आसान नहीं होता. अगर आपके पास बड़ा ऑडियो ग्राफ़ है, तो यह और भी मुश्किल हो जाता है. ग्राफ़ को विज़ुअलाइज़ करके, Web Audio DevTools एक्सटेंशन आपकी मदद कर सकता है.

इस एक्सटेंशन की मदद से, रेंडर करने की क्षमता के अनुमान पर नज़र रखी जा सकती है. इससे पता चलता है कि किसी तय रेंडर बजट (उदाहरण के लिए, 48 केएचज़ पर करीब 2.67 मिलीसेकंड) के हिसाब से, वेब ऑडियो रेंडरर की परफ़ॉर्मेंस कैसी है. अगर क्षमता 100 प्रतिशत के करीब पहुंच जाती है, तो इसका मतलब है कि आपके ऐप्लिकेशन में गड़बड़ियां हो सकती हैं. ऐसा इसलिए होता है, क्योंकि रेंडरर तय बजट में काम पूरा नहीं कर पा रहा है.

about://tracing का इस्तेमाल करें

ट्रैकिंग डेटा कैप्चर करने का तरीका

यहां दिए गए निर्देश, Chrome 80 और उसके बाद के वर्शन के लिए हैं.

बेहतर नतीजे पाने के लिए, अन्य सभी टैब और विंडो बंद करें. साथ ही, एक्सटेंशन बंद करें. इसके अलावा, Chrome का नया इंस्टेंस लॉन्च किया जा सकता है या अलग-अलग रिलीज़ चैनलों (जैसे, बीटा या कैनरी) के अन्य बिल्ड का इस्तेमाल किया जा सकता है. ब्राउज़र तैयार होने के बाद, यह तरीका अपनाएं:

1. अपना ऐप्लिकेशन (वेब पेज) किसी टैब में खोलें.
2. कोई दूसरा टैब खोलें और about://tracing पर जाएं.
3. रिकॉर्ड करें बटन दबाएं और मैन्युअल तरीके से सेटिंग चुनें को चुनें.
4. रिकॉर्डिंग की कैटगरी और डिफ़ॉल्ट रूप से बंद कैटगरी, दोनों सेक्शन में कोई नहीं बटन दबाएं.
5. रिकॉर्ड की कैटगरी सेक्शन में, ये विकल्प चुनें:
   • audio
   • blink_gc
   • media
   • v8.execute (अगर आपको AudioWorklet JS कोड की परफ़ॉर्मेंस में दिलचस्पी है)
   • webaudio
6. डिफ़ॉल्ट रूप से बंद कैटगरी सेक्शन में, ये चुनें:
   • audio-worklet (अगर आपको यह जानना है कि AudioWorklet थ्रेड कहां से शुरू होती है)
   • webaudio.audionode (अगर आपको हर AudioNode के लिए ज़्यादा जानकारी वाला ट्रैक चाहिए)
7. सबसे नीचे मौजूद, रिकॉर्ड करें बटन को दबाएं.
8. अपने ऐप्लिकेशन टैब पर वापस जाएं और वे चरण दोहराएं जिनकी वजह से समस्या हुई थी.
9. जब आपके पास ट्रैक करने के लिए ज़रूरत के मुताबिक डेटा हो जाए, तो ट्रैकिंग टैब पर वापस जाएं और रोकें दबाएं.

10. ट्रैकिंग टैब में नतीजा दिखेगा.

    

11. ट्रैकिंग डेटा सेव करने के लिए, सेव करें दबाएं.

ट्रैकिंग डेटा का विश्लेषण करने का तरीका

ट्रैकिंग डेटा से पता चलता है कि Chrome का वेब ऑडियो इंजन, ऑडियो को कैसे रेंडर करता है. रेंडरर के दो अलग-अलग रेंडर मोड होते हैं: ऑपरेटिंग सिस्टम मोड और वर्कलेट मोड. हर मोड, अलग-अलग थ्रेडिंग मॉडल का इस्तेमाल करता है. इसलिए, ट्रैकिंग के नतीजे भी अलग-अलग होते हैं.

ऑपरेटिंग सिस्टम मोड

ऑपरेटिंग सिस्टम मोड में, AudioOutputDevice थ्रेड, वेब ऑडियो का सारा कोड चलाती है. AudioOutputDevice, रीयल-टाइम प्राथमिकता वाली एक थ्रेड है. यह ब्राउज़र की ऑडियो सेवा से शुरू होती है और ऑडियो हार्डवेयर घड़ी से चलती है. अगर आपको इस लेन में ट्रेस डेटा में कोई गड़बड़ी दिखती है, तो इसका मतलब है कि डिवाइस से कॉलबैक करने का समय अनियमित हो सकता है. Linux और Pulse Audio के कॉम्बिनेशन में यह समस्या आती है. ज़्यादा जानकारी के लिए, Chromium से जुड़ी ये समस्याएं देखें: #825823, #864463.

वर्कलेट मोड

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

दोनों ही मामलों में, आदर्श ट्रैकिंग डेटा की पहचान, ऑडियो डिवाइस के कॉलबैक को अच्छी तरह से अलाइन करने और रेंडर करने के टास्क को दिए गए रेंडर बजट में पूरा करने से होती है. ऊपर दिए गए दो स्क्रीनशॉट, ट्रैकिंग डेटा के सही उदाहरण हैं.

असल दुनिया के उदाहरणों से सीखना

पहला उदाहरण: रेंडर बजट से ज़्यादा रेंडर टास्क

यहां दिया गया स्क्रीनशॉट (Chromium की समस्या #796330), AudioWorkletProcessor में मौजूद कोड के बहुत ज़्यादा समय लेने और रेंडर के लिए तय बजट से ज़्यादा समय लेने का एक सामान्य उदाहरण है. कॉलबैक का समय सही है, लेकिन Web Audio API के ऑडियो प्रोसेसिंग फ़ंक्शन कॉल ने अगले डिवाइस कॉलबैक से पहले काम पूरा नहीं किया.

आपके पास ये विकल्प हैं:

• AudioNode इंस्टेंस का इस्तेमाल करके, ऑडियो ग्राफ़ के वर्कलोड को कम करें.
• AudioWorkletProcessor में अपने कोड का वर्कलोड कम करें.
• AudioContext के बेस इंतज़ार का समय बढ़ाएं.

दूसरा उदाहरण: वर्कलेट थ्रेड पर ज़्यादा ग़ैर-ज़रूरी डेटा हटाना

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

आपके पास ये विकल्प हैं:

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

तीसरा उदाहरण: AudioOutputDevice से ऑडियो डिवाइस का कॉलबैक, जिसमें रुकावट आ रही है

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

आपके पास ये विकल्प हैं:

• latencyHint विकल्प में बदलाव करके, सिस्टम ऑडियो कॉलबैक बफ़र का साइज़ बढ़ाएं.
• अगर आपको कोई समस्या मिलती है, तो ट्रैकिंग डेटा के साथ crbug.com पर समस्या दर्ज करें.

Web Audio DevTools एक्सटेंशन का इस्तेमाल करना

आपके पास Web Audio API के लिए खास तौर पर बनाए गए DevTools एक्सटेंशन का इस्तेमाल करने का विकल्प भी है. ट्रैकिंग टूल के उलट, यह ग्राफ़ और परफ़ॉर्मेंस मेट्रिक की रीयल टाइम जांच करता है.

इस एक्सटेंशन को Chrome वेब स्टोर से इंस्टॉल करना होगा.

इंस्टॉलेशन के बाद, Chrome DevTools खोलकर और सबसे ऊपर मौजूद मेन्यू में “Web Audio” पर क्लिक करके, पैनल को ऐक्सेस किया जा सकता है.

वेब ऑडियो पैनल में चार कॉम्पोनेंट होते हैं: कॉन्टेक्स्ट सिलेक्टर, प्रॉपर्टी इंस्पेक्टर, ग्राफ़ विज़ुअलाइज़र, और परफ़ॉर्मेंस मॉनिटर.

कॉन्टेक्स्ट सिलेक्टर

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

प्रॉपर्टी इंस्पेक्टर

साइड पैनल, उपयोगकर्ता के चुने गए कॉन्टेक्स्ट या AudioNode की अलग-अलग प्रॉपर्टी दिखाता है. AudioParam में डाइनैमिक वैल्यू की जांच नहीं की जा सकती.

ग्राफ़ विज़ुअलाइज़र

यह व्यू, उपयोगकर्ता के चुने गए कॉन्टेक्स्ट की मौजूदा ग्राफ़ टोपोलॉजी को रेंडर करता है. यह विज़ुअलाइज़ेशन, रीयल टाइम में डाइनैमिक तौर पर बदलता रहता है. विज़ुअलाइज़ेशन में किसी एलिमेंट पर क्लिक करके, प्रॉपर्टी इंस्पेक्टर में ज़्यादा जानकारी देखी जा सकती है.

परफ़ॉर्मेंस मॉनिटर

सबसे नीचे मौजूद स्टेटस बार सिर्फ़ तब चालू होता है, जब चुना गया BaseAudioContext AudioContext हो, जो रीयल-टाइम में चलता हो. यह बार, चुने गए AudioContext की ऑडियो स्ट्रीम की क्वालिटी को तुरंत दिखाता है. यह हर सेकंड अपडेट होता रहता है. इसमें यह जानकारी मिलती है:

• कॉलबैक इंटरवल (मिलीसेकंड): कॉलबैक इंटरवल का वेटेड मीन/वैरिएंस दिखाता है. आम तौर पर, मीन एक जैसा रहना चाहिए और वैरिएंस शून्य के करीब होना चाहिए. अगर आपको काफ़ी अंतर दिखता है, तो इसका मतलब है कि सिस्टम-लेवल के ऑडियो कॉलबैक फ़ंक्शन की टाइमिंग अस्थिर है. इसकी वजह से, ऑडियो स्ट्रीम की क्वालिटी खराब हो सकती है. (ऊपर दिया गया तीसरा उदाहरण देखें.)

• रेंडर करने की क्षमता (प्रतिशत): जब क्षमता 100 प्रतिशत के करीब हो जाती है, तो इसका मतलब है कि रेंडर करने के लिए तय किए गए बजट के हिसाब से रेंडरर बहुत ज़्यादा काम कर रहा है.इसलिए, आपको कम काम करने पर विचार करना चाहिए. उदाहरण के लिए, ग्राफ़ में AudioNodes ऑब्जेक्ट का कम इस्तेमाल करना.

ट्रैश कैन आइकॉन पर क्लिक करके, कचरा इकट्ठा करने वाले रोबोट को मैन्युअल तरीके से ट्रिगर किया जा सकता है.

लेगसी WebAudio DevTools पैनल

Chrome Web Audio की टीम अब एक्सटेंशन का सुझाव देती है. हालांकि, लेगसी WebAudio DevTools पैनल भी उपलब्ध है. इस पैनल को ऐक्सेस करने के लिए, DevTools के सबसे ऊपर दाएं कोने में मौजूद "तीन बिंदु" मेन्यू पर क्लिक करें. इसके बाद, ज़्यादा टूल पर जाएं और फिर WebAudio पर जाएं.

नतीजा

ऑडियो को डीबग करना मुश्किल है. ब्राउज़र में ऑडियो को डीबग करना और भी मुश्किल है. हालांकि, ये टूल आपको वेब ऑडियो कोड के परफ़ॉर्मेंस के बारे में अहम जानकारी देकर, इस समस्या को हल करने में मदद कर सकते हैं. हालांकि, कुछ मामलों में आपको Chrome या एक्सटेंशन में समस्याएं आ सकती हैं. अगर आपको कोई समस्या मिलती है, तो crbug.com पर गड़बड़ी की शिकायत करें या एक्सटेंशन की समस्या ट्रैकर पर शिकायत करें.

Unsplash पर मौजूद, जोनाथन वेलास्केज़ की फ़ोटो