Membuat profil aplikasi Audio Web di Chrome

Pelajari cara membuat profil performa aplikasi Web Audio di Chrome menggunakan about://tracing dan Audion (ekstensi WebAudio di Chrome DevTools).

Hongchan Choi

Anda mendapatkan artikel ini mungkin karena mengembangkan aplikasi yang menggunakan Web Audio API dan mengalami gangguan yang tidak terduga seperti suara bising dari output, atau Anda mendengar sesuatu yang tidak terduga. Anda mungkin sudah terlibat dalam diskusi crbug.com dan engineer Chrome meminta Anda untuk mengupload "pelacakan data" atau melihat ke dalam visualisasi grafik. Artikel ini menunjukkan cara mendapatkan informasi yang relevan sehingga kami dapat memahami suatu masalah dan pada akhirnya memperbaiki masalah yang mendasarinya.

Alat profiling Audio Web

Ada dua alat yang akan membantu Anda saat membuat profil Web Audio, about://tracing dan ekstensi WebAudio di Chrome DevTools.

Kapan Anda menggunakan about://tracing?

Ketika "gangguan" misterius terjadi. Membuat profil aplikasi dengan alat pelacakan akan memberi Anda insight tentang:

• Irisan waktu yang dihabiskan oleh panggilan fungsi tertentu pada berbagai thread
• Waktu callback audio di tampilan linimasa

Notifikasi ini biasanya menampilkan batas waktu callback audio yang terlewat atau pembersihan sampah memori besar yang dapat menyebabkan gangguan audio yang tidak terduga. Informasi ini berguna untuk memahami masalah yang mendasarinya, sehingga engineer Chromium akan sering menanyakannya terutama jika reproduksi lokal tidak memungkinkan. Petunjuk umum untuk perekaman aktivitas tersedia di sini.

Kapan Anda menggunakan ekstensi Web Audio DevTools?

Saat Anda ingin memvisualisasikan grafik audio dan memantau performa perender audio secara real time. Grafik audio, jaringan objek AudioNode untuk membuat dan menyintesis streaming audio, sering kali menjadi kompleks, tetapi topologi grafik tidak jelas karena didesain. (Web Audio API tidak memiliki fitur untuk introspeksi node/grafik.) Beberapa perubahan terjadi dalam grafik dan sekarang Anda mendengar senyap. Selanjutnya, saatnya melakukan proses debug dengan memprosesnya. Tidak pernah mudah, dan menjadi lebih sulit jika Anda memiliki grafik audio yang lebih besar. Ekstensi DevTools Web Audio dapat membantu Anda dengan memvisualisasikan grafik.

Dengan ekstensi ini, Anda dapat memantau perkiraan kapasitas render yang berjalan, yang menunjukkan performa perender audio web selama anggaran render yang ditentukan (misalnya, sekitar 2,67 md @ 48 KHz). Jika kapasitasnya mendekati 100 persen, itu berarti aplikasi Anda kemungkinan akan mengalami gangguan karena perender gagal menyelesaikan pekerjaan dalam anggaran yang ditentukan.

Gunakan about://tracing

Cara mengambil data rekaman aktivitas

Petunjuk yang ditulis di bawah ini ditujukan untuk Chrome 80 dan yang lebih baru.

Untuk hasil terbaik, tutup semua tab dan jendela lain, lalu nonaktifkan ekstensi. Atau, Anda dapat meluncurkan instance Chrome baru atau menggunakan build lain dari saluran rilis yang berbeda (misalnya, Beta atau Canary). Setelah browser siap, ikuti langkah-langkah di bawah:

1. Buka aplikasi (halaman web) di tab.
2. Buka tab lain dan buka about://tracing.
3. Tekan tombol Rekam dan pilih Pilih setelan secara manual.
4. Tekan tombol None di bagian Record Category dan Disabled by Default Kategori.
5. Di bagian Record Category, pilih opsi berikut:
   • audio
   • blink_gc
   • media
   • v8.execute (jika Anda tertarik dengan performa kode JS AudioWorklet)
   • webaudio
6. Di bagian Disabled by Default Category, pilih opsi berikut:
   • audio-worklet (jika Anda tertarik dengan tempat dimulainya rangkaian pesan AudioWorklet)
   • webaudio.audionode (jika Anda memerlukan rekaman aktivitas mendetail untuk setiap AudioNode)
