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

تتيح واجهة برمجة التطبيقات Web Audio API إمكانية تنفيذ مزامنة الصوت والفيديو بشكل صحيح.

فادي مجدي
فرانسوا بوفورت

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

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

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

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

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

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

التوافق مع المتصفح

  • 102
  • 102
  • 70
  • x

المصدر

صورة رئيسية من تصميم وايد خين على UnLaunch