การทำโปรไฟล์แอป Web Audio ใน Chrome

ดูวิธีวิเคราะห์ประสิทธิภาพของแอป Web Audio ใน Chrome โดยใช้ about://tracing และ Audion (ส่วนขยาย WebAudio ในเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome)

คุณอาจอ่านบทความนี้เนื่องจากกำลังพัฒนาแอปที่ใช้ Web Audio API และพบปัญหาขัดข้องที่ไม่คาดคิด เช่น เสียงป๊อปจากเอาต์พุต หรือได้ยินเสียงที่ไม่คาดคิด คุณอาจมีส่วนร่วมในการสนทนาใน crbug.com อยู่แล้ว และวิศวกรของ Chrome ขอให้คุณอัปโหลด "ข้อมูลการติดตาม" หรือดูภาพกราฟ บทความนี้จะแสดงวิธีรับข้อมูลที่เกี่ยวข้องเพื่อให้เราเข้าใจปัญหาและแก้ไขปัญหาพื้นฐานได้

เครื่องมือวิเคราะห์ Web Audio

มีเครื่องมือ 2 รายการที่จะช่วยคุณเมื่อสร้างโปรไฟล์เสียงบนเว็บ ซึ่งได้แก่ about://tracing และส่วนขยาย WebAudio ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

คุณใช้ about://tracing เมื่อใด

เมื่อเกิด "ข้อบกพร่อง" ลึกลับ การสร้างโปรไฟล์แอปด้วยเครื่องมือการติดตามจะให้ข้อมูลเชิงลึกเกี่ยวกับสิ่งต่อไปนี้

• ช่วงเวลาที่ใช้โดยคําเรียกฟังก์ชันที่เฉพาะเจาะจงในชุดข้อความต่างๆ
• การกำหนดเวลาการโทรกลับด้วยเสียงในมุมมองไทม์ไลน์

โดยปกติจะแสดงกำหนดเวลาการโทรกลับด้วยเสียงที่พลาดไปหรือการรวบรวมขยะจำนวนมากที่อาจทำให้เกิดข้อบกพร่องของเสียงที่ไม่คาดคิด ข้อมูลนี้มีประโยชน์ต่อการทําความเข้าใจปัญหาพื้นฐาน ดังนั้นวิศวกร Chromium จึงมักจะถามข้อมูลนี้ โดยเฉพาะเมื่อการจำลองปัญหาในเครื่องไม่สามารถทำได้ ดูวิธีการทั่วไปในการติดตามได้ที่นี่

คุณควรใช้ส่วนขยาย Web Audio DevTools เมื่อใด

เมื่อคุณต้องการแสดงภาพกราฟเสียงและตรวจสอบประสิทธิภาพของโปรแกรมแสดงผลเสียงแบบเรียลไทม์ กราฟเสียง ซึ่งเป็นเครือข่ายออบเจ็กต์ AudioNode เพื่อสร้างและสังเคราะห์สตรีมเสียงมักจะมีความซับซ้อน แต่โทโปโลยีของกราฟจะมีความทึบตามการออกแบบ (Web Audio API ไม่มีฟีเจอร์สําหรับการตรวจสอบโค้ด/กราฟ) เกิดการเปลี่ยนแปลงบางอย่างในกราฟและตอนนี้คุณได้ยินเสียงเงียบ จากนั้นให้เริ่มแก้ไขข้อบกพร่องด้วยการฟัง ซึ่งไม่ใช่เรื่องง่ายและยิ่งยากขึ้นเมื่อคุณมีกราฟเสียงขนาดใหญ่ ส่วนขยาย Web Audio ใน DevTools ช่วยให้คุณเห็นภาพกราฟได้

ส่วนขยายนี้ช่วยให้คุณตรวจสอบกำลังในการแสดงผลโดยประมาณแบบเรียลไทม์ได้ ซึ่งจะระบุประสิทธิภาพของโปรแกรมแสดงผลเสียงบนเว็บตามงบประมาณการแสดงผลที่กำหนด (เช่น ประมาณ 2.67 มิลลิวินาทีที่ 48KHz) หากความจุใกล้ 100 เปอร์เซ็นต์ แสดงว่าแอปมีแนวโน้มที่จะเกิดข้อบกพร่องเนื่องจากโปรแกรมแสดงผลทำงานไม่เสร็จภายในงบประมาณที่กำหนด

ใช้ about://tracing

วิธีบันทึกข้อมูลการติดตาม

วิธีการด้านล่างนี้ใช้กับ Chrome 80 ขึ้นไป

ปิดแท็บและหน้าต่างอื่นๆ ทั้งหมด รวมถึงปิดใช้ส่วนขยายเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด หรือจะเปิดอินสแตนซ์ใหม่ของ Chrome หรือใช้บิลด์อื่นๆ จากเวอร์ชันการเผยแพร่ที่แตกต่างกัน (เช่น เบต้าหรือ Canary) ก็ได้ เมื่อเตรียมเบราว์เซอร์เรียบร้อยแล้ว ให้ทำตามขั้นตอนด้านล่าง

