إنشاء ملفات صوتية لتطبيقات الويب في Chrome

تعرَّف على كيفية تحليل أداء تطبيقات Web Audio في Chrome باستخدام about://tracing والصوت (إضافة WebAudio ضمن "أدوات مطوري البرامج في Chrome").

Hongchan Choi

ربما وصلت إلى هذه المقالة لأنّك تطوّر تطبيقًا يستخدم Web Audio API وواجهت مشاكل غير متوقّعة مثل أصوات أصوات فرقعة من المخرجات أو أنّك تسمع شيئًا غير متوقّع. ربما تكون مشتركًا بالفعل في مناقشة على crbug.com، وطلب منك أحد مهندسي Chrome تحميل "بيانات التتبع" أو النظر في العرض المرئي للرسم البياني. توضّح هذه المقالة كيفية الحصول على المعلومات ذات الصلة حتى نتمكن من فهم المشكلة وحلّها في نهاية المطاف.

أدوات تحليل صوت الويب

هناك أداتان ستساعدكان عند تحليل خصائص Web Audio، وهما about://tracing والإضافة WebAudio في "أدوات مطوري البرامج في Chrome".

متى تستخدم about://tracing؟

عندما تحدث "أعطال" غامضة. يمنحك تحليل التطبيق باستخدام أدوات التتبع رؤى حول:

• شرائح الوقت المُستغرَقة في استدعاءات دوال معيّنة في سلاسل محادثات مختلفة
• توقيت معاودة الاتصال الصوتي في "عرض المخطط الزمني"

تعرض عادةً المواعيد النهائية لمعاودة الاتصال الصوتية الفائتة أو جمع البيانات غير المرغوب فيها بشكل كبير والتي قد تتسبب في حدوث خلل غير متوقع في الصوت. هذه المعلومات مفيدة لفهم مشكلة أساسية، لذلك غالبًا ما يسألها مهندسو Chromium خاصةً عندما لا يكون التكاثر المحلي ممكنًا. وتتوفر التعليمات العامة للتتبّع هنا.

متى تستخدم إضافة "أدوات مطوري البرامج في Web Audio"؟

عندما تريد عرض الرسم البياني للصوت ومراقبة أداء عارض الصوت في الوقت الفعلي. غالبًا ما يكون الرسم البياني الصوتي، وهو عبارة عن شبكة من كائنات AudioNode لإنشاء بث صوتي وتركيبه، معقدًا غالبًا، ولكن تصميم الرسم البياني ليس شفافًا. (لا تحتوي Web Audio API على ميزات لمراجعة العُقدة أو الرسم البياني). تحدث بعض التغييرات في الرسم البياني، والآن تسمع صوت صامت. ثم حان الوقت لتصحيح الأخطاء من خلال الاستماع. هذا الأمر ليس سهلاً على الإطلاق، ويزداد صعوبة عندما يكون لديك رسم بياني صوتي أكبر. يمكنك الاستعانة بالإضافة Web Audio DevTools من خلال عرض الرسم البياني.

باستخدام هذه الإضافة، يمكنك رصد تقدير قيد التشغيل لسعة العرض، ما يشير إلى مستوى أداء عارض الصوت على الويب في حال تجاوز ميزانية عرض محدّدة (على سبيل المثال، 2.67 ملي ثانية تقريبًا عند 48 كيلوهرتز). إذا اقتربت السعة من 100 في المئة، فهذا يعني أنه من المحتمل أن يتسبب تطبيقك في حدوث أعطال لأن العارض يفشل في إنهاء العمل بالميزانية المحددة.

استخدام about://tracing

كيفية تسجيل بيانات التتبُّع

التعليمات المكتوبة أدناه مخصّصة للإصدار 80 من Chrome والإصدارات الأحدث.

للحصول على أفضل النتائج، أغلِق جميع علامات التبويب والنوافذ الأخرى وأوقف الإضافات. وبدلاً من ذلك، يمكنك إما إطلاق نسخة افتراضية جديدة من Chrome أو استخدام إصدارات أخرى من قنوات الإصدار المختلفة (على سبيل المثال، الإصدار التجريبي أو إصدار Canary). بعد أن يصبح المتصفّح جاهزًا، اتّبِع الخطوات التالية:

