Chrome-এ ওয়েব অডিও অ্যাপের প্রোফাইলিং

about://tracing এবং Audion (Chrome DevTools-এর একটি WebAudio এক্সটেনশন) ব্যবহার করে Chrome-এ Web Audio অ্যাপের পারফরম্যান্স প্রোফাইল করার পদ্ধতি জানুন।

আপনি সম্ভবত এই ডকুমেন্টটিতে এসেছেন কারণ আপনি এমন একটি অ্যাপ তৈরি করছেন যা ওয়েব অডিও এপিআই (Web Audio API) ব্যবহার করে এবং অপ্রত্যাশিত কোনো সমস্যার সম্মুখীন হয়েছেন, যেমন আউটপুট থেকে পপ-পপ শব্দ আসা, অথবা আপনি অপ্রত্যাশিত কিছু শুনছেন। হতে পারে আপনি ইতিমধ্যেই crbug.com-এর কোনো আলোচনায় যুক্ত আছেন এবং ক্রোমের কোনো ইঞ্জিনিয়ার আপনাকে 'ট্রেসিং ডেটা' আপলোড করতে বা গ্রাফ ভিজ্যুয়ালাইজেশনটি খতিয়ে দেখতে বলেছেন।

কীভাবে প্রাসঙ্গিক তথ্য সংগ্রহ করতে হয় তা শিখুন, যাতে আমরা সমস্যাটি বুঝতে পারি এবং অবশেষে মূল সমস্যাটি সমাধান করতে পারি।

ওয়েব অডিও প্রোফাইলিং টুলস

ওয়েব অডিও প্রোফাইলিং করার জন্য দুটি টুল রয়েছে যা আপনাকে সাহায্য করবে: about://tracing এবং Chrome DevTools-এর WebAudio এক্সটেনশন।

আপনি কখন about://tracing ব্যবহার করেন?

যখন রহস্যময় 'ত্রুটি' ঘটে। ট্রেসিং টুল দিয়ে অ্যাপটির প্রোফাইলিং করলে আপনি নিম্নলিখিত বিষয়গুলো সম্পর্কে ধারণা পাবেন:

• বিভিন্ন থ্রেডে নির্দিষ্ট ফাংশন কল দ্বারা ব্যয়িত সময় খণ্ড
• টাইমলাইন ভিউতে অডিও কলব্যাক টাইমিং

এটি সাধারণত অডিও কলব্যাকের ডেডলাইন মিস হওয়া বা বড় আকারের গার্বেজ কালেকশন দেখায়, যা অপ্রত্যাশিত অডিও ত্রুটির কারণ হতে পারে। এই তথ্যটি অন্তর্নিহিত সমস্যাটি বোঝার জন্য দরকারি, তাই ক্রোমিয়াম ইঞ্জিনিয়াররা প্রায়শই এটি জানতে চান, বিশেষ করে যখন স্থানীয়ভাবে সমস্যাটি পুনরায় তৈরি করা সম্ভব হয় না। ট্রেসিং-এর জন্য আমাদের সাধারণ নির্দেশাবলী পর্যালোচনা করুন।

আপনি কখন ওয়েব অডিও ডেভটুলস এক্সটেনশন ব্যবহার করেন?

যখন আপনি অডিও গ্রাফটি দেখতে চান এবং রিয়েল টাইমে অডিও রেন্ডারার কীভাবে কাজ করছে তা পর্যবেক্ষণ করতে চান। অডিও গ্রাফ, যা একটি অডিও স্ট্রিম তৈরি ও সংশ্লেষণ করার জন্য AudioNode অবজেক্টের একটি নেটওয়ার্ক, প্রায়শই জটিল হয়ে ওঠে, কিন্তু এর গ্রাফ টপোলজি নকশাগতভাবেই অস্বচ্ছ রাখা হয়। (Web Audio API-তে নোড/গ্রাফ ইন্ট্রোস্পেকশনের জন্য কোনো ফিচার নেই।) আপনার গ্রাফে কিছু পরিবর্তন ঘটলে আপনি এখন নীরবতা শুনতে পান। তখন শোনার মাধ্যমে ডিবাগ করার সময় আসে। এটি কখনোই সহজ নয়, এবং যখন আপনার অডিও গ্রাফটি বড় হয় তখন এটি আরও কঠিন হয়ে পড়ে। Web Audio DevTools এক্সটেনশনটি গ্রাফটি ভিজ্যুয়ালাইজ করার মাধ্যমে আপনাকে সাহায্য করতে পারে।

