پروفایل کردن برنامه های صوتی وب در کروم

یاد بگیرید که چگونه عملکرد برنامه‌های Web Audio را در Chrome با استفاده از about://tracing و Audion (افزونه‌ای برای WebAudio در Chrome DevTools) بررسی کنید.

احتمالاً به این دلیل به این سند رسیده‌اید که در حال توسعه برنامه‌ای هستید که از API صوتی وب استفاده می‌کند و با اشکالات غیرمنتظره‌ای مانند صداهای ناگهانی از خروجی مواجه شده‌اید، یا چیزی غیرمنتظره می‌شنوید. ممکن است قبلاً در بحث crbug.com شرکت داشته باشید و یک مهندس کروم از شما خواسته باشد که "داده‌های ردیابی" را آپلود کنید یا به تجسم نمودار نگاهی بیندازید.

یاد بگیرید که چگونه اطلاعات مربوطه را به دست آورید، تا بتوانیم مشکل را درک کنیم و در نهایت مشکل اساسی را برطرف کنیم.

ابزارهای پروفایلینگ صوتی وب

دو ابزار وجود دارد که هنگام پروفایل‌بندی صدای وب به شما کمک می‌کنند، about://tracing و دیگری افزونه‌ی WebAudio در Chrome DevTools.

چه زمانی about://tracing استفاده می‌کنید؟

وقتی "اشکالات" مرموزی رخ می‌دهد. پروفایل کردن برنامه با ابزارهای ردیابی به شما بینش‌هایی در مورد موارد زیر می‌دهد:

• برش‌های زمانی صرف شده توسط فراخوانی‌های تابع خاص در نخ‌های مختلف
• زمان‌بندی تماس صوتی در نمای تایم‌لاین

معمولاً مهلت‌های از دست رفته برای فراخوانی مجدد صدا یا جمع‌آوری زباله‌های بزرگ را نشان می‌دهد که ممکن است باعث ایجاد اشکالات صوتی غیرمنتظره شود. این اطلاعات برای درک یک مشکل اساسی مفید است، بنابراین مهندسان Chromium اغلب آن را می‌پرسند، به خصوص زمانی که تولید مثل محلی امکان‌پذیر نیست. دستورالعمل‌های کلی ما را برای ردیابی مرور کنید.

چه زمانی از افزونه Web Audio DevTools استفاده می‌کنید؟

وقتی می‌خواهید نمودار صوتی را تجسم کنید و نحوه عملکرد رندرکننده صوتی را در زمان واقعی نظارت کنید. نمودار صوتی، شبکه‌ای از اشیاء AudioNode برای تولید و ترکیب یک جریان صوتی، اغلب پیچیده می‌شود اما توپولوژی نمودار از نظر طراحی مبهم است. (Web Audio API ویژگی‌هایی برای درون‌نگری گره/گراف ندارد.) برخی تغییرات در نمودار شما اتفاق می‌افتد و اکنون سکوت را می‌شنوید. سپس زمان اشکال‌زدایی با گوش دادن فرا می‌رسد. این کار هرگز آسان نیست و وقتی نمودار صوتی بزرگ‌تری دارید، دشوارتر می‌شود. افزونه Web Audio DevTools می‌تواند با تجسم نمودار به شما کمک کند.

با این افزونه، می‌توانید تخمینی از ظرفیت رندر را مشاهده کنید که نشان می‌دهد رندرکننده‌ی صدای وب در یک بودجه‌ی رندر مشخص (مثلاً تقریباً ۲.۶۷ میلی‌ثانیه در ۴۸ کیلوهرتز) چگونه عمل می‌کند. اگر ظرفیت به ۱۰۰ درصد نزدیک شود، به این معنی است که برنامه‌ی شما احتمالاً دچار اشکالاتی خواهد شد زیرا رندرکننده در اتمام کار در بودجه‌ی مشخص شکست می‌خورد.

about://tracing استفاده کنید

برای بهترین نتیجه، تمام تب‌ها و پنجره‌های دیگر را ببندید و افزونه‌ها را غیرفعال کنید. همچنین می‌توانید یک نمونه جدید از کروم را اجرا کنید یا از نسخه‌های دیگر از کانال‌های انتشار مختلف (مثلاً بتا یا Canary) استفاده کنید. پس از آماده شدن مرورگر:

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. برای ذخیره داده‌های ردیابی، ذخیره را فشار دهید.

نحوه تجزیه و تحلیل داده‌های ردیابی

داده‌های ردیابی، نحوه رندر کردن صدا توسط موتور صوتی وب کروم را به صورت بصری نشان می‌دهند. این رندرکننده دو حالت رندر مختلف دارد: حالت سیستم عامل و حالت Worklet . هر حالت از یک مدل threading متفاوت استفاده می‌کند، بنابراین نتایج ردیابی نیز متفاوت هستند.

