יצירת פרופילים של אפליקציות 'אודיו לאינטרנט' ב-Chrome

במאמר הזה מוסבר איך ליצור פרופיל של הביצועים של אפליקציות Web Audio ב-Chrome באמצעות about://tracing ו-Audion (תוסף WebAudio בכלי הפיתוח ל-Chrome).

הגעתם למסמך הזה כנראה כי אתם מפתחים אפליקציה שמשתמשת ב-Web Audio API ונתקלתם בשיבושים לא צפויים, כמו רעשי פצפוץ בפלט, או שאתם שומעים משהו לא צפוי. יכול להיות שאתם כבר משתתפים בדיון ב-crbug.com ומהנדס Chrome ביקש מכם להעלות 'נתוני מעקב' או לבדוק את הייצוג הגרפי.

כאן אנחנו מסבירים איך לקבל את המידע הרלוונטי כדי שנוכל להבין את הבעיה ולפתור אותה.

כלי פרופיל ל-Web Audio

יש שני כלים שיעזרו לכם כשאתם יוצרים פרופיל של Web Audio:‏ about://tracing והתוסף WebAudio בכלי הפיתוח ל-Chrome.

מתי כדאי להשתמש ב-about://tracing?

כשמתרחשים 'באגים' מסתוריים. ניתוח פרופיל האפליקציה באמצעות כלי המעקב מספק תובנות לגבי:

• פרוסות זמן שהוקדשו לקריאות ספציפיות לפונקציות בשרשורים שונים
• תזמון של קריאה חוזרת עם אודיו בתצוגת ציר הזמן

בדרך כלל מוצגים בו מועדים אחרונים של קריאות חוזרות לאודיו שלא נענו או garbage collection גדול שעשוי לגרום לבעיות לא צפויות באודיו. המידע הזה שימושי להבנת הבעיה הבסיסית, ולכן מהנדסי Chromium יבקשו אותו לעיתים קרובות, במיוחד כשאי אפשר לשחזר את הבעיה באופן מקומי. כדאי לעיין בהוראות הכלליות שלנו למעקב.

מתי כדאי להשתמש בתוסף Web Audio DevTools?

כשרוצים לראות את גרף האודיו ולעקוב אחרי הביצועים של רכיב העיבוד של האודיו בזמן אמת. גרף האודיו, רשת של אובייקטים של AudioNode ליצירה ולסינתוז של זרם אודיו, הוא לרוב מורכב, אבל טופולוגיית הגרף אטומה בכוונה. ‫(Web Audio API לא כולל תכונות לבדיקת צמתים או גרפים). חלק מהשינויים מתרחשים בתרשים ועכשיו שומעים שקט. אז הגיע הזמן לניפוי באגים באמצעות האזנה. זה אף פעם לא קל, וזה נהיה קשה יותר כשיש גרף אודיו גדול יותר. תוסף Web Audio DevTools יכול לעזור לכם להמחיש את הגרף.

באמצעות התוסף הזה, אפשר לעקוב אחרי הערכה של קיבולת העיבוד, שמציינת את הביצועים של רכיב העיבוד של האודיו באינטרנט במסגרת תקציב עיבוד נתון (למשל, בערך 2.67ms @ 48KHz). אם הקיבולת מתקרבת ל-100%, סביר להניח שהאפליקציה תייצר תקלות כי הרכיב שמעבד את הגרפיקה לא מצליח לסיים את העבודה במסגרת התקציב שנקבע.

שימוש ב-about://tracing

כדי לקבל את התוצאות הכי טובות, כדאי לסגור את כל הכרטיסיות והחלונות האחרים ולהשבית את התוספים. לחלופין, אפשר להפעיל מופע חדש של Chrome או להשתמש בגרסאות אחרות מערוצי הפצה שונים (למשל, בטא או Canary). אחרי שהדפדפן מוכן:

1. פותחים את האפליקציה (דף אינטרנט) בכרטיסייה.
2. פותחים כרטיסייה נוספת ועוברים לכתובת about://tracing.
3. לוחצים על הלחצן הקלטה ובוחרים באפשרות בחירת הגדרות באופן ידני.
4. לוחצים על הלחצן ללא בקטע קטגוריות של הקלטות ובקטע קטגוריות שמושבתות כברירת מחדל.
5. בקטע Record Categories בוחרים באפשרויות הבאות:
   • audio
   • blink_gc
   • media
   • v8.execute (אם אתם מעוניינים בביצועים של קוד JavaScript)AudioWorklet
   • webaudio
6. בקטע Disabled by Default Categories (קטגוריות שמושבתות כברירת מחדל), בוחרים באפשרויות הבאות:
   • audio-worklet (אם אתם רוצים לדעת איפה מתחיל השרשור AudioWorklet)
   • webaudio.audionode (אם אתם צריכים את נתוני המעקב המפורטים לכל AudioNode)
