مزامنة تشغيل الصوت والفيديو على الويب

تتيح واجهة برمجة تطبيقات Web Audio تحقيق مزامنة AV بشكل صحيح.

François Beaufort
François Beaufort

توفّر السمة outputLatency لمثيل AudioContext تقديرًا لوقت استجابة إخراج الجهاز الصوتي (على سبيل المثال، وقت استجابة سمّاعات الأذن التي تعمل بالبلوتوث أو واجهة صوت USB خارجية). هذه السمة مفيدة عندما تريد:

  • مزامنة المواد الصوتية الحالية والمواد الصوتية المسجّلة حديثًا (في سيناريو إنتاج الموسيقى)
  • مزامنة إخراج صوت الويب والوسائط الأخرى (مثل الفيديو أو تشغيل MIDI).

في هذا العرض التوضيحي لرموز WebCodecs (المصدر)، يتم استخدام WebCodecs API لفك ترميز MediaStream إلى بيانات فيديو وصوتية أوّلية، ثم تشغيله في عنصر HTML <canvas> يتضمّن بيانات صوتية واردة من Audio Worklet. تسمح السمة outputLatency للعرض التوضيحي بتحديد وقت وصول طابع زمني معيّن للصوت إلى أذن المستخدم، ثم طلاء إطارات الفيديو بشكل صحيح لمطابقة ذلك الوقت.

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

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

وقت استجابة إخراج سياق الصوت

دعم المتصفح

  • 102
  • 102
  • 70
  • x

المصدر

صورة رئيسية من قناة وحيد خين على Unسباش