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

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

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

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

دو ابزار وجود دارد که در نمایه سازی Web Audio به شما کمک می کند، about://tracing و افزونه WebAudio در ابزار توسعه کروم.

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

هنگامی که "اشکال" مرموز رخ می دهد. نمایه سازی برنامه با ابزارهای ردیابی به شما بینش هایی در مورد زیر می دهد:

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

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

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

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

با استفاده از این برنامه افزودنی، می‌توانید تخمین در حال اجرا ظرفیت رندر را نظارت کنید، که نشان می‌دهد چگونه رندر صوتی وب در یک بودجه رندر مشخص (مثلاً تقریباً 2.67 میلی‌ثانیه @ 48 کیلوهرتز) عمل می‌کند. اگر ظرفیت نزدیک به 100 درصد باشد، به این معنی است که برنامه شما احتمالاً اشکالاتی ایجاد می کند زیرا رندر در بودجه مشخص کار را به پایان نمی رساند.

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

نحوه گرفتن داده های ردیابی

دستورالعمل های زیر نوشته شده برای Chrome 80 و جدیدتر است.

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

  1. برنامه (صفحه وب) خود را در یک برگه باز کنید.
  2. برگه دیگری را باز کنید و به about://tracing بروید.
  3. دکمه Record را فشار داده و Manually select settings را انتخاب کنید.
  4. دکمه None را در هر دو بخش Record Categories و Disabled by Default Categories فشار دهید.
  5. در بخش Record Categories موارد زیر را انتخاب کنید:
    • audio
    • blink_gc
    • media
    • v8.execute (اگر به عملکرد کد AudioWorklet JS علاقه دارید)
    • webaudio
  6. در قسمت Disabled by Default Categories موارد زیر را انتخاب کنید:
    • audio-worklet (اگر علاقه دارید که موضوع AudioWorklet از کجا شروع می شود)
    • webaudio.audionode (اگر به ردیابی دقیق برای هر AudioNode نیاز دارید)
  7. دکمه Record را در پایین فشار دهید.
  8. به برگه برنامه خود برگردید و مراحلی که باعث ایجاد مشکل شده است را دوباره انجام دهید.
  9. وقتی داده‌های ردیابی کافی دارید، به برگه ردیابی برگردید و Stop را فشار دهید.

  10. تب Tracing نتیجه را به تصویر می کشد.

    اسکرین شات پس از تکمیل ردیابی.

  11. برای ذخیره داده های ردیابی ، ذخیره را فشار دهید.

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

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

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

در حالت سیستم عامل، رشته AudioOutputDevice تمام کدهای صوتی وب را اجرا می کند. AudioOutputDevice یک رشته اولویت بلادرنگ است که از سرویس صوتی مرورگر سرچشمه می گیرد و توسط ساعت سخت افزاری صوتی هدایت می شود. اگر در داده‌های ردیابی در این خط بی‌نظمی مشاهده کردید، به این معنی است که زمان‌بندی برگشت تماس از دستگاه ممکن است لرزان باشد. ترکیب لینوکس و صدای پالس با این مشکل شناخته شده است. برای جزئیات بیشتر به مشکلات Chromium زیر مراجعه کنید: #825823 ، #864463 .

اسکرین شات از نتیجه ردیابی حالت سیستم عامل.

حالت Worklet

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

اسکرین شات از نتیجه ردیابی حالت worklet.

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

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

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

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

نموداری که نقص صوتی را به دلیل سرریز بودجه رندر نمایش می دهد.

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

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

مثال 2: جمع آوری زباله قابل توجه روی نخ کار

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

اشکالات صوتی ناشی از جمع آوری زباله.

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

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

مثال 3: پاسخ به تماس دستگاه صوتی با عصبانیت از AudioOutputDevice

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

عکس از صفحه نمایش زمان‌بندی برگشت تماس ناپایدار و پایدار را مقایسه می‌کند.

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

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

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

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

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

نماگرفتی که نحوه باز کردن پانل صوتی وب را در Chrome DevTools نشان می‌دهد.

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

نماگرفت پانل صوتی وب در Chrome DevTools.

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

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

بازرس اموال

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

تجسم گراف

این نمای توپولوژی نمودار فعلی یک زمینه انتخاب شده توسط کاربر را ارائه می کند. این تجسم به صورت پویا در زمان واقعی تغییر می کند. با کلیک بر روی یک عنصر در تصویرسازی، می توانید اطلاعات دقیق در مورد بازرس ملک را بررسی کنید.

نظارت بر کارایی

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

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

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

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

پنل DevTools WebAudio قدیمی

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

عکس صفحه نمایش نحوه باز کردن پنل WebAudio در ابزار توسعه کروم را نشان می دهد.

نتیجه

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

عکس از جاناتان ولاسکوئز در Unsplash