वेब पर ऑडियो और वीडियो प्लेबैक सिंक करें

Web Audio API की मदद से, एवी फ़ॉर्मैट में वीडियो सिंक करने की प्रोसेस ठीक से पूरी की जा सकती है.

François Beaufort
François Beaufort

AudioContext इंस्टेंस की outputLatency प्रॉपर्टी से, ऑडियो हार्डवेयर के आउटपुट में लगने वाले समय का अनुमान लगाया जाता है. उदाहरण के लिए, ब्लूटूथ ईयरबड या किसी बाहरी यूएसबी ऑडियो इंटरफ़ेस की. यह प्रॉपर्टी तब काम आती है, जब:

  • मौजूदा ऑडियो कॉन्टेंट और रिकॉर्ड किए गए नए कॉन्टेंट को सिंक करें. (म्यूज़िक प्रोडक्शन में)
  • वेब ऑडियो आउटपुट और अन्य मीडिया (जैसे कि वीडियो या एमआईडीआई प्लेबैक) सिंक करता है.

इस WebCodecs डेमो (सोर्स) में WebCodecs API का इस्तेमाल करके MediaStream को रॉ वीडियो और ऑडियो डेटा में डिकोड किया जाता है. इसके बाद, ऑडियो वर्कलेट से आने वाले ऑडियो डेटा के साथ, वापस एचटीएमएल <canvas> एलिमेंट में चलाया जाता है. outputLatency प्रॉपर्टी की मदद से, डेमो यह पता लगा सकता है कि दिया गया ऑडियो टाइमस्टैंप, उपयोगकर्ता के कानों में कब पहुंच रहा है. इसके बाद, उससे मैच करने के लिए वीडियो फ़्रेम को सही तरीके से पेंट किया जा सकता है.

डेमो का स्क्रीनशॉट, जो एम्बेड किए गए वीडियो का है. इसमें वॉल्यूम, ऑडियो बफ़र की परफ़ॉर्मेंस, आउटपुट में इंतज़ार का समय, और AudioContext.OutputLatency को इस्तेमाल करने के लिए दिए गए चेकबॉक्स का ऑडियो कंट्रोल मौजूद है.

इसे खुद आज़माकर देखें, अपने पसंदीदा ब्लूटूथ हेडसेट (🎧) का इस्तेमाल करके वीडियो चलाएं, उस पक्षी (कूट) का इंतज़ार करें (ऊपर देखें), और ऑडियो में होने वाले बदलावों पर नज़र रखने के लिए चेकबॉक्स (☑️) को टॉगल करें. आउटपुट के इंतज़ार का कुल समय, रीयल टाइम में अपडेट किया जाता है.

ऑडियो कॉन्टेक्स्ट आउटपुट-लेटेंसी

ब्राउज़र सहायता

  • 102
  • 102
  • 70
  • x

सोर्स

Unस्प्लैश पर वाहिद खेन की हीरो इमेज.