Bu makaleye büyük olasılıkla şu dili kullanan bir uygulama geliştirdiğiniz için ulaştınız: Web Ses API’sı ve çıkıştan patlama sesleri gibi beklenmeyen aksaklıklar yaşadınız veya beklenmedik bir şey duyuyorsunuz. Zaten bir işin içinde olabilirsiniz. crbug.com tartışma ve bir Chrome mühendisi sizden “izleme verilerini” yüklemenizi veya grafik görselleştirmeye bakmanızı istedi. Bu makale, bir sorunu anlayabilmemiz ve nihayetinde temel sorunu çözebilmemiz için ilgili bilgileri nasıl elde edebileceğimizi gösterir.
Web Audio’nun profilini çıkarırken size yardımcı olacak iki araç vardır. about://tracing ve WebSes uzantı Chrome DevTools’ta.
ne zaman kullanıyorsun about://tracing? #
Gizemli “aksaklıklar” meydana geldiğinde. İzleme araçlarıyla uygulamanın profilini oluşturmak size şu konularda bilgi verir:
- Belirli işlev çağrıları tarafından harcanan zaman dilimleri farklı iş parçacığı üzerinde
- Sesli geri arama zamanlaması zaman çizelgesi görünümünde
Genellikle cevapsız sesli geri arama son tarihlerini veya beklenmeyen ses aksaklıklarına neden olabilecek büyük çöp toplamayı gösterir. Bu bilgi, altta yatan bir sorunu anlamak için kullanışlıdır, bu nedenle Chromium mühendisleri, özellikle yerel çoğaltma mümkün olmadığında bunu sık sık soracaktır. İzleme için genel talimatlar burada mevcuttur.
Web Audio DevTools uzantısını ne zaman kullanıyorsunuz? #
Ses grafiğini görselleştirmek ve ses oluşturucunun gerçek zamanlı olarak nasıl performans gösterdiğini izlemek istediğinizde. Ses grafiği, bir ağ AudioNode Bir ses akışı oluşturmak ve sentezlemek için nesneler, genellikle karmaşık hale gelir, ancak grafik topolojisi tasarım gereği opaktır. (Web Audio API, düğüm/grafik iç gözlemi için özelliklere sahip değildir.) Grafiğinizde bazı değişiklikler olur ve şimdi sessizliği duyarsınız. Ardından dinleyerek hata ayıklama zamanı. Asla kolay değildir ve daha büyük bir ses grafiğiniz olduğunda daha da zorlaşır. Web Audio DevTools uzantısı, grafiği görselleştirerek size yardımcı olabilir.
Bu uzantıyla, web ses oluşturucunun belirli bir işleme bütçesi üzerinden (örneğin yaklaşık 2,67 ms @ 48KHz) nasıl performans gösterdiğini gösteren işleme kapasitesinin çalışan bir tahminini izleyebilirsiniz. Kapasite yüzde 100’e yaklaşırsa bu, oluşturucunun verilen bütçeyle işi bitiremediği için uygulamanızın büyük olasılıkla hatalar üreteceği anlamına gelir.
Kullanmak about://tracing #
İzleme verileri nasıl yakalanır? #
Aşağıdaki yazılı talimatlar Chrome 80 ve sonrası içindir.
En iyi sonuçlar için diğer tüm sekmeleri ve pencereleri kapatın ve uzantıları devre dışı bırakın. Alternatif olarak, Chrome’un yeni bir örneğini başlat veya diğer yapıları kullanın farklı yayın kanalları (örn. Beta veya Kanarya). Tarayıcıyı hazır hale getirdikten sonra aşağıdaki adımları izleyin:
-
Uygulamanızı (web sayfası) bir sekmede açın.
-
Başka bir sekme açın ve şuraya gidin:
about://tracing. -
basın Kayıt düğmesine basın ve seçin Ayarları manuel olarak seç.
-
basın Hiçbiri düğmelerin her ikisi de Kayıt Kategorileri Ve Varsayılan Kategoriler Tarafından Devre Dışı Bırakıldı bölümler.
-
İçinde Kayıt Kategorileri bölümünde aşağıdakileri seçin:
audioblink_gcmediav8.execute(Eğer ilgileniyorsanızAudioWorkletJS kod performansı)webaudio
-
İçinde Varsayılan Kategoriler Tarafından Devre Dışı Bırakıldı bölümünde aşağıdakileri seçin:
audio-worklet(nerede olduğuyla ilgileniyorsanızAudioWorkletiş parçacığı başlar)webaudio.audionode(her biri için ayrıntılı ize ihtiyacınız varsaAudioNode)
-
basın Kayıt alttaki düğme.
-
Uygulama sekmenize geri dönün ve sorunu tetikleyen adımları tekrarlayın.
-
Yeterli izleme veriniz olduğunda, izleme sekmesine geri dönün ve düğmesine basın. Durmak.
-
İzleme sekmesi sonucu görselleştirir.
-
Basmak Kaydetmek izleme verilerini kaydetmek için.
İzleme verileri nasıl analiz edilir? #
İzleme verileri, Chrome’un web ses motorunun sesi nasıl işlediğini görselleştirir. Oluşturucunun iki farklı oluşturma modu vardır: İşletim sistemi modu Ve Worklet modu. Her mod farklı bir iş parçacığı modeli kullanır, dolayısıyla izleme sonuçları da farklılık gösterir.
İşletim sistemi modu #
İşletim sistemi modunda, AudioOutputDevice thread tüm web ses kodunu çalıştırır. bu AudioOutputDevice ses donanım saati tarafından yönetilen, tarayıcının Ses Hizmetinden kaynaklanan gerçek zamanlı bir öncelikli iş parçacığıdır. Bu şeritteki izleme verilerinden bir düzensizlik görürseniz bu, cihazdan gelen geri arama zamanlamasının gergin olabileceği anlamına gelir. Linux ve Pulse Audio kombinasyonunun bu sorunu yaşadığı bilinmektedir. Daha fazla ayrıntı için aşağıdaki Chromium sorunlarına bakın: #825823, #864463.
Worklet modu #
Bir iş parçacığı atlaması ile karakterize edilen Worklet Modunda AudioOutputDevice için AudioWorklet iplik, aşağıda gösterildiği gibi iki iş parçacığı şeridinde iyi hizalanmış izler görmelisiniz. Worklet etkinleştirildiğinde, tüm web ses işlemleri, AudioWorklet iplik. Bu ileti dizisi şu anda gerçek zamanlı bir öncelik değil. Buradaki yaygın düzensizlik, çöp toplama veya kaçırılan son teslim tarihlerinden kaynaklanan büyük bir bloktur. Her iki durum da ses akışında aksaklıklara yol açar.
Her iki durumda da, ideal izleme verileri, iyi hizalanmış ses cihazı geri arama çağrıları ve verilen işleme bütçesi dahilinde iyi bir şekilde tamamlanan işleme görevleri ile karakterize edilir. Yukarıdaki iki ekran görüntüsü, ideal izleme verilerinin harika örnekleridir.
Gerçek dünya örneklerinden öğrenme #
Örnek 1: Oluşturma bütçesini aşan işleme görevleri #
Aşağıdaki ekran görüntüsü (Krom sorunu #796330) kodun girildiği tipik bir örnektir. AudioWorkletProcessor çok uzun sürer ve belirli bir işleme bütçesinin ötesine geçer. Geri arama zamanlaması iyi ayarlanmış, ancak Web Ses API’sinin ses işleme işlevi çağrısı, bir sonraki cihaz geri aramasından önce işi tamamlayamadı.
Seçenekleriniz:
- Daha az kullanarak ses grafiğinin iş yükünü azaltın
AudioNodeörnekler. - Kodunuzun iş yükünü azaltın
AudioWorkletProcessor. - Temel gecikmeyi artırın
AudioContext.
Örnek 2: Worklet iş parçacığında önemli miktarda çöp toplama #
İşletim sistemi ses işleme iş parçacığından farklı olarak, çöp toplama iş parçası iş parçacığında yönetilir. Bu, kodunuz bellek ayırma/serbest bırakma (örneğin yeni diziler) yaparsa, sonunda iş parçacığını eşzamanlı olarak bloke eden bir çöp toplama işlemini tetikler. Web ses işlemlerinin ve çöp toplamanın iş yükü, belirli bir işleme bütçesinden daha büyükse, ses akışında aksaklıklara neden olur. Aşağıdaki ekran görüntüsü bu durumun uç bir örneğidir.
Seçenekleriniz:
- Belleği önceden ayırın ve mümkün olduğunda yeniden kullanın.
- dayalı farklı tasarım desenleri kullanın
SharedArrayBuffer. Bu mükemmel bir çözüm olmasa da, birkaç web ses uygulaması aşağıdakilerle benzer bir model kullanır:SharedArrayBufferyoğun ses kodunu çalıştırmak için. Örnekler:
Örnek 3: Titreşimli ses cihazı geri araması AudioOutputDevice #
Sesli geri aramanın kesin zamanlaması, web sesi için en önemli şeydir. Bu, sisteminizdeki en hassas saat olmalıdır. İşletim sistemi veya ses alt sistemi sağlam bir geri arama zamanlamasını garanti edemezse, sonraki tüm işlemler etkilenecektir. Aşağıdaki görüntü, titreşimli sesli geri arama örneğidir. Önceki iki görüntüyle karşılaştırıldığında, her geri arama arasındaki aralık önemli ölçüde değişir.
Seçenekleriniz:
Web Audio API için özel olarak tasarlanmış DevTools uzantısını da kullanabilirsiniz. İzleme aracının aksine bu, grafiklerin ve performans ölçümlerinin gerçek zamanlı olarak incelenmesini sağlar.
Bu uzantının şu adresten yüklenmesi gerekir: Chrome Web Mağazası.
Kurulumdan sonra, Chrome DevTools’u açıp üst menüden “Web Audio” seçeneğine tıklayarak panele erişirsiniz.
Web Audio panelinin dört bileşeni vardır: bağlam seçici, özellik denetçisi, grafik görselleştirici ve performans izleyici.
Bağlam Seçici #
Bir sayfada birden fazla olabileceğinden BaseAudioContext nesneler, bu açılır menü, incelemek istediğiniz bağlamı seçmenize olanak tanır. Soldaki çöp tenekesi simgesine tıklayarak çöp toplamayı manuel olarak da tetikleyebilirsiniz.
Özellik Müfettişi #
Yan panel, kullanıcı tarafından seçilen bir bağlamın çeşitli özelliklerini gösterir veya AudioNode. Dinamik değerlerin incelenmesi AudioParam desteklenmiyor.
Grafik Görüntüleyici #
Bu görünüm, kullanıcı tarafından seçilen bir bağlamın mevcut grafik topolojisini işler. Bu görselleştirme gerçek zamanlı olarak dinamik olarak değişir. Görselleştirmedeki bir öğeye tıklayarak özellik denetçisindeki ayrıntılı bilgileri inceleyebilirsiniz.
Performans ekranı #
Alttaki durum çubuğu yalnızca seçili olduğunda etkindir. BaseAudioContext bir AudioContext, gerçek zamanlı olarak çalışır. Bu çubuk, seçilen bir sesin anlık ses akışı kalitesini gösterir. AudioContext ve her saniye güncellenir. Aşağıdaki bilgileri sağlar:
-
Geri arama aralığı (ms): Geri arama aralığının ağırlıklı ortalamasını/varyansını görüntüler. İdeal olarak, ortalama sabit olmalı ve varyans sıfıra yakın olmalıdır. Büyük bir fark görürseniz bu, sistem düzeyinde sesli geri arama işlevinin, ses akışı kalitesinin düşmesine yol açabilecek dengesiz zamanlamaya sahip olduğu anlamına gelir. (Yukarıdaki örnek 3’e bakın.)
-
Oluşturma Kapasitesi (yüzde): Kapasite yüzde 100’e yaklaştığında bu, oluşturucunun belirli bir işleme bütçesi için çok fazla şey yaptığı anlamına gelir, bu nedenle daha az yapmayı (örn.
AudioNodesgrafikteki nesneler).
Çöp kutusu simgesine tıklayarak bir çöp toplayıcıyı manuel olarak tetikleyebilirsiniz.
Uzantı artık Chrome Web Audio ekibi tarafından önerilen bir yöntemdir, ancak eski WebAudio DevTools paneli de mevcuttur. Bu panele DevTools’un sağ üst köşesindeki “üç nokta” menüsüne tıklayarak ve ardından Daha fazla araçDaha sonra WebSes.
Çözüm #
Seste hata ayıklamak zordur. Tarayıcıda ses hatalarını ayıklamak daha da zordur. Ancak bu araçlar, web ses kodunun nasıl performans gösterdiğine dair size yararlı bilgiler sağlayarak acıyı hafifletebilir. Ancak bazı durumlarda Chrome’da veya uzantıda sorunlarla karşılaşabilirsiniz. O zaman korkma crbug.com’da bir hata bildirin veya üzerinde uzantı sorunu izleyici.
Jonathan Velasquez’in fotoğrafı Unsplash