إنشاء ملفات صوتية لتطبيقات الويب في 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 أو استخدام إصدارات أخرى من قنوات إصدار مختلفة (مثل الإصدار التجريبي أو Canary). بعد أن يصبح المتصفّح جاهزًا، اتّبِع الخطوات التالية:

1. افتح تطبيقك (صفحة الويب) في علامة تبويب.
2. افتح علامة تبويب أخرى وانتقِل إلى about://tracing.
3. انقر على الزر تسجيل واختَر اختيار الإعدادات يدويًا.
4. انقر على الزر بلا فئة في كل من قسمَي فئات التسجيل والفئات غير المفعّلة تلقائيًا.
5. في قسم فئات السجلات، حدِّد ما يلي:
   • 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: عرض مهام تتجاوز ميزانية العرض

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

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

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

المثال 2: جمع البيانات غير الضرورية بشكل كبير في سلسلة التعليمات الخاصة بـ Worklet

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

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

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

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

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

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

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

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

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

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

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

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

Context Selector

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

عارض الخصائص

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

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

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

أداة رصد الأداء

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

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

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

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

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

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

الخاتمة

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