7. Tekan tombol Record di bagian bawah.
8. Kembali ke tab aplikasi Anda dan ulangi langkah-langkah yang memicu masalah tersebut.
9. Jika Anda memiliki data rekaman aktivitas yang memadai, kembali ke tab pelacakan, lalu tekan Stop.

10. Tab perekaman aktivitas akan memvisualisasikan hasilnya.

    

11. Tekan Simpan untuk menyimpan data rekaman aktivitas.

Cara menganalisis data rekaman aktivitas

Data rekaman aktivitas memvisualisasikan cara mesin audio web Chrome merender audio. Perender memiliki dua mode render yang berbeda: Mode sistem operasi dan Mode Worklet. Setiap mode menggunakan model threading yang berbeda, sehingga hasil pelacakan juga berbeda.

Mode sistem operasi

Dalam mode sistem operasi, thread AudioOutputDevice menjalankan semua kode audio web. AudioOutputDevice adalah thread prioritas real-time yang berasal dari Layanan Audio browser yang digerakkan oleh jam hardware audio. Jika Anda melihat ketidakteraturan dari data rekaman aktivitas di jalur ini, artinya waktu callback dari perangkat mungkin jitter. Kombinasi Linux dan Pulse Audio diketahui memiliki masalah ini. Lihat masalah Chromium berikut untuk detail selengkapnya: #825823, #864463.

Mode worklet

Dalam Mode Worklet, yang ditandai dengan satu lompatan thread dari AudioOutputDevice ke thread AudioWorklet, Anda akan melihat rekaman aktivitas yang disejajarkan dengan baik di dua jalur thread seperti yang ditunjukkan di bawah. Saat worklet diaktifkan, semua operasi audio web akan dirender oleh thread AudioWorklet. Thread ini saat ini bukan prioritas real-time. Ketidakteraturan umum di sini adalah blok besar yang disebabkan oleh pembersihan sampah memori atau tenggat waktu render yang terlewat. Kedua kasus ini dapat menyebabkan gangguan dalam streaming audio.

Dalam kedua kasus tersebut, data pelacakan yang ideal ditandai dengan pemanggilan callback perangkat audio yang selaras dengan baik dan tugas render yang diselesaikan dengan baik dalam anggaran render yang diberikan. Dua screenshot di atas adalah contoh yang bagus dari data pelacakan yang ideal.

Belajar dari contoh di dunia nyata

Contoh 1: Tugas render yang melebihi anggaran render