7. לוחצים על הלחצן הקלטה בתחתית המסך.
8. חוזרים לכרטיסיית הבקשה ומבצעים מחדש את השלבים שגרמו לבעיה.
9. כשיצטברו מספיק נתוני מעקב, חוזרים לכרטיסיית המעקב ולוחצים על הפסקה.

10. התוצאה תוצג בכרטיסייה 'מעקב'.

    

11. לוחצים על שמירה כדי לשמור את נתוני המעקב.

איך מנתחים נתוני מעקב

נתוני המעקב מציגים באופן חזותי איך מנוע האודיו באינטרנט של Chrome מעבד את האודיו. לרכיב ה-Renderer יש שני מצבי עיבוד שונים: מצב מערכת הפעלה ומצב Worklet. כל מצב משתמש במודל שרשור שונה, ולכן גם התוצאות של המעקב שונות.

מצב מערכת הפעלה

במצב מערכת הפעלה, השרשור AudioOutputDevice מריץ את כל קוד האודיו באינטרנט. ה-AudioOutputDevice הוא שרשור עדיפות בזמן אמת שמקורו בשירות האודיו של הדפדפן, והוא מופעל על ידי שעון חומרת האודיו. אם רואים חוסר סדירות בנתוני המעקב בנתיב הזה, זה אומר שהתזמון של הקריאה החוזרת מהמכשיר עשוי להיות לא יציב. הבעיה הזו ידועה בשילוב של Linux ו-Pulse Audio.

פרטים נוספים זמינים בבעיות הבאות ב-Chromium: ‏ #825823,‏ #864463.

מצב Worklet

במצב Worklet, שמאופיין בקפיצה של שרשור אחד מ-AudioOutputDevice אל השרשור AudioWorklet, אמורים לראות עקבות מיושרים היטב בשני נתיבי שרשורים. כשמפעילים את ה-worklet, כל פעולות האודיו באינטרנט מעובדות על ידי השרשור AudioWorklet. השרשור הזה לא בעדיפות בזמן אמת.

החריגה הנפוצה כאן היא בלוק גדול שנגרם על ידי garbage collection או פספוס מועדי היעד של הרינדור. בשני המקרים, יש תקלות בשידור אודיו.

בשני המקרים, נתוני המעקב האידיאליים מאופיינים בקריאות חוזרות (callback) של מכשיר שמע שמתבצעות בזמן הנכון, ובמשימות רינדור שמושלמות במסגרת תקציב הרינדור שנקבע. שני צילומי המסך הם דוגמאות מצוינות לנתוני מעקב אידיאליים.

למידה מדוגמאות מהחיים

דוגמה 1: משימות רינדור שחורגות מתקציב הרינדור

צילום המסך שלמטה (בעיה מספר 796330 ב-Chromium) הוא דוגמה אופיינית למצב שבו קוד ב-AudioWorkletProcessor פועל יותר מדי זמן וחורג מתקציב העיבוד שנקבע. התזמון של הקריאה החוזרת תקין, אבל הבקשה להפעלת פונקציית עיבוד האודיו של Web Audio API לא הושלמה לפני הקריאה החוזרת הבאה למכשיר.

האפשרויות שלכם:

• כדי להפחית את עומס העבודה של גרף האודיו, משתמשים בפחות מופעים של AudioNode.
• מפחיתים את עומס העבודה של הקוד ב-AudioWorkletProcessor.
• להגדיל את זמן האחזור הבסיסי של AudioContext.

דוגמה 2: garbage collection משמעותי בשרשור של ה-worklet

בניגוד למה שקורה בשרשור של עיבוד האודיו במערכת ההפעלה, garbage collection מנוהל בשרשור של ה-worklet. כלומר, אם הקוד שלכם מבצע הקצאת זיכרון או ביטול הקצאה של זיכרון (למשל מערכים חדשים), בסופו של דבר הוא מפעיל garbage collection, שחוסם את השרשור באופן סינכרוני. אם עומס העבודה של פעולות Web Audio ו-garbage collection גדול יותר מתקציב העיבוד הנתון, התוצאה היא תקלות בשידור האודיו. צילום המסך הבא הוא דוגמה קיצונית למקרה הזה.

האפשרויות שלכם:

• כדאי להקצות את הזיכרון מראש ולעשות בו שימוש חוזר כשהדבר אפשרי.
• שימוש בדפוסי עיצוב שונים על סמך SharedArrayBuffer. למרות שזה לא פתרון מושלם, כמה אפליקציות אודיו באינטרנט משתמשות בדפוס דומה עם SharedArrayBuffer כדי להריץ את קוד האודיו האינטנסיבי. דוגמאות:
  • תבנית עיצוב של Audio Worklet

דוגמה 3: קריאה חוזרת (callback) של מכשיר אודיו עם ג'יטר מ-AudioOutputDevice