এই এক্সটেনশনটির মাধ্যমে, আপনি রেন্ডার ক্যাপাসিটির একটি চলমান আনুমানিক হিসাব নিরীক্ষণ করতে পারেন, যা নির্দেশ করে যে একটি নির্দিষ্ট রেন্ডার বাজেটের (যেমন, প্রায় ২.৬৭ms @ ৪৮KHz) মধ্যে ওয়েব অডিও রেন্ডারারটি কেমন পারফর্ম করছে। যদি ক্যাপাসিটি ১০০ শতাংশের কাছাকাছি চলে যায়, তার মানে হলো আপনার অ্যাপে গ্লিচ তৈরি হওয়ার সম্ভাবনা রয়েছে, কারণ রেন্ডারারটি প্রদত্ত বাজেটের মধ্যে কাজটি শেষ করতে ব্যর্থ হচ্ছে।

about://tracing ব্যবহার করুন

সর্বোত্তম ফলাফলের জন্য, অন্য সব ট্যাব ও উইন্ডো বন্ধ করুন এবং এক্সটেনশনগুলো নিষ্ক্রিয় করুন। বিকল্পভাবে, আপনি ক্রোমের একটি নতুন ইনস্ট্যান্স চালু করতে পারেন অথবা বিভিন্ন রিলিজ চ্যানেল (যেমন বিটা বা ক্যানারি) থেকে অন্যান্য বিল্ড ব্যবহার করতে পারেন। ব্রাউজারটি প্রস্তুত হয়ে গেলে:

1. আপনার অ্যাপ্লিকেশনটি (ওয়েব পেজটি) একটি ট্যাবে খুলুন।
2. অন্য একটি ট্যাব খুলুন এবং about://tracing -এ যান।
3. রেকর্ড বোতামটি চাপুন এবং ম্যানুয়ালি সেটিংস নির্বাচন করুন।
4. Record Categories এবং Disabled by Default Categories উভয় সেকশনেই None বাটনটি চাপুন।
5. রেকর্ড ক্যাটাগরি বিভাগে, নিম্নলিখিতগুলি নির্বাচন করুন:
   • audio
   • blink_gc
   • media
   • v8.execute (যদি আপনি AudioWorklet JS কোডের পারফরম্যান্স সম্পর্কে আগ্রহী হন)
   • webaudio
6. 'ডিফল্টরূপে নিষ্ক্রিয় বিভাগসমূহ' অংশে, নিম্নলিখিতগুলি নির্বাচন করুন:
   • audio-worklet (যদি আপনি জানতে আগ্রহী হন যে AudioWorklet থ্রেডটি কোথা থেকে শুরু হয়েছে)
   • webaudio.audionode (যদি প্রতিটি AudioNode এর বিস্তারিত ট্রেস প্রয়োজন হয়)
7. নিচের রেকর্ড বাটনটি চাপুন।
8. আপনার অ্যাপ্লিকেশন ট্যাবে ফিরে যান এবং যে ধাপগুলোর কারণে সমস্যাটি হয়েছিল, সেগুলো পুনরায় করুন।
9. যখন আপনার কাছে পর্যাপ্ত ট্রেস ডেটা থাকবে, তখন ট্রেসিং ট্যাবে ফিরে যান এবং স্টপ চাপুন।

10. ট্রেসিং ট্যাবটি ফলাফলটি প্রদর্শন করবে।

    

11. ট্রেসিং ডেটা সংরক্ষণ করতে সেভ চাপুন।

ট্রেসিং ডেটা কীভাবে বিশ্লেষণ করবেন

ট্রেসিং ডেটা দেখায় যে ক্রোমের ওয়েব অডিও ইঞ্জিন কীভাবে অডিও রেন্ডার করে। রেন্ডারারটির দুটি ভিন্ন রেন্ডার মোড রয়েছে: অপারেটিং সিস্টেম মোড এবং ওয়ার্কলেট মোড । প্রতিটি মোড একটি ভিন্ন থ্রেডিং মডেল ব্যবহার করে, তাই ট্রেসিংয়ের ফলাফলও ভিন্ন হয়।

অপারেটিং সিস্টেম মোড

