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).

Anda membuka dokumen ini mungkin karena Anda sedang mengembangkan aplikasi yang menggunakan Web Audio API dan mengalami gangguan yang tidak terduga, seperti suara letupan dari output, atau Anda mendengar sesuatu yang tidak terduga. Anda mungkin sudah terlibat dalam diskusi crbug.com dan engineer Chrome meminta Anda mengupload "data rekaman aktivitas" atau melihat visualisasi grafik.

Pelajari cara mendapatkan informasi yang relevan, sehingga kami dapat memahami masalahnya dan akhirnya memperbaiki masalah yang mendasarinya.

Alat pembuatan profil Web Audio

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

Kapan Anda menggunakan about://tracing?

Saat "glitch" misterius terjadi. Membuat profil aplikasi dengan alat pelacakan memberi Anda insight tentang:

• Slice waktu yang digunakan oleh panggilan fungsi tertentu di thread yang berbeda
• Waktu callback audio dalam tampilan linimasa

Error ini biasanya menunjukkan batas waktu panggilan balik 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 memintanya, terutama jika reproduksi lokal tidak memungkinkan. Tinjau petunjuk untuk merekam aktivitas secara umum.

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 menghasilkan dan menyintesis aliran audio, sering kali menjadi rumit, tetapi topologi grafik dirancang agar tidak transparan. (Web Audio API tidak memiliki fitur untuk introspeksi node/grafik.) Beberapa perubahan terjadi di grafik Anda dan sekarang Anda mendengar keheningan. Kemudian, saatnya melakukan proses debug dengan mendengarkan. Hal ini tidak pernah mudah, dan akan menjadi lebih sulit jika Anda memiliki grafik audio yang lebih besar. Ekstensi Web Audio DevTools dapat membantu Anda dengan memvisualisasikan grafik.

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

Gunakan about://tracing

Untuk hasil terbaik, tutup semua tab dan jendela lainnya, 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:

1. Buka aplikasi (halaman web) Anda di tab.
2. Buka tab lain, lalu buka about://tracing.
3. Tekan tombol Rekam, lalu pilih Pilih setelan secara manual.
4. Tekan tombol Tidak Ada di bagian Kategori Rekaman dan Kategori yang Dinonaktifkan Secara Default.
5. Di bagian Record Categories, pilih berikut ini:
   • audio
   • blink_gc
   • media
   • v8.execute (jika Anda tertarik dengan performa kode JS AudioWorklet)
   • webaudio
6. Di bagian Kategori Nonaktif Secara Default, pilih yang berikut:
   • audio-worklet (jika Anda tertarik dengan awal rangkaian pesan AudioWorklet)
   • webaudio.audionode (jika Anda memerlukan rekaman aktivitas mendetail untuk setiap AudioNode)
7. Tekan tombol Rekam di bagian bawah.
8. Kembali ke tab aplikasi Anda dan ulangi langkah-langkah yang memicu masalah.
9. Setelah Anda memiliki data rekaman aktivitas yang cukup, kembali ke tab perekaman aktivitas dan tekan Berhenti.

10. Tab pelacakan akan memvisualisasikan hasilnya.

    

11. Tekan Simpan untuk menyimpan data pelacakan.

Cara menganalisis data rekaman aktivitas

Data rekaman aktivitas memvisualisasikan cara mesin audio web Chrome merender audio. Renderer memiliki dua mode rendering 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 didorong oleh clock hardware audio. Jika Anda melihat ketidakberaturan dari data rekaman aktivitas di jalur ini, berarti waktu callback dari perangkat mungkin tidak stabil. Kombinasi Linux dan Pulse Audio diketahui memiliki masalah ini.

Lihat masalah Chromium berikut untuk mengetahui 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 selaras dengan baik di dua jalur thread. Saat worklet diaktifkan, semua operasi web audio dirender oleh thread AudioWorklet. Thread ini bukan prioritas real-time.

Ketidakberaturan umum di sini adalah blok besar yang disebabkan oleh pembersihan sampah memori atau batas waktu rendering yang terlewat. Kedua kasus tersebut menyebabkan gangguan pada aliran audio.