Screenshot di bawah ini (masalah Chromium #796330) adalah contoh umum saat kode di AudioWorkletProcessor menghabiskan waktu terlalu lama dan melampaui anggaran render yang ditentukan. Pengaturan waktu callback berperilaku dengan baik, tetapi panggilan fungsi pemrosesan audio Web Audio API gagal menyelesaikan pekerjaan sebelum callback perangkat berikutnya.

Opsi Anda:

• Kurangi beban kerja grafik audio dengan menggunakan lebih sedikit instance AudioNode.
• Kurangi beban kerja kode Anda di AudioWorkletProcessor.
• Tingkatkan latensi dasar AudioContext.

Contoh 2: Pembersihan sampah memori yang signifikan pada thread worklet

Tidak seperti thread rendering audio sistem operasi, pembersihan sampah memori dikelola di thread worklet. Artinya, jika kode Anda melakukan alokasi/dealokasi memori (mis. array baru), kode tersebut pada akhirnya akan memicu pembersihan sampah memori yang memblokir thread secara sinkron. Jika beban kerja operasi audio web dan pembersihan sampah memori lebih besar dari anggaran render yang ditentukan, akan terjadi gangguan pada streaming audio. Screenshot berikut adalah contoh ekstrim dari kasus ini.

Opsi Anda:

• Alokasikan memori di awal dan gunakan kembali jika memungkinkan.
• Gunakan pola desain yang berbeda berdasarkan SharedArrayBuffer. Meskipun ini bukan solusi yang sempurna, beberapa aplikasi audio web menggunakan pola serupa dengan SharedArrayBuffer untuk menjalankan kode audio intensif. Contoh:
  • Pola Desain Worklet Audio

Contoh 3: Callback perangkat audio jittery dari AudioOutputDevice

Pengaturan waktu yang tepat dari callback audio adalah hal yang paling penting untuk audio web. Ini harus menjadi jam yang paling tepat di sistem Anda. Jika sistem operasi atau subsistem audionya tidak dapat menjamin pengaturan waktu callback yang solid, semua operasi berikutnya akan terpengaruh. Gambar berikut adalah contoh callback audio jittery. Dibandingkan dengan dua gambar sebelumnya, interval antara setiap callback sangat bervariasi.

Opsi Anda:

• Tingkatkan ukuran buffer callback audio sistem dengan menyesuaikan opsi latencyHint.
• Jika Anda menemukan masalah, laporkan masalah di crbug.com dengan data rekaman aktivitas.

Menggunakan ekstensi Web Audio DevTools

Anda juga bisa menggunakan ekstensi DevTools yang dirancang khusus untuk Web Audio API. Tidak seperti alat pelacakan, fitur ini memberikan pemeriksaan grafik dan metrik performa secara real time.

Ekstensi ini harus diinstal dari Chrome Web Store.

Setelah penginstalan, Anda dapat mengakses panel dengan membuka Chrome DevTools dan mengklik "Web Audio" di menu atas.

Panel Audio Web memiliki empat komponen: pemilih konteks, pemeriksa properti, visualizer grafik, dan monitor performa.

Pemilih Konteks

Karena halaman dapat memiliki beberapa objek BaseAudioContext, menu drop-down ini memungkinkan Anda memilih konteks yang ingin diperiksa. Anda juga dapat memicu pembersihan sampah memori secara manual dengan mengklik ikon tempat sampah di sebelah kiri.

Pemeriksa Properti

Panel samping menampilkan berbagai properti konteks yang dipilih pengguna atau AudioNode. Pemeriksaan nilai dinamis di AudioParam tidak didukung.

Visualizer Grafik

Tampilan ini merender topologi grafik saat ini dari konteks yang dipilih pengguna. Visualisasi ini berubah secara dinamis secara real time. Dengan mengklik elemen dalam visualisasi, Anda dapat memeriksa informasi mendetail tentang pemeriksa properti.

Pemantauan Performa

Status bar di bagian bawah hanya aktif jika BaseAudioContext yang dipilih adalah AudioContext, yang berjalan secara real-time. Batang ini menampilkan kualitas streaming audio instan dari AudioContext yang dipilih dan diperbarui setiap detik. Halaman ini memberikan informasi berikut:

• Callback interval (ms): Menampilkan rata-rata/varian tertimbang interval callback. Idealnya, nilai rata-rata harus stabil dan varians harus mendekati nol. Jika Anda melihat varians yang besar, artinya fungsi callback audio level sistem memiliki pengaturan waktu yang tidak stabil, yang dapat menyebabkan kualitas streaming audio yang buruk. (Lihat contoh 3 di atas.)

• Kapasitas Render (persen): Jika kapasitas mendekati 100 persen, artinya perender melakukan terlalu banyak hal untuk anggaran render yang ditentukan, sehingga Anda harus mempertimbangkan untuk melakukan lebih sedikit (misalnya, menggunakan lebih sedikit objek AudioNodes dalam grafik).

Anda dapat memicu pembersih sampah memori secara manual dengan mengklik ikon tempat sampah.

Panel WebAudio DevTools lama

Ekstensi sekarang menjadi metode yang direkomendasikan oleh tim Chrome Web Audio, tetapi panel WebAudio DevTools lama juga tersedia. Anda dapat mengakses panel ini dengan mengklik menu "tiga titik" di pojok kanan atas DevTools, lalu membuka More tools, dan WebAudio.

Kesimpulan

Men-debug audio adalah hal yang sulit. Men-debug audio di browser bahkan lebih sulit. Namun, alat ini dapat meringankan masalah dengan memberi Anda insight yang berguna tentang performa kode audio web. Namun, dalam beberapa kasus, Anda mungkin menemukan masalah di Chrome atau ekstensi. Selanjutnya, jangan takut untuk melaporkan bug di crbug.com atau di issue tracker ekstensi.

Foto oleh Jonathan Velasquez di Unsplash