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

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

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

वेब ऑडियो प्रोफ़ाइलिंग टूल

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

आप about://tracing का इस्तेमाल कब करते हैं?

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

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

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

Web Audio DevTools एक्सटेंशन का इस्तेमाल कब किया जाता है?

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

इस एक्सटेंशन की मदद से, रेंडर करने की क्षमता के मौजूदा अनुमान पर नज़र रखी जा सकती है.इससे पता चलता है कि वेब ऑडियो रेंडरर, दिए गए रेंडर बजट में कैसा परफ़ॉर्म कर रहा है. उदाहरण के लिए, करीब 2.67 मि॰से॰ @ 48 किलोहर्ट्ज़ का. अगर क्षमता 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 और पल्स ऑडियो के कॉम्बिनेशन में यह समस्या है. ज़्यादा जानकारी के लिए, Chromium की ये समस्याएं देखें: #825823, #864463.

वर्कलेट मोड

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

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

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

पहला उदाहरण: रेंडर बजट के अलावा, दूसरे कामों के टास्क रेंडर करना

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

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

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

दूसरा उदाहरण: वर्कलेट थ्रेड पर ज़्यादा कचरा इकट्ठा करने की सुविधा

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

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

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

तीसरा उदाहरण: AudioOutputDevice से मिले ऑडियो डिवाइस के कॉलबैक में गड़बड़ी

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

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

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

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

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

इस एक्सटेंशन को Chrome Web Store से इंस्टॉल करना ज़रूरी है.

इंस्टॉल करने के बाद, Chrome DevTools को खोलकर पैनल को ऐक्सेस किया जा सकता है. इसके बाद, सबसे ऊपर मौजूद मेन्यू में मौजूद "वेब ऑडियो" पर क्लिक किया जा सकता है.

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

संदर्भ चुनने वाला टूल

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

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

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

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

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

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

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

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

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

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

लेगसी WebAudio DevTools पैनल

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

नतीजा

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

Unsplash पर जोनाथन बेलासकेस की फ़ोटो