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

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

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

ज़रूरी जानकारी पाने का तरीका जानें, ताकि हम समस्या को समझ सकें और उसे ठीक कर सकें.

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

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

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

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

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

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

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

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

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

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

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

1. अपने ऐप्लिकेशन (वेब पेज) को किसी टैब पर खोलें.
2. कोई दूसरा टैब खोलें और about://tracing पर जाएं.
3. रिकॉर्ड करें बटन दबाएं और सेटिंग मैन्युअल तरीके से चुनें को चुनें.
4. रिकॉर्ड की गई कैटगरी और डिफ़ॉल्ट रूप से बंद की गई कैटगरी, दोनों सेक्शन में मौजूद कोई नहीं बटन दबाएं.
5. रिकॉर्ड की गई कैटगरी सेक्शन में जाकर, यह चुनें:
   • audio
   • blink_gc
   • media
   • v8.execute (if you're interested in AudioWorklet JS code performance)
   • 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 issue #796330) में, एक सामान्य उदाहरण दिखाया गया है. इसमें बताया गया है कि AudioWorkletProcessor में मौजूद कोड को पूरा होने में बहुत ज़्यादा समय लगता है और यह रेंडर बजट से ज़्यादा हो जाता है. कॉलबैक का समय सही है, लेकिन Web Audio API के ऑडियो प्रोसेसिंग फ़ंक्शन कॉल को अगले डिवाइस कॉलबैक से पहले काम पूरा करने में समस्या आ रही है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

कॉन्टेक्स्ट चुनने वाला टूल

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

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

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

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

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

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

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

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

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

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

WebAudio का लेगसी DevTools पैनल

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

नतीजा

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