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

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

Hongchan Choi

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

כלים ליצירת פרופילים של Web Audio

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

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

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

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

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

מתי אתם משתמשים בתוסף Web Audio DevTools?

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

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

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

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

ההוראות שבהמשך מיועדות ל-Chrome בגרסה 80 ואילך.

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

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

10. כרטיסיית המעקב תציג את התוצאה באופן חזותי.

    

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

איך לנתח את נתוני המעקב

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

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

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

מצב worklet

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

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

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

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

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

האפשרויות העומדות לרשותך:

• צריך להפחית את עומס העבודה על תרשים האודיו על ידי שימוש בפחות AudioNode מופעים.
• הפחתת עומס העבודה של הקוד בAudioWorkletProcessor.
• להאריך את זמן האחזור הבסיסי של AudioContext.

דוגמה 2: איסוף אשפה משמעותי בשרשור worklet

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

האפשרויות העומדות לרשותך:

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

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

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

האפשרויות העומדות לרשותך:

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

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

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

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

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

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

בורר הקשר

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

מפקחי נכסים

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

הכלי להמחשה של הגרף

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

מעקב ביצועים

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

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

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

אפשר להפעיל איסוף אשפה באופן ידני על ידי לחיצה על סמל פח האשפה.

החלונית Legacy WebAudio DevTools

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

סיכום

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

צילום: ג'ונתן ולסקז ב-UnFlood