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

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

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

أدوات تحليل أداء Web Audio

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

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

عند حدوث "مشاكل" غامضة من خلال تحليل أداء التطبيق باستخدام أدوات التتبّع، يمكنك الحصول على إحصاءات عن:

• شرائح الوقت التي تقضيها طلبات وظائف معيّنة في سلاسل محادثات مختلفة
• توقيت معاودة الاتصال الصوتي في عرض المخطط الزمني

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

متى يتم استخدام إضافة Web Audio DevTools؟

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

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

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

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

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

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

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

10. ستعرض علامة التبويب "التتبّع" النتيجة بشكل مرئي.

    

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

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

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

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

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

وضع "الوحدات الصغيرة"

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

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

الاستفادة من أمثلة من العالم الواقعي

المثال 1: مهام التقديم التي تتجاوز ميزانية التقديم

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

خياراتك:

• يمكنك تقليل حجم العمل في الرسم البياني الصوتي باستخدام عدد أقل من نُسخ AudioNode.
• قلِّل من عبء رموزك البرمجية في AudioWorkletProcessor.
• زيادة وقت الاستجابة الأساسي إلى AudioContext

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

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

خياراتك:

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

المثال 3: ردّ اتصال متقطّع من جهاز صوتي من AudioOutputDevice

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

خياراتك:

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

استخدام إضافة Web Audio DevTools

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

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

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

تتضمّن لوحة Web Audio أربعة مكوّنات: أداة اختيار السياق، ومُدقّق المواقع، ومُحسِّن الرسم البياني، ومراقب الأداء.

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

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

عارض الخصائص

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

أداة عرض الرسم البياني

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

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

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

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

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

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

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

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

الخاتمة

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

صورة من تصوير "جوناثان فيلاسكويز" على Unsplash