Dalam kedua kasus tersebut, data rekaman aktivitas yang ideal ditandai dengan pemanggilan callback perangkat audio yang selaras dengan baik dan tugas rendering yang diselesaikan dengan baik dalam anggaran rendering yang diberikan. Kedua screenshot tersebut adalah contoh yang bagus dari data rekaman aktivitas yang ideal.

Belajar dari contoh dunia nyata

Contoh 1: Tugas rendering yang melampaui anggaran rendering

Screenshot di bawah (masalah Chromium #796330) adalah contoh umum saat kode di AudioWorkletProcessor membutuhkan waktu terlalu lama dan melebihi anggaran render tertentu. Waktu callback berfungsi dengan baik, tetapi panggilan fungsi pemrosesan audio Web Audio API gagal menyelesaikan tugas 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 sebesar AudioContext.

Contoh 2: Pengumpulan sampah yang signifikan pada thread worklet

Tidak seperti pada thread rendering audio sistem operasi, pengumpulan sampah dikelola di thread worklet. Artinya, jika kode Anda melakukan alokasi/dealokasi memori (misalnya, array baru), pada akhirnya akan memicu pengumpulan sampah yang memblokir thread secara sinkron. Jika beban kerja operasi web audio dan pengumpulan sampah lebih besar daripada anggaran render tertentu, hal ini akan menyebabkan gangguan pada streaming audio. Screenshot berikut adalah contoh ekstrem 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 yang intensif. Contoh:
  • Pola Desain Audio Worklet

Contoh 3: Callback perangkat audio yang bergetar dari AudioOutputDevice

Waktu yang tepat untuk callback audio adalah hal yang paling penting untuk audio web. Ini harus menjadi clock yang paling presisi di sistem Anda. Jika sistem operasi atau subsistem audionya tidak dapat menjamin waktu callback yang solid, semua operasi berikutnya akan terpengaruh. Gambar berikut adalah contoh callback audio yang bergetar. 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 DevTools Web Audio

Anda juga dapat menggunakan ekstensi DevTools yang dirancang khusus untuk Web Audio API. Tidak seperti alat pelacakan, alat 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 Web Audio memiliki empat komponen: pemilih konteks, pemeriksa properti, visualisasi 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 pengumpulan sampah secara manual dengan mengklik ikon tempat sampah di sebelah kiri.

Pemeriksa Properti

Panel samping menampilkan berbagai properti konteks yang dipilih pengguna atau AudioNode. Memeriksa 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 dalam waktu real time. Dengan mengklik elemen dalam visualisasi, Anda dapat memeriksa informasi mendetail tentang pemeriksa properti.

Pemantau performa

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

• Interval callback (mdtk): Menampilkan rata-rata tertimbang atau varians interval callback. Idealnya, rata-rata harus stabil dan varians harus mendekati nol. Jika Anda melihat variasi yang besar, berarti fungsi callback audio tingkat sistem memiliki pengaturan waktu yang tidak stabil yang dapat menyebabkan kualitas streaming audio yang buruk. (Lihat contoh 3).

• Kapasitas rendering (persen): Jika kapasitas mendekati 100 persen, berarti perender melakukan terlalu banyak hal untuk anggaran rendering tertentu, jadi Anda harus mempertimbangkan untuk melakukan lebih sedikit hal (misalnya, menggunakan lebih sedikit objek AudioNodes dalam grafik).

Anda dapat memicu pengumpul sampah secara manual dengan mengklik ikon tempat sampah.

Panel DevTools WebAudio lama

Ekstensi ini kini menjadi metode yang direkomendasikan oleh tim Chrome Web Audio, tetapi panel DevTools WebAudio lama juga tersedia. Anda dapat mengakses panel ini dengan mengklik menu "tiga titik" di sudut kanan atas DevTools, lalu membuka Alat lainnya, lalu WebAudio.

Kesimpulan

Men-debug audio itu sulit. Men-debug audio di browser bahkan lebih sulit. Namun, alat ini dapat mengurangi kesulitan dengan memberikan insight yang berguna tentang performa kode audio web. Namun, dalam beberapa kasus, Anda mungkin menemukan masalah di Chrome atau ekstensi. Laporkan bug di crbug.com atau di issue tracker ekstensi.