1. افتح تطبيقك (صفحة الويب) في علامة تبويب.
2. افتح علامة تبويب أخرى وانتقِل إلى about://tracing.
3. اضغط على الزر تسجيل واختَر اختيار الإعدادات يدويًا.
4. اضغط على الزرّ None (بدون) في كلٍّ من القسمين Register Categories (فئات السجلات) و Disabled byDefault Categories (فئات السجلات)).
5. في قسم Register Categories (فئات السجلات)، اختَر ما يلي:
   • audio
   • blink_gc
   • media
   • v8.execute (إذا كنت مهتمًا بأداء رمز JavaScript لـ AudioWorklet)
   • webaudio
6. في القسم تم الإيقاف بواسطة الفئات التلقائية، اختَر ما يلي:
   • audio-worklet (إذا كنت مهتمًا بمعرفة مكان بدء سلسلة محادثات AudioWorklet)
   • webaudio.audionode (إذا كنت بحاجة إلى التتبُّع التفصيلي لكل AudioNode)
7. اضغط على الزر تسجيل في أسفل الصفحة.
8. ارجع إلى علامة تبويب التطبيق وأعِد الخطوات التي أدت إلى حدوث المشكلة.
9. عندما يكون لديك بيانات تتبُّع كافية، ارجع إلى علامة تبويب التتبُّع واضغط على إيقاف.

10. ستعرض علامة تبويب التتبُّع النتيجة.

    

11. اضغط على حفظ لحفظ بيانات التتبُّع.

كيفية تحليل بيانات التتبُّع

تصور بيانات التتبع طريقة عرض محرك الصوت على الويب في Chrome للصوت. تتوفر في العارض وضعَين مختلفَين للعرض: وضع نظام التشغيل ووضع Worklet. يستخدم كل وضع نموذج سلاسل محادثات مختلفًا، لذلك تختلف نتائج التتبُّع أيضًا.

وضع نظام التشغيل

في وضع نظام التشغيل، تشغّل سلسلة التعليمات AudioOutputDevice كل الرموز الصوتية على الويب. AudioOutputDevice هي سلسلة محادثات ذات أولوية في الوقت الفعلي مصدرها "خدمة الصوت" في المتصفّح وتعتمد على ساعة الجهاز الصوتي. إذا لاحظت عدم انتظام في بيانات التتبع في هذا الممر، فهذا يعني أن توقيت معاودة الاتصال من الجهاز قد يكون مزعجًا. من المعروف أنّ هذه المشكلة دمج بين Linux وPulse Audio. راجِع مشاكل Chromium التالية للحصول على مزيد من التفاصيل: #825823 #864463.

وضع Worklet

في وضع Worklet، الذي يتميز بانتقال سلسلة محادثات واحدة من AudioOutputDevice إلى AudioWorklet سلسلة التعليمات، من المفترَض أن تظهر لك عمليات تتبع متناغمة في ممرَين لسلاسل محادثات كما هو موضّح أدناه. عند تفعيل المهمة الصغيرة، تعرض سلسلة AudioWorklet العمليات الصوتية على الويب. إنّ سلسلة المحادثات هذه ليست حاليًا ذات أولوية في الوقت الفعلي. يتمثل عدم الانتظام الشائع هنا في وجود كتلة كبيرة ناتجة عن تجميع البيانات غير المرغوب فيها أو عدم الالتزام بالمواعيد النهائية للعرض. تؤدي كلتا الحالتين إلى حدوث مشاكل في البث الصوتي.

وفي كلتا الحالتين، تتّسم بيانات التتبُّع المثالية باستدعاءات استدعاء معاودة الاتصال على جهاز صوتي وتوافقها جيدًا مع عرض المهام التي يتم إكمالها بشكل جيد في حدود ميزانية العرض المقدّمة. تعد لقطتا الشاشة أعلاه أمثلة رائعة لبيانات التتبع المثالية.