התזמון המדויק של קריאה חוזרת (callback) של אודיו הוא הדבר הכי חשוב באודיו באינטרנט. זה צריך להיות השעון הכי מדויק במערכת. אם מערכת ההפעלה או מערכת המשנה של האודיו שלה לא יכולות להבטיח תזמון אמין של קריאה חוזרת, כל הפעולות הבאות יושפעו. התמונה הבאה היא דוגמה לקריאה חוזרת (callback) של אודיו עם ג'יטר. בהשוואה לשתי התמונות הקודמות, המרווח בין כל קריאה חוזרת משתנה באופן משמעותי.

האפשרויות שלכם:

• כדי להגדיל את שטח האחסון הזמני של הקריאה החוזרת (Callback) של האודיו במערכת, משנים את האפשרות latencyHint.
• אם נתקלתם בבעיה, דווחו עליה בכתובת crbug.com וצרפו את נתוני המעקב.

שימוש בתוסף Web Audio DevTools

אפשר גם להשתמש בתוסף של כלי הפיתוח שנועד במיוחד ל-Web Audio API. בניגוד לכלי המעקב, הכלי הזה מאפשר לבדוק את הגרפים ואת מדדי הביצועים בזמן אמת.

צריך להתקין את התוסף הזה מחנות האינטרנט של Chrome.

אחרי ההתקנה, כדי לגשת לחלונית פותחים את כלי הפיתוח ל-Chrome ולוחצים על Web Audio בתפריט העליון.

בחלונית Web Audio יש ארבעה רכיבים: בורר הקונטקסט, בודק המאפיינים, כלי להמחשת גרפים ומוניטור ביצועים.

Context Selector

בדף יכולים להיות כמה אובייקטים מסוג BaseAudioContext, ולכן בתפריט הנפתח הזה אפשר לבחור את ההקשר שרוצים לבדוק. אפשר גם להפעיל איסוף של נתונים לא רלוונטיים באופן ידני בלחיצה על סמל פח האשפה בצד ימין.

כלי לבדיקת נכסים

בחלונית הצדדית מוצגים מאפיינים שונים של הקשר או של AudioNode שנבחרו על ידי המשתמש. אי אפשר לבדוק ערכים דינמיים ב-AudioParam.

Graph Visualizer

בתצוגה הזו מוצגת טופולוגיית הגרף הנוכחית של הקשר שנבחר על ידי המשתמש. הוויזואליזציה הזו משתנה באופן דינמי בזמן אמת. בלחיצה על רכיב בהדמיה, אפשר לבדוק את המידע המפורט בכלי לבדיקת מאפיינים.

מעקב אחר ביצועים

שורת הסטטוס בתחתית פעילה רק אם BaseAudioContext שנבחר הוא AudioContext, שפועל בזמן אמת. בפס הזה מוצגת האיכות הרגעית של זרם האודיו של AudioContext שנבחר, והוא מתעדכן כל שנייה. הוא מספק את המידע הבא:

• מרווח של קריאה חוזרת (callback) (אלפיות השנייה): מוצג הממוצע המשוקלל או השונות של מרווח הקריאה החוזרת. במצב אידיאלי, הממוצע צריך להיות יציב והשונות צריכה להיות קרובה לאפס. אם אתם רואים שונות גדולה, זה אומר שלפונקציית הקריאה החוזרת של האודיו ברמת המערכת יש תזמון לא יציב שיכול להוביל לאיכות ירודה של זרם האודיו. (ראו דוגמה 3).

• קיבולת העיבוד (באחוזים): אם הקיבולת מתקרבת ל-100%, המשמעות היא שהרכיב לעיבוד התמונה מבצע יותר מדי פעולות במסגרת תקציב העיבוד הנתון, ולכן כדאי לבצע פחות פעולות (למשל, להשתמש בפחות אובייקטים מסוג AudioNodes בתרשים).

כדי להפעיל ידנית את איסוף האשפה, לוחצים על סמל פח האשפה.

החלונית Legacy WebAudio בכלי הפיתוח

התוסף הוא עכשיו השיטה המומלצת על ידי צוות Web Audio של Chrome, אבל אפשר גם להשתמש בחלונית WebAudio DevTools מדור קודם. כדי לגשת לחלונית הזו, לוחצים על סמל התפריט (3 נקודות) בפינה השמאלית העליונה של כלי הפיתוח, עוברים אל כלים נוספים ואז אל WebAudio.

סיכום

קשה לבצע ניפוי באגים באודיו. ניפוי באגים באודיו בדפדפן הוא אפילו יותר קשה. עם זאת, הכלים האלה יכולים להקל על הכאב בכך שהם מספקים תובנות שימושיות לגבי הביצועים של קוד האודיו באינטרנט. עם זאת, במקרים מסוימים יכולות להיות בעיות ב-Chrome או בתוסף. מדווחים על באג בכתובת crbug.com או בכלי למעקב אחר בעיות בתוספים.