অপারেটিং সিস্টেম মোডে, AudioOutputDevice থ্রেডটি সমস্ত ওয়েব অডিও কোড চালায়। AudioOutputDevice হলো ব্রাউজারের Audio Service থেকে উদ্ভূত একটি রিয়েল-টাইম প্রায়োরিটি থ্রেড, যা অডিও হার্ডওয়্যার ক্লক দ্বারা চালিত হয়। যদি আপনি এই লেনের ট্রেস ডেটাতে কোনো অনিয়ম দেখতে পান, তার মানে হলো ডিভাইস থেকে আসা কলব্যাকের টাইমিং হয়তো ঝাঁকুনিপূর্ণ। লিনাক্স এবং পালস অডিও-র সমন্বয়ে এই সমস্যাটি দেখা যায় বলে জানা যায়।

আরও বিস্তারিত জানতে নিম্নলিখিত ক্রোমিয়াম ইস্যুগুলো দেখুন: #825823 , #864463 ।

ওয়ার্কলেট মোড

ওয়ার্কলেট মোডে, যার বৈশিষ্ট্য হলো AudioOutputDevice থেকে AudioWorklet থ্রেডে একটি থ্রেড জাম্প, আপনি দুটি থ্রেড লেনে সুবিন্যস্ত ট্রেস দেখতে পাবেন। যখন ওয়ার্কলেটটি সক্রিয় করা হয়, তখন সমস্ত ওয়েব অডিও অপারেশন AudioWorklet থ্রেড দ্বারা রেন্ডার করা হয়। এই থ্রেডটি রিয়েল-টাইম প্রায়োরিটির নয়।

এখানে সাধারণ অনিয়মটি হলো গার্বেজ কালেকশন বা রেন্ডারের সময়সীমা পেরিয়ে যাওয়ার কারণে সৃষ্ট একটি বড় ব্লক। উভয় ক্ষেত্রেই অডিও স্ট্রিমে ত্রুটি দেখা দেয়।

উভয় ক্ষেত্রেই, আদর্শ ট্রেসিং ডেটার বৈশিষ্ট্য হলো অডিও ডিভাইস কলব্যাকগুলোর সুসংবদ্ধ আহ্বান এবং প্রদত্ত রেন্ডার বাজেটের মধ্যেই রেন্ডার টাস্কগুলোর সুষ্ঠুভাবে সম্পন্ন হওয়া। এই দুটি স্ক্রিনশট আদর্শ ট্রেসিং ডেটার চমৎকার উদাহরণ।

বাস্তব জীবনের উদাহরণ থেকে শেখা

উদাহরণ ১: রেন্ডার বাজেটের বাইরে যাওয়া রেন্ডার টাস্ক