التعلم من أمثلة من العالم الحقيقي

المثال 1: عرض مهام تتجاوز ميزانية العرض

وتُعدّ لقطة الشاشة أدناه (مشكلة Chromium رقم 796330) مثالاً نموذجيًا على الحالات التي يستغرق فيها الرمز في AudioWorkletProcessor وقتًا طويلاً جدًا ويتجاوز ميزانية عرض معيّنة. يعمل توقيت معاودة الاتصال بشكل جيد ولكن تعذّر على استدعاء دالة معالجة الصوت لواجهة برمجة تطبيقات Web Audio API في إكمال العمل قبل معاودة الاتصال التالية على الجهاز.

الخيارات المتاحة لك:

• يمكنك تقليل أعباء الرسم البياني الصوتي من خلال استخدام عدد أقل من AudioNode مثيل.
• يمكنك تقليل أعباء العمل باستخدام رمزك في AudioWorkletProcessor.
• عليك زيادة وقت الاستجابة الأساسي بمقدار AudioContext.

المثال 2: مجموعة كبيرة من البيانات المهملة في سلسلة التعليمات

وعلى عكس سلسلة عرض الصوت في نظام التشغيل، تتم إدارة جمع البيانات غير المرغوب فيها من خلال سلسلة الوظائف المصغَّرة. وهذا يعني أنّه إذا كان الرمز البرمجي يؤدي إلى تخصيص/تخصيص الذاكرة (مثل الصفائف الجديدة)، سيؤدي ذلك في النهاية إلى ظهور مجموعة بيانات غير مهمة تؤدي إلى حظر سلسلة التعليمات بشكل متزامن. إذا كان أعباء العمل الناتجة عن العمليات الصوتية على الويب ومجموعة المحتوى غير المهم أكبر من ميزانية عرض معيّنة، يؤدي ذلك إلى حدوث خلل في البث الصوتي. لقطة الشاشة التالية هي مثال ممتاز على هذه الحالة.

الخيارات المتاحة لك:

• ننصحك بتخصيص الذكرى في البداية وإعادة استخدامها متى أمكن.
• استخدِم أنماط تصميم مختلفة استنادًا إلى SharedArrayBuffer. ومع أنّ هذا الإجراء ليس حلاً مثاليًا، هناك العديد من تطبيقات الصوت على الويب التي تستخدم نمطًا مماثلاً مع SharedArrayBuffer لتشغيل الرمز الصوتي المكثف. أمثلة:
  • نمط تصميم وظيفة الصوت الأساسية

المثال 3: معاودة الاتصال على جهاز صوتي Jittery من AudioOutputDevice

إنّ التوقيت الدقيق لمعاودة الاتصال الصوتي هو أهم شيء في الإعدادات الصوتية على الويب. يُفترض أن تكون هذه هي الساعة الأكثر دقة في نظامك. وإذا لم يتمكن نظام التشغيل أو نظامه الفرعي للصوت من ضمان الحصول على وقت ثابت لمعاودة الاتصال، فستتأثر جميع العمليات اللاحقة. الصورة التالية هي مثال على رد اتصال صوتي غير مستقر. بالمقارنة مع الصورتين السابقتين، يختلف الفاصل الزمني بين كل معاودة الاتصال بشكل كبير.

الخيارات المتاحة لك:

• عليك زيادة حجم المخزن المؤقت لمعاودة الاتصال للصوت الخاص بالنظام عن طريق ضبط الخيار latencyHint.
• إذا واجهتك مشكلة، يمكنك الإبلاغ عن مشكلة على crbug.com مع بيانات التتبّع.

استخدام الإضافة "أدوات مطوري البرامج الصوتية على الويب"

يمكنك أيضًا استخدام الإضافة "أدوات مطوري البرامج" المصمّمة خصيصًا لواجهة Web Audio API. بخلاف أداة التتبع، يوفر هذا فحصًا في الوقت الفعلي للرسومات البيانية ومقاييس الأداء.

يجب تثبيت هذه الإضافة من سوق Chrome الإلكتروني.