1. เปิดแอปพลิเคชัน (หน้าเว็บ) ในแท็บ
2. เปิดแท็บอื่นแล้วไปที่ about://tracing
3. กดปุ่มบันทึก แล้วเลือกเลือกการตั้งค่าด้วยตนเอง
4. กดปุ่มไม่มีทั้งในส่วนหมวดหมู่บันทึกและหมวดหมู่ที่ปิดใช้โดยค่าเริ่มต้น
5. ในส่วนหมวดหมู่ระเบียน ให้เลือกรายการต่อไปนี้
   • audio
   • blink_gc
   • media
   • v8.execute (หากสนใจประสิทธิภาพโค้ด JS ของ AudioWorklet)
   • webaudio
6. ในส่วนหมวดหมู่ที่ปิดใช้โดยค่าเริ่มต้น ให้เลือกรายการต่อไปนี้
   • audio-worklet (หากต้องการดูจุดเริ่มต้นของชุดข้อความ AudioWorklet)
   • webaudio.audionode (หากต้องการการติดตามโดยละเอียดสำหรับ AudioNode แต่ละรายการ)
7. กดปุ่มบันทึกที่ด้านล่าง
8. กลับไปที่แท็บการสมัครและทําตามขั้นตอนที่ทําให้เกิดปัญหาอีกครั้ง
9. เมื่อได้ข้อมูลการติดตามเพียงพอแล้ว ให้กลับไปที่แท็บการติดตาม แล้วกดหยุด

10. แท็บการติดตามจะแสดงผลลัพธ์เป็นภาพ

    

11. กดบันทึกเพื่อบันทึกข้อมูลการติดตาม

วิธีวิเคราะห์ข้อมูลการติดตาม

ข้อมูลการติดตามจะแสดงภาพว่าเครื่องมือเสียงบนเว็บของ Chrome แสดงผลเสียงอย่างไร โปรแกรมแสดงผลมีโหมดการแสดงผล 2 โหมด ได้แก่ โหมดระบบปฏิบัติการและโหมดเวิร์กเลต โหมดแต่ละโหมดใช้รูปแบบการแยกชุดข้อความที่แตกต่างกัน ผลลัพธ์การติดตามจึงแตกต่างกันด้วย

โหมดระบบปฏิบัติการ

ในโหมดระบบปฏิบัติการ เธรด AudioOutputDevice จะเรียกใช้โค้ดเสียงบนเว็บทั้งหมด AudioOutputDevice คือเธรดที่มีลําดับความสําคัญแบบเรียลไทม์ซึ่งมาจากบริการเสียงของเบราว์เซอร์ที่ขับเคลื่อนโดยนาฬิกาฮาร์ดแวร์ของเสียง หากเห็นความผิดปกติจากข้อมูลการติดตามในเลนนี้ แสดงว่าเวลาการติดต่อกลับจากอุปกรณ์อาจมีความผันผวน เป็นที่ทราบกันดีว่าการใช้ Linux ร่วมกับ Pulse Audio จะทำให้เกิดปัญหานี้ ดูรายละเอียดเพิ่มเติมเกี่ยวกับปัญหา Chromium ต่อไปนี้ #825823, #864463

โหมดเวิร์กเลต

ในโหมดเวิร์กเลต ซึ่งมีลักษณะการกระโดดของ 1 เธรดจาก AudioOutputDevice ไปยังเธรด AudioWorklet คุณควรเห็นร่องรอยที่สอดคล้องกับเลนของเธรด 2 เลนดังที่แสดงด้านล่าง เมื่อเปิดใช้งานเวิร์กเล็ต การดำเนินการเสียงบนเว็บทั้งหมดจะแสดงผลโดยเธรด AudioWorklet ขณะนี้ชุดข้อความนี้ไม่ใช่ชุดข้อความสำคัญแบบเรียลไทม์ ความผิดปกติที่พบบ่อยคือบล็อกขนาดใหญ่ที่เกิดจากการเก็บขยะหรือการพลาดกำหนดเวลาการแสดงผล ทั้ง 2 กรณีทำให้สตรีมเสียงขัดข้อง

ในกรณีทั้ง 2 รูปแบบ ข้อมูลการติดตามที่เหมาะสมจะมีลักษณะเป็นการเรียกใช้การเรียกกลับของอุปกรณ์เสียงที่สอดคล้องกับกันเป็นอย่างดี และงานแสดงผลเสร็จสมบูรณ์ภายในงบประมาณการแสดงผลที่กำหนด ภาพหน้าจอ 2 ภาพด้านบนเป็นตัวอย่างที่ดีของข้อมูลการติดตามที่เหมาะ