حالت سیستم عامل

در حالت سیستم عامل، رشته AudioOutputDevice تمام کدهای صوتی وب را اجرا می‌کند. AudioOutputDevice یک رشته اولویت‌دار بلادرنگ است که از سرویس صوتی مرورگر سرچشمه می‌گیرد و توسط ساعت سخت‌افزار صوتی هدایت می‌شود. اگر در داده‌های ردیابی در این مسیر بی‌نظمی مشاهده کردید، به این معنی است که زمان‌بندی فراخوانی از دستگاه ممکن است نامنظم باشد. ترکیب لینوکس و Pulse Audio به داشتن این مشکل معروف است.

برای جزئیات بیشتر به مشکلات کرومیوم زیر مراجعه کنید: #۸۲۵۸۲۳ ، #۸۶۴۴۶۳ .

حالت کاربرگ

در حالت Worklet، که با پرش یک رشته از AudioOutputDevice به رشته AudioWorklet مشخص می‌شود، باید ردپاهای هم‌تراز را در دو خط رشته مشاهده کنید. وقتی worklet فعال می‌شود، تمام عملیات صوتی وب توسط رشته AudioWorklet رندر می‌شوند. این رشته اولویت بلادرنگ ندارد.

بی‌نظمی رایج در اینجا، یک انسداد بزرگ ناشی از جمع‌آوری زباله یا مهلت‌های رندر از دست رفته است. هر دو مورد منجر به اشکالاتی در جریان صدا می‌شوند.

در هر دو مورد، داده‌های ردیابی ایده‌آل با فراخوانی‌های برگشتی دستگاه صوتی که به خوبی تنظیم شده‌اند و وظایف رندر که به خوبی در محدوده بودجه رندر مشخص شده انجام می‌شوند، مشخص می‌شوند. دو تصویر نمونه بسیار خوبی از داده‌های ردیابی ایده‌آل هستند.

یادگیری از مثال‌های دنیای واقعی

مثال ۱: وظایف رندر فراتر از بودجه رندر