بعد التثبيت، يمكنك الوصول إلى اللوحة من خلال فتح "أدوات مطوري البرامج في Chrome" والنقر على "Web Audio" (صوت الويب) في القائمة العلوية.

تتضمن لوحة Web Audio أربعة مكونات: أداة اختيار السياق وأداة فحص الخصائص وأداة العرض المرئي للرسم البياني ومراقبة الأداء.

أداة اختيار السياق

وبما أنّ الصفحة يمكن أن تحتوي على عدة عناصر BaseAudioContext، تسمح لك هذه القائمة المنسدلة باختيار السياق الذي تريد فحصه. يمكنك أيضًا تشغيل جمع البيانات المهملة يدويًا عن طريق النقر فوق أيقونة سلة المهملات على اليسار.

عارض الخصائص

تعرض اللوحة الجانبية سمات مختلفة لسياق من اختيار المستخدم أو AudioNode. لا تتوفّر إمكانية فحص القيم الديناميكية في AudioParam.

فيديو يضم عروضًا مرئية للرسم البياني

تعرض طريقة العرض هذه طوبولوجيا الرسم البياني الحالية لسياق اختاره المستخدم. يتغير هذا التصور ديناميكيًا في الوقت الفعلي. من خلال النقر فوق عنصر في التصور، يمكنك فحص المعلومات التفصيلية على الخصائص.

أداة مراقبة الأداء

لا يكون شريط الحالة في أسفل الصفحة نشطًا إلا عندما تكون قيمة BaseAudioContext المحدّدة AudioContext التي يتم تشغيلها في الوقت الفعلي. يعرض هذا الشريط جودة البث الصوتي الفوري لعنصر AudioContext محدَّد ويتم تحديثه كل ثانية. إنه يقدم المعلومات التالية:

• الفاصل الزمني لمعاودة الاتصال (بالملّي ثانية): يعرض المتوسط المُرجّح/التباين المُرجّح للفاصل الزمني لمعاودة الاتصال. من الناحية المثالية، يجب أن يكون المتوسط ثابتًا وأن يكون التباين قريبًا من الصفر. إذا لاحظت تباينًا كبيرًا، هذا يعني أنّ توقيت وظيفة معاودة الاتصال الصوتي على مستوى النظام غير مستقر قد يؤدي إلى انخفاض جودة البث الصوتي. (اطّلِع على المثال 3 أعلاه.)

• سعة العرض (النسبة المئوية): عندما تقترب السعة من 100 في المئة، يعني ذلك أنّ العارض يبذل الكثير من الجهد في إطار ميزانية عرض معيّنة، لذا عليك التفكير في تنفيذ عدد أقل من العناصر (على سبيل المثال، استخدام عدد أقل من عناصر AudioNodes في الرسم البياني).

ويمكنك تشغيل أداة تجميع البيانات غير المرغوب فيها يدويًا من خلال النقر على رمز سلة المهملات.

لوحة أدوات مطوّري البرامج في WebAudio القديمة

أصبحت الإضافة الآن طريقة مقترحة من قِبل فريق Chrome Web Audio، ولكن تتوفر أيضًا لوحة Web Audio DevTools القديمة. يمكنك الوصول إلى هذه اللوحة بالنقر على قائمة "النقاط الثلاث" في أعلى يسار صفحة "أدوات مطوري البرامج"، ثم الانتقال إلى مزيد من الأدوات ثم WebAudio.

الخلاصة

يصعب تصحيح أخطاء الصوت. وتُعدّ عملية تصحيح أخطاء الصوت في المتصفّح أكثر صعوبة. ومع ذلك، يمكن لهذه الأدوات تخفيف هذه الأعباء من خلال تزويدك برؤى مفيدة حول كيفية أداء التعليمات البرمجية للصوت على الويب. ومع ذلك، قد تجد في بعض الحالات مشاكل في Chrome أو الإضافة. بعد ذلك، لا تخشَ الإبلاغ عن خطأ على crbug.com أو من أداة تتبُّع مشاكل الإضافة.

صورة من تصوير "جوناثان فيلاسكيز" على موقع Unسبلاش