เรียนรู้จากตัวอย่างในชีวิตจริง

ตัวอย่างที่ 1: งานเรนเดอร์เกินงบประมาณการเรนเดอร์

ภาพหน้าจอด้านล่าง (ปัญหา Chromium #796330) เป็นตัวอย่างทั่วไปของกรณีที่โค้ดใน AudioWorkletProcessor ใช้เวลานานเกินไปและเกินงบประมาณการแสดงผลที่กำหนด ช่วงเวลาการเรียกกลับทำงานได้ดี แต่การเรียกใช้ฟังก์ชันการประมวลผลเสียงของ Web Audio API ทำงานไม่เสร็จสิ้นก่อนการเรียกกลับของอุปกรณ์ครั้งถัดไป

ตัวเลือกของคุณมีดังนี้

• ลดภาระงานของกราฟเสียงโดยใช้อินสแตนซ์ AudioNode น้อยลง
• ลดภาระงานของโค้ดใน AudioWorkletProcessor
• เพิ่มเวลาในการตอบสนองพื้นฐานของ AudioContext

ตัวอย่างที่ 2: การรวบรวมขยะจำนวนมากในเธรดของเวิร์กเลต

ระบบจะจัดการการเก็บขยะในเธรดเวิร์กเลต ซึ่งแตกต่างจากเธรดการแสดงผลเสียงของระบบปฏิบัติการ ซึ่งหมายความว่าหากโค้ดของคุณจัดสรร/ยกเลิกการจัดสรรหน่วยความจำ (เช่น อาร์เรย์ใหม่) ในที่สุดก็จะทริกเกอร์การเก็บขยะซึ่งบล็อกเธรดแบบซิงค์ หากปริมาณงานของการดำเนินการกับเสียงบนเว็บและการรวบรวมขยะมากกว่างบประมาณการเรนเดอร์ที่กำหนดไว้ จะทำให้สตรีมเสียงขัดข้อง ภาพหน้าจอต่อไปนี้เป็นตัวอย่างที่เห็นได้ชัดสุดๆ ของกรณีนี้

ตัวเลือกของคุณมีดังนี้

• จัดสรรหน่วยความจําล่วงหน้าและใช้ซ้ำเมื่อเป็นไปได้
• ใช้รูปแบบการออกแบบที่แตกต่างกันตาม SharedArrayBuffer แม้ว่าวิธีนี้จะไม่สมบูรณ์แบบ แต่แอปเสียงบนเว็บหลายแอปใช้รูปแบบที่คล้ายกับ SharedArrayBuffer เพื่อเรียกใช้โค้ดเสียงที่ทำงานหนัก ตัวอย่าง
  • รูปแบบการออกแบบเวิร์กเลตเสียง

ตัวอย่างที่ 3: การติดต่อกลับของอุปกรณ์เสียงที่กระตุกจาก AudioOutputDevice

การกำหนดเวลาการเรียกกลับเสียงที่แม่นยำเป็นสิ่งที่สำคัญที่สุดสำหรับเสียงบนเว็บ ซึ่งควรเป็นนาฬิกาที่แม่นยำที่สุดในระบบ หากระบบปฏิบัติการหรือระบบย่อยด้านเสียงไม่สามารถรับประกันเวลาการเรียกกลับที่แน่นอน การดำเนินการทั้งหมดที่ตามมาจะได้รับผลกระทบ รูปภาพต่อไปนี้เป็นตัวอย่างของ Callback เสียงที่กระตุก เมื่อเทียบกับ 2 รูปภาพก่อนหน้า ช่วงเวลาระหว่างการเรียกกลับแต่ละครั้งจะแตกต่างกันอย่างมาก

ตัวเลือกของคุณมีดังนี้

• เพิ่มขนาดบัฟเฟอร์ของ Callback เสียงของระบบโดยการปรับตัวเลือก latencyHint
• หากพบปัญหา ให้รายงานปัญหาใน crbug.com พร้อมข้อมูลการติดตาม

ใช้ส่วนขยายเครื่องมือสำหรับนักพัฒนาเว็บของ Web Audio

นอกจากนี้ คุณยังใช้ส่วนขยายเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่ออกแบบมาเพื่อ Web Audio API โดยเฉพาะได้ด้วย ซึ่งแตกต่างจากเครื่องมือการติดตามตรงที่เครื่องมือนี้ให้การตรวจสอบกราฟและเมตริกประสิทธิภาพแบบเรียลไทม์

คุณต้องติดตั้งส่วนขยายนี้จาก Chrome เว็บสโตร์

หลังจากติดตั้งแล้ว คุณจะเข้าถึงแผงได้โดยเปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แล้วคลิก "Web Audio" ในเมนูด้านบน

แผงเสียงบนเว็บประกอบด้วยคอมโพเนนต์ 4 รายการ ได้แก่ ตัวเลือกบริบท เครื่องมือตรวจสอบพร็อพเพอร์ตี้ โปรแกรมแสดงภาพกราฟ และเครื่องมือตรวจสอบประสิทธิภาพ

ตัวเลือกบริบท

เนื่องจากหน้าเว็บอาจมีออบเจ็กต์ BaseAudioContext หลายรายการ เมนูแบบเลื่อนลงนี้จึงช่วยให้คุณเลือกบริบทที่ต้องการตรวจสอบได้ นอกจากนี้ คุณยังเรียกเก็บขยะด้วยตนเองได้โดยคลิกไอคอนถังขยะทางด้านซ้าย

ผู้ตรวจสอบที่พัก

แผงด้านข้างจะแสดงพร็อพเพอร์ตี้ต่างๆ ของบริบทหรือ AudioNode ที่ผู้ใช้เลือก ระบบไม่รองรับการตรวจสอบค่าแบบไดนามิกใน AudioParam

เครื่องมือแสดงภาพกราฟ

มุมมองนี้จะแสดงผลโทโปโลยีกราฟปัจจุบันของบริบทที่ผู้ใช้เลือก ภาพจําลองนี้จะเปลี่ยนแปลงแบบไดนามิกแบบเรียลไทม์ เมื่อคลิกองค์ประกอบในการแสดงภาพ คุณจะตรวจสอบข้อมูลโดยละเอียดในเครื่องมือตรวจสอบพร็อพเพอร์ตี้ได้

เครื่องมือตรวจสอบประสิทธิภาพ

แถบสถานะที่ด้านล่างจะทำงานก็ต่อเมื่อ BaseAudioContext ที่เลือกเป็น AudioContext ซึ่งทำงานแบบเรียลไทม์ แถบนี้แสดงคุณภาพสตรีมเสียง ณ ขณะนั้นของ AudioContext ที่เลือก และอัปเดตทุกวินาที โดยจะมีข้อมูลต่อไปนี้

• ระยะเวลาของ Callback (มิลลิวินาที): แสดงค่าเฉลี่ยถ่วงน้ำหนัก/ความแปรปรวนของระยะเวลาของ Callback ตามหลักการแล้ว ค่าเฉลี่ยควรคงที่และค่าความแปรปรวนควรใกล้เคียงกับ 0 หากเห็นความแปรปรวนสูง แสดงว่าฟังก์ชันการเรียกกลับเสียงระดับระบบมีการกำหนดเวลาที่ไม่เสถียร ซึ่งอาจทำให้คุณภาพสตรีมเสียงไม่ดี (ดูตัวอย่างที่ 3 ด้านบน)

• ความสามารถในการแสดงผล (เปอร์เซ็นต์): เมื่อความสามารถใกล้ถึง 100 เปอร์เซ็นต์ หมายความว่าโปรแกรมแสดงผลทำงานมากเกินไปสำหรับงบประมาณการแสดงผลที่กำหนด ดังนั้นคุณควรพิจารณาลดจำนวน (เช่น ใช้วัตถุ AudioNodes ในกราฟน้อยลง)

คุณเรียกใช้โปรแกรมเก็บขยะด้วยตนเองได้โดยคลิกไอคอนถังขยะ

แผงเครื่องมือสำหรับนักพัฒนาเว็บของ WebAudio รุ่นเดิม

ตอนนี้ทีม Chrome Web Audio แนะนำให้ใช้ส่วนขยายนี้ แต่แผงเครื่องมือสำหรับนักพัฒนาเว็บ WebAudio รุ่นเดิมก็ยังมีให้ใช้งานด้วย คุณสามารถเข้าถึงแผงนี้ได้โดยการคลิกเมนู "จุด 3 จุด" ที่มุมขวาบนของเครื่องมือสำหรับนักพัฒนาเว็บ จากนั้นไปที่เครื่องมือเพิ่มเติม แล้วไปที่ WebAudio

บทสรุป

การแก้ไขข้อบกพร่องของเสียงเป็นเรื่องยาก การแก้ไขข้อบกพร่องของเสียงในเบราว์เซอร์นั้นทำได้ยากกว่า อย่างไรก็ตาม เครื่องมือเหล่านี้ช่วยบรรเทาปัญหาได้ด้วยการให้ข้อมูลเชิงลึกที่เป็นประโยชน์เกี่ยวกับประสิทธิภาพของโค้ดเสียงบนเว็บ อย่างไรก็ตาม ในบางกรณี คุณอาจพบปัญหาใน Chrome หรือส่วนขยาย โปรดรายงานข้อบกพร่องใน crbug.com หรือในเครื่องมือติดตามปัญหาส่วนขยาย

รูปภาพโดย Jonathan Velasquez ใน Unsplash