تصویر زیر ( شماره Chromium #796330 ) نمونه‌ای معمول از زمانی است که کد در AudioWorkletProcessor بیش از حد طول می‌کشد و از بودجه رندر مشخص شده فراتر می‌رود. زمان‌بندی فراخوانی به خوبی انجام می‌شود اما فراخوانی تابع پردازش صدا از Web Audio API قبل از فراخوانی بعدی دستگاه، نتوانست کار را تکمیل کند.

گزینه‌های شما:

• با استفاده از نمونه‌های AudioNode کمتر، حجم کار گراف صوتی را کاهش دهید.
• حجم کار کد خود را در AudioWorkletProcessor کاهش دهید.
• تأخیر پایه AudioContext را افزایش دهید.

مثال ۲: جمع‌آوری زباله قابل توجه در نخ کاربرگ

برخلاف نخ رندر صدای سیستم عامل، جمع‌آوری زباله (garbage collection) در نخ worklet مدیریت می‌شود. این بدان معناست که اگر کد شما تخصیص/آزادسازی حافظه را انجام دهد (مثلاً آرایه‌های جدید)، در نهایت یک جمع‌آوری زباله (garbage collection) را فعال می‌کند که به صورت همزمان نخ را مسدود می‌کند. اگر حجم کار عملیات صوتی وب و جمع‌آوری زباله بیشتر از بودجه رندر مشخص باشد، منجر به بروز اشکالاتی در جریان صدا می‌شود. تصویر زیر نمونه‌ای بارز از این مورد است.

گزینه‌های شما:

• حافظه را از قبل اختصاص دهید و هر زمان که ممکن بود دوباره از آن استفاده کنید.
• از الگوهای طراحی مختلف مبتنی بر SharedArrayBuffer استفاده کنید. اگرچه این یک راه حل کامل نیست، اما چندین برنامه صوتی وب از الگوی مشابهی با SharedArrayBuffer برای اجرای کد صوتی فشرده استفاده می‌کنند. مثال‌ها:
  • الگوی طراحی کتابچه صوتی

مثال ۳: فراخوانی مجدد دستگاه صوتی نامنظم از AudioOutputDevice

زمان دقیق فراخوانی صوتی مهم‌ترین نکته برای صدای وب است. این باید دقیق‌ترین ساعت در سیستم شما باشد. اگر سیستم عامل یا زیرسیستم صوتی آن نتواند زمان‌بندی دقیق فراخوانی را تضمین کند، تمام عملیات بعدی تحت تأثیر قرار خواهند گرفت. تصویر زیر نمونه‌ای از فراخوانی صوتی نامنظم است. در مقایسه با دو تصویر قبلی، فاصله بین هر فراخوانی به طور قابل توجهی متفاوت است.

گزینه‌های شما:

• با تنظیم گزینه latencyHint اندازه بافر فراخوانی صوتی سیستم را افزایش دهید.
• اگر مشکلی پیدا کردید، با استفاده از داده‌های ردیابی ، در crbug.com مشکل خود را ثبت کنید .

از افزونه Web Audio DevTools استفاده کنید

همچنین می‌توانید از افزونه‌ی DevTools که به‌طور خاص برای Web Audio API طراحی شده است، استفاده کنید. برخلاف ابزار ردیابی، این افزونه امکان بررسی بلادرنگ نمودارها و معیارهای عملکرد را فراهم می‌کند.

این افزونه باید از فروشگاه وب کروم نصب شود.

پس از نصب، با باز کردن Chrome DevTools و کلیک روی «Web Audio» در منوی بالا، به پنل دسترسی پیدا می‌کنید.

پنل Web Audio چهار جزء دارد: انتخابگر زمینه، بازرس ویژگی، تصویرساز نمودار و مانیتور عملکرد.

انتخابگر زمینه

از آنجایی که یک صفحه می‌تواند چندین شیء BaseAudioContext داشته باشد، این منوی کشویی به شما امکان می‌دهد زمینه‌ای را که می‌خواهید بررسی کنید انتخاب کنید. همچنین می‌توانید با کلیک روی نماد سطل زباله در سمت چپ، جمع‌آوری زباله را به صورت دستی آغاز کنید.

بازرس املاک

پنل کناری، ویژگی‌های مختلف یک زمینه یا AudioNode انتخاب‌شده توسط کاربر را نشان می‌دهد. بررسی مقادیر پویا در AudioParam پشتیبانی نمی‌شود.

تجسم نمودار

این نما، توپولوژی گراف فعلی یک زمینه انتخاب شده توسط کاربر را رندر می‌کند. این تجسم به صورت پویا و در لحظه تغییر می‌کند. با کلیک روی یک عنصر در تجسم، می‌توانید اطلاعات دقیق را در قسمت property inspector بررسی کنید.

مانیتور عملکرد

نوار وضعیت در پایین فقط زمانی فعال است که BaseAudioContext انتخاب شده یک AudioContext باشد که به صورت بلادرنگ اجرا می‌شود. این نوار کیفیت جریان صوتی لحظه‌ای AudioContext انتخاب شده را نشان می‌دهد و هر ثانیه به‌روزرسانی می‌شود. این نوار اطلاعات زیر را ارائه می‌دهد:

• فاصله زمانی فراخوانی (میلی‌ثانیه): میانگین یا واریانس وزنی فاصله زمانی فراخوانی را نمایش می‌دهد. در حالت ایده‌آل، میانگین باید پایدار و واریانس باید نزدیک به صفر باشد. اگر واریانس زیادی مشاهده کردید، به این معنی است که تابع فراخوانی صوتی در سطح سیستم، زمان‌بندی ناپایداری دارد که می‌تواند منجر به کیفیت پایین جریان صوتی شود. (به مثال ۳ مراجعه کنید).

• ظرفیت رندر (درصد): وقتی ظرفیت به ۱۰۰ درصد نزدیک می‌شود، به این معنی است که رندرکننده برای بودجه رندر مشخص، کار زیادی انجام می‌دهد، بنابراین باید کار کمتری انجام دهید (مثلاً استفاده از اشیاء AudioNodes کمتر در نمودار).

شما می‌توانید با کلیک روی آیکون سطل زباله، به صورت دستی یک garbage collector را فعال کنید.

پنل DevTools WebAudio قدیمی

این افزونه اکنون توسط تیم Chrome Web Audio توصیه می‌شود، اما پنل قدیمی WebAudio DevTools نیز موجود است. می‌توانید با کلیک روی منوی «سه نقطه» در گوشه سمت راست بالای DevTools، سپس رفتن به More tools و سپس WebAudio به این پنل دسترسی پیدا کنید.

نتیجه‌گیری

اشکال‌زدایی صدا سخت است. اشکال‌زدایی صدا در مرورگر حتی سخت‌تر است. با این حال، این ابزارها می‌توانند با ارائه بینش‌های مفید در مورد نحوه عملکرد کد صوتی وب، دردسر را کاهش دهند. با این حال، در برخی موارد، ممکن است در کروم یا افزونه مشکلاتی پیدا کنید. یک اشکال را در crbug.com یا در ردیاب مشکل افزونه ثبت کنید.