নিচের স্ক্রিনশটটি ( ক্রোমিয়াম ইস্যু #796330 ) একটি সাধারণ উদাহরণ, যেখানে AudioWorkletProcessor এর কোড সম্পন্ন হতে অনেক বেশি সময় নেয় এবং একটি নির্দিষ্ট রেন্ডার বাজেট অতিক্রম করে। কলব্যাকের সময় ঠিকঠাক থাকলেও, Web Audio API-এর অডিও প্রসেসিং ফাংশন কলটি পরবর্তী ডিভাইস কলব্যাকের আগে তার কাজ সম্পন্ন করতে ব্যর্থ হয়।

আপনার বিকল্পগুলি:

• কম সংখ্যক AudioNode ইনস্ট্যান্স ব্যবহার করে অডিও গ্রাফের কাজের চাপ কমান।
• AudioWorkletProcessor এ আপনার কোডের কাজের চাপ কমান।
• AudioContext এর বেস ল্যাটেন্সি বৃদ্ধি করুন।

উদাহরণ ২: ওয়ার্কলেট থ্রেডে উল্লেখযোগ্য গার্বেজ কালেকশন

অপারেটিং সিস্টেমের অডিও রেন্ডারিং থ্রেডের বিপরীতে, গার্বেজ কালেকশন ওয়ার্কলেট থ্রেডে পরিচালিত হয়। এর মানে হলো, আপনার কোড যদি মেমরি অ্যালোকেশন/ডিঅ্যালোকেশন করে (যেমন নতুন অ্যারে তৈরি করা), তবে এটি শেষ পর্যন্ত একটি গার্বেজ কালেকশন প্রক্রিয়া শুরু করে, যা সিনক্রোনাসভাবে থ্রেডটিকে ব্লক করে দেয়। যদি ওয়েব অডিও অপারেশন এবং গার্বেজ কালেকশনের কাজের চাপ একটি নির্দিষ্ট রেন্ডার বাজেটের চেয়ে বেশি হয়, তবে অডিও স্ট্রিমে ত্রুটি দেখা দেয়। নিচের স্ক্রিনশটটি এই পরিস্থিতির একটি চরম উদাহরণ।

আপনার বিকল্পগুলি:

• শুরুতেই মেমরি বরাদ্দ করুন এবং যখনই সম্ভব তা পুনরায় ব্যবহার করুন।
• SharedArrayBuffer উপর ভিত্তি করে বিভিন্ন ডিজাইন প্যাটার্ন ব্যবহার করুন। যদিও এটি কোনো নিখুঁত সমাধান নয়, বেশ কিছু ওয়েব অডিও অ্যাপ তাদের নিবিড় অডিও কোড চালানোর জন্য SharedArrayBuffer সহ একটি অনুরূপ প্যাটার্ন ব্যবহার করে। উদাহরণ:
  • অডিও ওয়ার্কলেট ডিজাইন প্যাটার্ন

উদাহরণ ৩: AudioOutputDevice থেকে আসা ঝাঁকুনিপূর্ণ অডিও ডিভাইস কলব্যাক

ওয়েব অডিওর জন্য অডিও কলব্যাকের সঠিক সময় সবচেয়ে গুরুত্বপূর্ণ বিষয়। এটি আপনার সিস্টেমের সবচেয়ে নির্ভুল ক্লক হওয়া উচিত। যদি অপারেটিং সিস্টেম বা এর অডিও সাবসিস্টেম একটি নির্ভরযোগ্য কলব্যাক টাইমিং নিশ্চিত করতে না পারে, তবে পরবর্তী সমস্ত অপারেশন প্রভাবিত হবে। নিচের ছবিটি একটি ঝাঁকুনিপূর্ণ অডিও কলব্যাকের উদাহরণ। আগের দুটি ছবির তুলনায়, প্রতিটি কলব্যাকের মধ্যবর্তী ব্যবধান উল্লেখযোগ্যভাবে ভিন্ন।

আপনার বিকল্পগুলি:

• latencyHint অপশনটি অ্যাডজাস্ট করে সিস্টেম অডিও কলব্যাক বাফারের আকার বাড়ান।
• যদি কোনো সমস্যা খুঁজে পান, তাহলে ট্রেসিং ডেটা সহ crbug.com-এ একটি ইস্যু ফাইল করুন ।

ওয়েব অডিও ডেভটুলস এক্সটেনশন ব্যবহার করুন

আপনি ওয়েব অডিও এপিআই-এর জন্য বিশেষভাবে ডিজাইন করা ডেভটুলস এক্সটেনশনটিও ব্যবহার করতে পারেন। ট্রেসিং টুলের থেকে ভিন্ন, এটি গ্রাফ এবং পারফরম্যান্স মেট্রিক্সের রিয়েল-টাইম পর্যবেক্ষণের সুবিধা দেয়।

এই এক্সটেনশনটি ক্রোম ওয়েব স্টোর থেকে ইনস্টল করতে হবে।

ইনস্টলেশনের পরে, Chrome DevTools খুলে উপরের মেনুতে থাকা “Web Audio”-তে ক্লিক করে আপনি প্যানেলটি অ্যাক্সেস করতে পারবেন।

ওয়েব অডিও প্যানেলে চারটি উপাদান রয়েছে: কনটেক্সট সিলেক্টর, প্রপার্টি ইন্সপেক্টর, গ্রাফ ভিজ্যুয়ালাইজার এবং পারফরম্যান্স মনিটর।

প্রসঙ্গ নির্বাচক

যেহেতু একটি পেজে একাধিক BaseAudioContext অবজেক্ট থাকতে পারে, তাই এই ড্রপ-ডাউন মেনুটি আপনাকে আপনার পছন্দের কনটেক্সটটি বেছে নেওয়ার সুযোগ দেয়। এছাড়াও, আপনি বাম দিকের ট্র্যাশ ক্যান আইকনে ক্লিক করে ম্যানুয়ালি গার্বেজ কালেকশন চালু করতে পারেন।

সম্পত্তি পরিদর্শক

সাইড প্যানেলটি ব্যবহারকারী-নির্বাচিত কোনো কন্টেক্সট বা AudioNode বিভিন্ন প্রোপার্টি দেখায়। AudioParam এর ডাইনামিক ভ্যালু পরিদর্শন করা সমর্থিত নয়।

গ্রাফ ভিজ্যুয়ালাইজার

এই ভিউটি ব্যবহারকারী-নির্বাচিত একটি কনটেক্সটের বর্তমান গ্রাফ টপোলজি প্রদর্শন করে। এই ভিজ্যুয়ালাইজেশনটি রিয়েল টাইমে গতিশীলভাবে পরিবর্তিত হয়। ভিজ্যুয়ালাইজেশনের কোনো একটি এলিমেন্টে ক্লিক করে, আপনি প্রপার্টি ইন্সপেক্টরে বিস্তারিত তথ্য দেখতে পারেন।

পারফরম্যান্স মনিটর

নিচের স্ট্যাটাস বারটি কেবল তখনই সক্রিয় থাকে যখন নির্বাচিত BaseAudioContext একটি AudioContext হয়, যা রিয়েল-টাইমে চলে। এই বারটি নির্বাচিত AudioContext এর তাৎক্ষণিক অডিও স্ট্রিমের মান দেখায় এবং প্রতি সেকেন্ডে আপডেট হয়। এটি নিম্নলিখিত তথ্য প্রদান করে:

• কলব্যাক ব্যবধান (মিলিসেকেন্ড): কলব্যাক ব্যবধানের ওয়েটেড মিন বা ভ্যারিয়েন্স প্রদর্শন করে। আদর্শগতভাবে, মিন স্থিতিশীল এবং ভ্যারিয়েন্স শূন্যের কাছাকাছি হওয়া উচিত। যদি আপনি একটি বড় ভ্যারিয়েন্স দেখতে পান, তার মানে হলো সিস্টেম-লেভেল অডিও কলব্যাক ফাংশনের টাইমিং অস্থিতিশীল, যা অডিও স্ট্রিমের নিম্নমানের কারণ হতে পারে। (উদাহরণ ৩ দেখুন)।

• রেন্ডার ক্ষমতা (শতাংশ): যখন ক্ষমতা ১০০ শতাংশের কাছাকাছি চলে আসে, তার মানে হলো রেন্ডারার একটি নির্দিষ্ট রেন্ডার বাজেটের তুলনায় অনেক বেশি কাজ করছে, তাই আপনার কাজের পরিমাণ কমানোর কথা বিবেচনা করা উচিত (যেমন গ্রাফে কম সংখ্যক AudioNodes অবজেক্ট ব্যবহার করা)।

ট্র্যাশ ক্যান আইকনে ক্লিক করে আপনি ম্যানুয়ালি গার্বেজ কালেক্টর চালু করতে পারেন।

লিগ্যাসি WebAudio DevTools প্যানেল

এক্সটেনশনটি এখন ক্রোম ওয়েব অডিও টিমের পক্ষ থেকে একটি প্রস্তাবিত পদ্ধতি, তবে পুরোনো ওয়েবঅডিও ডেভটুলস প্যানেলটিও উপলব্ধ আছে। ডেভটুলস-এর উপরের ডান কোণায় থাকা 'তিনটি ডট' মেনুতে ক্লিক করে, তারপর 'More tools'- এ গিয়ে, এবং এরপর 'WebAudio'-তে গিয়ে আপনি এই প্যানেলটি অ্যাক্সেস করতে পারেন।

উপসংহার

অডিও ডিবাগ করা কঠিন। ব্রাউজারে অডিও ডিবাগ করা আরও কঠিন। তবে, ওয়েব অডিও কোড কীভাবে কাজ করে সে সম্পর্কে দরকারি তথ্য দিয়ে এই টুলগুলো আপনার কষ্ট লাঘব করতে পারে। কিন্তু, কিছু ক্ষেত্রে আপনি ক্রোম বা এক্সটেনশনটিতে সমস্যা খুঁজে পেতে পারেন। crbug.com-এ অথবা এক্সটেনশনটির ইস্যু ট্র্যাকারে একটি বাগ রিপোর্ট করুন ।