😨 👔 👶🏻 "जब घड़ी में बारह बजते हैं।" या ब्राउज़र में एक माला ⚪️ 🗑️ 🐀

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

और, चूंकि हम एक ब्राउज़र का उपयोग कर रहे हैं, आप ध्वनि डिजाइन भी जोड़ सकते हैं। आखिरकार, यदि यह समय में उपकरणों को सिंक्रनाइज़ करने के लिए पर्याप्त सटीक है, तो आप प्रत्येक पर आवाज़ें खेल सकते हैं जैसे कि एक मल्टीचैनल सिस्टम लगता है।

एक जावास्क्रिप्ट एप्लिकेशन के अंदर वेब ऑडियो और गेमप्ले घड़ियों को सिंक्रनाइज़ करते समय क्या सामना किया जा सकता है; javasctipt (तीन!) में कितने अलग-अलग "घंटे" हैं और उनमें से सभी की आवश्यकता क्यों है, साथ ही बिल्ली के नीचे नोड्स के लिए एक तैयार-किए गए एप्लिकेशन भी हैं ।

घड़ी की जाँच करें

किसी भी सशर्त ऑनलाइन माला के लिए, सटीक घड़ी तुल्यकालन की आवश्यकता होती है। आखिरकार, आप किसी भी (यहां तक कि आंतरायिक) नेटवर्क देरी को अनदेखा कर सकते हैं। यह एक समय टिकट के साथ नियंत्रण कमांड प्रदान करने और इन कमांडों को "भविष्य में" थोड़ा सा उत्पन्न करने के लिए पर्याप्त है। क्लाइंट पर, उन्हें बफ़र किया जाएगा और फिर सिंक्रोनस और समय पर निष्पादित किया जाएगा।

या आप यहां तक कि आगे भी जा सकते हैं - अच्छे पुराने निर्धारक यादृच्छिक-एल्गोरिथ्म लें और सभी उपकरणों पर एक सामान्य बीज (सर्वर द्वारा एक बार जारी किए जाने पर, कनेक्ट होने पर) का उपयोग करें। यदि आप सटीक समय के साथ इस तरह के बीज का उपयोग करते हैं, तो आप सभी उपकरणों पर एल्गोरिदम के व्यवहार को पूरी तरह से पूर्व निर्धारित कर सकते हैं। जरा कल्पना करें: वास्तव में, आपको एक नेटवर्क या एक सर्वर की आवश्यकता नहीं है जो विशिष्ट और समकालिक रूप से परिवर्तित हो। बीज में पहले से ही पूरी (सशर्त रूप से अनंत) क्रियाओं की "वीडियो रिकॉर्डिंग" पहले से होती है। मुख्य बात सटीक समय है।

प्रत्येक विधि में प्रयोज्यता की अपनी सीमा है। त्वरित उपयोगकर्ता इनपुट के साथ, निश्चित रूप से, कुछ भी नहीं किया जाना है, यह "जैसा है" इसे प्रसारित करने के लिए रहता है। लेकिन गणना की जा सकने वाली सभी गणना की जानी है। मेरे कार्यान्वयन में, मैं स्थिति के आधार पर सभी तीन दृष्टिकोणों का उपयोग करता हूं।

विषय "एक ही समय में"

आदर्श रूप से, सब कुछ "एक ही समय में" ध्वनि करना चाहिए - संयुक्त उपकरणों के बीच सबसे खराब जोड़ी के लिए विसंगति के of 10 एमएस से अधिक की आवश्यकता नहीं है। आप सिस्टम समय से ऐसी सटीकता पर भरोसा नहीं कर सकते हैं, और एनटीपी प्रोटोकॉल का उपयोग करके समय को सिंक्रनाइज़ करने के लिए मानक तरीके ब्राउज़र में उपलब्ध नहीं हैं। इसलिए, हम अपने सिंक्रनाइज़ेशन सर्वर को चलाएंगे। सिद्धांत सरल है: हेलमेट "पिंग" और सर्वर के टाइम स्टैम्प के साथ "पोंग्स" को स्वीकार करें। यदि आप एक पंक्ति में कई बार ऐसा करते हैं, तो आप सांख्यिकीय रूप से त्रुटि को स्तर दे सकते हैं और औसत विलंब समय प्राप्त कर सकते हैं।

कोड: क्लाइंट पर सर्वर समय की गणना

let pingClientTime = 1; // performace.now() time when ping started let pongClientTime = 3; // performace.now() time when pong received let pongServerTime = 20; // server timstamp in pong answer let clientServerRawOffset = pongServerTime - pongClientTime; let pingPongOffset = pongClientTime - pingClientTime; // roundtrip let estimatedPingOffset = pingPongOffset / 2; // one-way let offset = clientServerRawOffset + estimatedPingOffset; console.log(estimatedPingOffset) // 1 console.log(offset); // 18 let sharedServerTime = performace.now() + offset;

इसके आधार पर वेबस्कैट और समाधान सबसे उपयुक्त हैं क्योंकि उन्हें टीसीपी कनेक्शन बनाने के लिए समय की आवश्यकता नहीं होती है, और आप दोनों दिशाओं में उनके साथ "संवाद" कर सकते हैं। निश्चित रूप से UDP या ICMP नहीं, लेकिन HTTP API का उपयोग करके नियमित रूप से ठंडे कनेक्शन की तुलना में अतुलनीय रूप से तेज़ है। इसलिए, सॉकेट.आईओ। सब कुछ बहुत आसान है:

कोड: socket.io कार्यान्वयन

 // server socket.on('ping', (pongCallback) => { let pongServerTime = performace.now(); pongCallback(pongServerTime); }); //client const binSize = 100; let clientServerCalculatedOffset; function ping() { socket.emit('ping', pongCallback); const pingClientTime = performace.now(); function pongCallback(pongServerTime) { const pongClientTime = performace.now(); const clientServerRawOffset = pongServerTime - pongClientTime; const pingPongOffset = pongClientTime - pingClientTime; // roundtrip const estimatedPingOffset = pingPongOffset / 2; // one-way const offset = clientServerRawOffset + estimatedPingOffset; offsets.unshift(offset); offsets.splice(binSize); let offsetSum = 0; offsets.forEach((offset) => { offsetSum += offset; }); clientServerCalculatedOffset = offsetSum / offset.length(); } }

औसत की गणना करने के बजाय, औसत की गणना करना अच्छा होगा - यह अस्थिर कनेक्शन के साथ सटीकता में सुधार करेगा। फ़िल्टरिंग विधियों का विकल्प पाठक पर निर्भर है। मैं योजनाबद्ध रूप से योजनाबद्ध रूप से यहां कोड को सरल बनाता हूं। मेरा पूरा समाधान भंडार में पाया जा सकता है।

प्रदर्शन। अज्ञात ()

आपको याद दिला दूं कि performance ऑब्जेक्ट एक एपीआई है जो उच्च-रिज़ॉल्यूशन टाइमर तक पहुंच प्रदान करता है। के तुलना करते हैं:

Date.now() 1 जनवरी, 1970 से मिलीसेकंड की संख्या लौटाता है, और पूर्णांक रूप में ऐसा करता है। यही है, केवल राउंडिंग से त्रुटि औसतन 0.5 एमएस है। उदाहरण के लिए, एक घटाव ऑपरेशन ab आप 2 एमएस तक असफल रूप से "खो" सकते हैं। इसके अलावा, ऐतिहासिक और वैचारिक रूप से, समय मीटर स्वयं उच्च सटीकता की गारंटी नहीं देता है और बड़े समय के पैमाने के साथ काम के लिए तेज किया जाता है।
वेब पेज के खुलने के बाद से performance.now() मिलीसेकंड की संख्या लौटाता है।
यह अपेक्षाकृत हाल का एपीआई है, विशेष रूप से समय अंतराल के सटीक माप के लिए "तेज"। एक फ्लोटिंग-पॉइंट वैल्यू देता है , सैद्धांतिक रूप से ओएस की क्षमताओं के करीब सटीकता स्तर देता है।

मुझे लगता है कि यह जानकारी लगभग सभी जावास्क्रिप्ट डेवलपर्स के लिए जानी जाती है। लेकिन हर कोई नहीं जानता कि ...

काली छाया

2018 में स्पेक्टर के सनसनीखेज समय के हमले के कारण, सब कुछ इस बिंदु पर चला जाता है कि उच्च-रिज़ॉल्यूशन टाइमर कृत्रिम रूप से मोटा हो जाएगा, अगर भेद्यता समस्या का कोई अन्य समाधान नहीं है। फ़ायरफ़ॉक्स, संस्करण 60 के साथ शुरू होता है, इस टाइमर के मूल्य को एक मिलीसेकंड तक बढ़ाता है, और एज, और भी बदतर।

यहाँ MDN कहते हैं:

टाइमस्टैम्प वास्तव में उच्च-रिज़ॉल्यूशन नहीं है। स्पेक्टर जैसे सुरक्षा खतरों को कम करने के लिए, वर्तमान में ब्राउज़र परिणाम को अलग-अलग डिग्री पर गोल करते हैं। (फ़ायरफ़ॉक्स 60 में फ़ायरफ़ॉक्स 1 मिलीसेकंड के लिए दौर शुरू कर दिया।) कुछ ब्राउज़र टाइमस्टैम्प को थोड़ा यादृच्छिक भी कर सकते हैं। भविष्य के रिलीज में सटीकता में फिर से सुधार हो सकता है; ब्राउज़र डेवलपर्स अभी भी इन टाइमिंग हमलों की जांच कर रहे हैं और उन्हें कम करने के लिए सबसे अच्छा कैसे है।

चलो परीक्षण चलाते हैं और ग्राफ़ पर एक नज़र डालते हैं। यह 10 एमएस के अंतराल पर परीक्षण का परिणाम है:

टेस्ट कोड: एक चक्र में समय माप

 function measureTimesLoop(length) { const d = new Array(length); const p = new Array(length); for (let i = 0; i < length; i++) { d[i] = Date.now(); p[i] = performance.now(); } return { d, p } }

Date.now()

performance.now()

धार

आंकड़े

ब्राउज़र संस्करण: 44.17763.771.0

दिनांक।

औसत अंतराल: 1.0538336052202284 एमएस
औसत अंतराल से विचलन, आरएमएस: 0.7547819181245603 एमएस
अंतराल मध्यिका: 1 मि

प्रदर्शन। अज्ञात ()

औसत अंतराल: 1.567100970873786 एमएस
औसत अंतराल से विचलन, आरएमएस: 0.6748006785171455 एमएस
अंतराल मध्यिका: 1.5015000000003056 एमएस

फ़ायरफ़ॉक्स

आंकड़े

ब्राउज़र संस्करण: 71.0

दिनांक।

औसत अंतराल: 1.0168350168350169 एमएस
औसत अंतराल से विचलन, आरएमएस: 0.21645930182417966 एमएस
अंतराल मध्यिका: 1 मि

प्रदर्शन। अज्ञात ()

औसत अंतराल: 1.0134453781512605 एमएस
औसत अंतराल से विचलन, आरएमएस: 0.1734108492762375 एमएस
अंतराल मध्यिका: 1 मि

क्रोम

आंकड़े

ब्राउज़र संस्करण: 79.0.3945.88

दिनांक।

औसत अंतराल: 1.02442996742671 एमएस
औसत अंतराल से विचलन, आरएमएस: 0.49858684744444 एमएस
अंतराल मध्यिका: 1 मि

प्रदर्शन। अज्ञात ()

औसत अंतराल: 0.005555847229948915 एमएस
औसत अंतराल से विचलन, आरएमएस: 0.027497846727194235 एमएस
अंतराल मध्यिका: 0.0050000089686363935 एमएस

ठीक है, क्रोम, ज़ूम करके 1 मिसे।

इसलिए, क्रोम अभी भी पकड़ में है, और इसके performance.now() कार्यान्वयन। performance.now() अभी तक गला नहीं हुआ है और कदम सुंदर 0.005 एमएस है। एज के तहत, performance.now() टाइमर Date.now() तुलना में Date.now() ! फ़ायरफ़ॉक्स में, दोनों टाइमर में एक ही मिलीसेकंड सटीकता होती है।

इस स्तर पर, कुछ निष्कर्ष पहले ही निकाले जा सकते हैं। लेकिन जावास्क्रिप्ट में एक और टाइमर है (जिसके बिना हम नहीं कर सकते हैं)।

WebAudio एपीआई टाइमर

यह थोड़ा अलग जानवर है। इसका उपयोग विलंबित ऑडियो कतारों के लिए किया जाता है। तथ्य यह है कि ऑडियो ईवेंट्स (नोट्स खेलना, प्रबंधन करना) मानक अतुल्यकालिक जावास्क्रिप्ट टूल्स पर भरोसा नहीं कर सकते हैं: setInterval और setTimeout - क्योंकि उनकी बहुत बड़ी त्रुटि है। और यह केवल टाइमर मानों की त्रुटि नहीं है (जिसके साथ हमने पहले निपटाया था), लेकिन यह वह त्रुटि है जिसके साथ ईवेंट मशीन घटनाओं को निष्पादित करता है। और यह पहले से ही लगभग 5-25 एमएस के आसपास है, यहां तक कि ग्रीनहाउस स्थितियों में भी।

बिगाड़ने के तहत अतुल्यकालिक मामले के लिए रेखांकन

100 एमएस के अंतराल पर परीक्षण का परिणाम:

परीक्षण कोड: एक अतुल्यकालिक चक्र में समय माप

 function pause(duration) { return new Promise((resolve) => { setInterval(() => { resolve(); }, duration); }); } async function measureTimesInAsyncLoop(length) { const d = new Array(length); const p = new Array(length); for (let i = 0; i < length; i++) { d[i] = Date.now(); p[i] = performance.now(); await pause(1); } return { d, p } }

Date.now()

performance.now()

धार

आंकड़े

ब्राउज़र संस्करण: 44.17763.771.0

दिनांक।

औसत अंतराल: 25.595959595959595 एमएस
औसत अंतराल से विचलन, आरएमएस: 10.12639235162126 एमएस
अंतराल मध्यिका: 28 एमएस

प्रदर्शन। अज्ञात ()

औसत अंतराल: 25.862596938775525 एमएस
औसत अंतराल से विचलन, आरएमएस: 10.123711255512573 एमएस
अंतराल मध्याह्न: 27.027099999999336 एमएस

फ़ायरफ़ॉक्स

आंकड़े

ब्राउज़र संस्करण: 71.0

दिनांक।

औसत अंतराल: 1.6914893617021276 एमएस
औसत अंतराल से विचलन, आरएमएस: 0.6018870280772611 एमएस
अंतराल मध्यिका: 2 एमएस

प्रदर्शन। अज्ञात ()

औसत अंतराल: 1.7865168539325842 एमएस
औसत अंतराल से विचलन, आरएमएस: 0.6442818510935484 एमएस
अंतराल मध्यिका: 2 एमएस

क्रोम

आंकड़े

ब्राउज़र संस्करण: 79.0.3945.88

दिनांक।

औसत अंतराल: 4.7878787878787888, एमएस
औसत अंतराल से विचलन, आरएमएस: 0.7557553886872682 एमएस
अंतराल मध्यिका: 5 मि

प्रदर्शन। अज्ञात ()

औसत अंतराल: 4.783989898979516 एमएस
औसत अंतराल से विचलन, आरएमएस: 0.6483716900974945 एमएस
माध्यिका अंतराल: 4.750000000058208 एमएस

हो सकता है कि किसी को पहला प्रयोगात्मक HTML ऑडियो एप्लिकेशन याद होगा। पूर्ण-विकसित WebAudio ब्राउज़र में आने से पहले - वे सभी एक छोटे से नशे में, मैला की तरह लग रहे थे। सिर्फ इसलिए कि उन्होंने एक setTimeout रूप में setTimeout उपयोग किया।

इसके विपरीत, आधुनिक WebAudio एपीआई 0.02 एमएस (44100Hz के नमूने आवृत्ति के आधार पर अटकलें) की गारंटी देता है। यह इस तथ्य के कारण है कि setTimeout तुलना में विलंबित ध्वनि प्लेबैक के लिए एक अलग तंत्र का उपयोग किया जाता है:

 source.start(when);

वास्तव में, एक ऑडियो नमूने का कोई भी प्रजनन "विलंबित" होता है। बस इसे खोने के लिए "स्थगित नहीं किया गया है", आपको इसे "अब तक" स्थगित करने की आवश्यकता है।

 source.start(audioCtx.currentTime);

रीयल-टाइम सॉफ़्टवेयर-जनित संगीत के बारे में

यदि आप नोटों से एक प्रोग्राम-सिंथेसाइज्ड राग बजाते हैं, तो इन नोटों को प्लेबैक कतार में पहले से जोड़ना होगा। फिर, सभी गैर-मौलिक प्रतिबंधों और टाइमर की अनियमितताओं के बावजूद, राग पूरी तरह से सुचारू रूप से चलेगा।

दूसरे शब्दों में, वास्तविक समय में संश्लेषित राग को वास्तविक समय में "आविष्कार" नहीं किया जाना चाहिए, लेकिन पहले से थोड़ा सा।

उन सभी पर शासन करने के लिए एक टाइमर

चूंकि audioCtx.currentTime इतना स्थिर और सटीक है, शायद हमें इसे सापेक्ष समय के मुख्य स्रोत के रूप में उपयोग करना चाहिए? चलो फिर से टेस्ट चलाते हैं।

परीक्षण कोड: एक चक्र में तुल्यकालिक समय माप को मापने

 function measureTimesInLoop(length) { const d = new Array(length); const p = new Array(length); const a = new Array(length); for (let i = 0; i < length; i++) { d[i] = Date.now(); p[i] = performance.now(); a[i] = audioCtx.currentTime * 1000; } return { d, p, a } }

Date.now()

performance.now()

audioCtx.currentTime

धार

आंकड़े

ब्राउज़र संस्करण: 44.17763.771.0

दिनांक।

औसत अंतराल: 1.037037037037037 एमएस
औसत अंतराल से विचलन, आरएमएस: 0.6166609846299806 एमएस
अंतराल मध्यिका: 1 मि

प्रदर्शन। अज्ञात ()

औसत अंतराल: 1.5447103117505993 एमएस
औसत अंतराल से विचलन, आरएमएस: 0.4390514285320851 एमएस
अंतराल मध्याह्न: 1.5015000000000782 एमएस

audioCtx.currentTime

औसत अंतराल: 2.955751134714949 एमएस
औसत अंतराल से विचलन, आरएमएस: 0.6193645611529503 एमएस
अंतराल मध्यिका: 2.902507781982422 एमएस

फ़ायरफ़ॉक्स

आंकड़े

ब्राउज़र संस्करण: 71.0

दिनांक।

औसत अंतराल: 1.005128205128205 एमएस
औसत अंतराल से विचलन, आरएमएस: 0.12392867665225249 एमएस
अंतराल मध्यिका: 1 मि

प्रदर्शन। अज्ञात ()

औसत अंतराल: 1.00513698630137 एमएस
औसत अंतराल से विचलन, आरएमएस: 0.07148844433269844 एमएस
अंतराल मध्यिका: 1 मि

audioCtx.currentTime

फ़ायरफ़ॉक्स सिंक टाइमर में ऑडियो टाइमर मूल्य को अपडेट नहीं करता है

क्रोम

आंकड़े

ब्राउज़र संस्करण: 79.0.3945.88

दिनांक।

औसत अंतराल: 1.0207612456747406 एमएस
औसत अंतराल से विचलन, आरएमएस: 0.49870223457982504 एमएस
अंतराल मध्यिका: 1 मि

प्रदर्शन। अज्ञात ()

औसत अंतराल: 0.005414502034674972 एमएस
औसत अंतराल से विचलन, आरएमएस: 0.027441293974958335 एमएस
माध्यिका अंतराल: 0.004999999873689376 एमएस

audioCtx.currentTime

औसत अंतराल: 3.0877599266656963 एमएस
औसत अंतराल से विचलन, आरएमएस: 1.1445555956407658 एमएस
अंतराल मध्यिका: 2.9024943310650997 एमएस

बिगाड़ने के तहत अतुल्यकालिक मामले के लिए रेखांकन

परीक्षण कोड: एक अतुल्यकालिक चक्र में समय माप

100 एमएस के अंतराल पर परीक्षण का परिणाम:

 function pause(duration) { return new Promise((resolve) => { setInterval(() => { resolve(); }, duration); }); } async function measureTimesInAsyncLoop(length) { const d = new Array(length); const p = new Array(length); const a = new Array(length); for (let i = 0; i < length; i++) { d[i] = Date.now(); p[i] = performance.now(); await pause(1); } return { d, p } }

Date.now()

performance.now()

audioCtx.currentTime

धार

आंकड़े

ब्राउज़र संस्करण: 44.17763.771.0

Date.now ():

औसत अंतराल: 24.505050505050505 एमएस
औसत अंतराल से विचलन: 11.513166584195204 एमएस
अंतराल मध्यिका: 26 एमएस

प्रदर्शन। अज्ञात ():

औसत अंतराल: 24.50935757575754 एमएस
औसत अंतराल से विचलन: 11.679091435527388 एमएस
अंतराल मध्याह्न: 25.525499999999738 एमएस

audioCtx.currentTime:

औसत अंतराल: 24.76005164944396 एमएस
औसत अंतराल से विचलन: 11.311571546205316 एमएस
अंतराल मध्याह्न: 26.121139526367187 एमएस

फ़ायरफ़ॉक्स

आंकड़े

ब्राउज़र संस्करण: 71.0

Date.now ():

औसत अंतराल: 1.6875 एमएस
औसत अंतराल से विचलन: 0.6663410663216448 एमएस
अंतराल मध्यिका: 2 एमएस

प्रदर्शन। अज्ञात ():

औसत अंतराल: 1.7234042553191489 एमएस
औसत अंतराल से विचलन: 0.6588877688171075 एमएस
अंतराल मध्यिका: 2 एमएस

audioCtx.currentTime:

औसत अंतराल: 10.158730158730123 एमएस
औसत अंतराल से विचलन: 1.4512471655330046 एमएस
माध्यिका अंतराल: 8.707482993195299 एमएस

क्रोम

आंकड़े

ब्राउज़र संस्करण: 79.0.3945.88

Date.now ():

औसत अंतराल: 4.585858585858586 एमएस
औसत अंतराल से विचलन: 0.9102125516015199 एमएस
अंतराल मध्यिका: 5 मि

प्रदर्शन। अज्ञात ():

औसत अंतराल: 4.592424242424955 एमएस
औसत अंतराल से विचलन: 0.719936993603155 एमएस
अंतराल मध्यिका: 4.605000001902226 एमएस

audioCtx.currentTime:

औसत अंतराल: 10.12648022171832 एमएस
औसत अंतराल से विचलन: 1.4508887886499262 एमएस
अंतराल मध्याह्न: 8.707482993197118 एमएस

खैर, यह काम नहीं किया। "बाहर", यह टाइमर सबसे गलत है। फ़ायरफ़ॉक्स लूप के अंदर टाइमर मूल्य को अपडेट नहीं करता है। लेकिन सामान्य तौर पर: संकल्प 3 एमएस और बदतर और ध्यान देने योग्य घबराना है। शायद audioCtx.currentTime का मान ऑडियो कार्ड ड्राइवर के रिंग बफर में स्थिति को दर्शाता है। दूसरे शब्दों में, यह न्यूनतम समय दिखाता है कि प्लेबैक को सुरक्षित रूप से विलंब करना अभी भी संभव है।

और क्या करना है? आखिरकार, हमें सर्वर के साथ सिंक्रनाइज़ करने और स्क्रीन पर जावास्क्रिप्ट घटनाओं को लॉन्च करने और ध्वनि घटनाओं के लिए एक ऑडियो टाइमर के लिए एक सटीक टाइमर की आवश्यकता है!

यह पता चला है कि आपको सभी टाइमर को एक-दूसरे के साथ सिंक्रनाइज़ करने की आवश्यकता है:

ग्राहक पर ग्राहक performance.now() साथ ग्राहक audioCtx.currentTime performance.now() ।
और client.now performance.now() सर्वर-साइड के साथ क्लाइंट का performance.now() ।

सिंक्रोनाइज्ड, सिंक्रोनाइज्ड

सामान्य तौर पर, यदि आप इसके बारे में सोचते हैं, तो यह काफी मज़ेदार है: आपके पास समय ए और बी के दो अच्छे स्रोत हो सकते हैं, जिनमें से प्रत्येक आउटपुट पर बहुत ही मोटे और शोर है; यहां तक कि अपने आप ही अनुपयोगी होना चाहिए। लेकिन मूल गैर-शोर स्रोतों के बीच अंतर को बहुत सटीक रूप से बहाल किया जा सकता है।

चूंकि आदर्श घड़ियों के बीच वास्तविक समय की दूरी एक स्थिर है, इसलिए माप को n बार लेना, हम माप की त्रुटि को n गुना तक कम कर देंगे, क्रमशः। जब तक, निश्चित रूप से, घड़ी एक ही गति से चलती है।

हाँ सिंक्रनाइज़ नहीं

बुरी खबर यह है कि नहीं, वे एक ही गति से नहीं जाते हैं। और मैं सर्वर और क्लाइंट पर घंटों के विचलन के बारे में बात नहीं कर रहा हूं - यह समझने और अपेक्षित है। क्या अधिक अप्रत्याशित है: audioCtx.currentTime धीरे-धीरे performance.now() से audioCtx.currentTime । यह क्लाइंट के अंदर है। हम नोटिस नहीं कर सकते हैं, लेकिन कभी-कभी, लोड के तहत, ऑडियो सिस्टम डेटा के एक छोटे टुकड़े को नहीं निगल सकता है और (रिंग बफर की प्रकृति के विपरीत) ऑडियो समय सिस्टम समय के सापेक्ष स्थानांतरित हो जाएगा। ऐसा बहुत कम होता है, यह सिर्फ बहुत से लोगों को चिंतित नहीं करता है: लेकिन अगर, उदाहरण के लिए, आप एक ही समय में एक साथ दो YouTube वीडियो विभिन्न कंप्यूटरों पर लॉन्च करते हैं, तो यह एक तथ्य नहीं है कि वे एक ही समय पर खेलना बंद कर देंगे। और बिंदु, ज़ाहिर है, विज्ञापन में नहीं है।

इस प्रकार, स्थिर और तुल्यकालिक संचालन के लिए। हमें एक संदर्भ के रूप में, सर्वर समय का उपयोग करके नियमित रूप से सभी घड़ियों को एक-दूसरे के साथ फिर से जांचने की आवश्यकता है। और फिर ट्रेड-ऑफ दिखाई देता है कि औसत के लिए कितने माप का उपयोग करना है: अधिक - अधिक सटीक, लेकिन अधिक से अधिक संभावना है कि audioCtx.currentTime में एक तेज कूद उस समय विंडो में गिर गई जिसमें हम मूल्यों को फ़िल्टर करते हैं। फिर, यदि हम, उदाहरण के लिए, मिनट विंडो का उपयोग करते हैं, तो सभी मिनटों में हमारे पास समय बीत जाएगा। फिल्टर का विकल्प व्यापक है: घातीय , मध्य , कलमन फ़िल्टर , आदि। लेकिन यह व्यापार बंद किसी भी मामले में है।

समय खिड़की

एक अतुल्यकालिक लूप में audioCtx.currentTime को performance.now() साथ सिंक्रोनाइज़ करने के मामले में, अतुल्यकालिक लूप में, ताकि UI के साथ हस्तक्षेप न करने के लिए, हम एक माप ले सकते हैं, कहते हैं, 100 एमएस।
मान लें कि माप त्रुटि इरेट = इरेटा + इरब = 1 + 3 = 4 एमएस
तदनुसार, 1 सेकंड में हम इसे 0.4 एमएस और 10 सेकंड में 0.04 एमएस तक कम कर सकते हैं। परिणाम के आगे सुधार का कोई मतलब नहीं है, और फ़िल्टरिंग के लिए एक अच्छी खिड़की होगी: 1 - 10 सेकंड।

नेटवर्क सिंक्रोनाइज़ेशन के मामले में, देरी और त्रुटियां पहले से ही बहुत अधिक महत्वपूर्ण हैं, लेकिन समय में अचानक कोई उछाल नहीं है, जैसा कि audioCtx.currentTime के मामले में है। और आप अपने आप को वास्तव में महान आँकड़े जमा करने की अनुमति दे सकते हैं। आखिरकार, पिंग के लिए त्रुटि 500 एमएस तक हो सकती है। और माप खुद हम अक्सर ऐसा नहीं कर सकते।

इस बिंदु पर, मैं रोकने का प्रस्ताव करता हूं। अगर किसी को दिलचस्पी थी, तो मुझे आपको यह बताने में खुशी होगी कि "उल्लू के बाकी हिस्सों को कैसे आकर्षित किया जाए।" लेकिन टाइमर के बारे में कहानी के हिस्से के रूप में, मुझे लगता है कि मेरी कहानी खत्म हो गई है।

और मुझे जो मिला है उसे साझा करना चाहता हूं। सभी समान, नया साल।

क्या हुआ?

डिस्क्लेमर: तकनीकी रूप से, यह हैबे पर एक पीआर साइट है, लेकिन यह पूरी तरह से गैर-लाभकारी ओपनसोर्स पेट-प्रोजेक्ट है, जिस पर मैं कभी वादा नहीं करता: विज्ञापन डालना, या किसी अन्य तरीके से पैसा कमाना। इसके विपरीत, मैंने संभावित धनराशि को जीवित रखने के लिए अपने धन से अब अधिक उदाहरण जुटाए हैं। इसलिए, कृपया, अच्छे लोग, मुझे मत तोड़ो और मुझ तक मत पहुंचो। यह सब विशुद्ध रूप से मजेदार है।

नव वर्ष की हार्दिक शुभकामनाएँ!

snowtime.fun

आप घुंडी को घुमा सकते हैं और दृश्य, संगीत और ऑडियो प्रभाव को नियंत्रित कर सकते हैं। यदि आपके पास एक सामान्य वीडियो कार्ड है, तो सेटिंग्स पर जाएं और कणों की संख्या 100% पर सेट करें।

WebAudio और WebGL की आवश्यकता है।

UPD: MacOS Mojave के तहत सफारी में काम नहीं करता है। दुर्भाग्यवश, इस सफारी के न होने के कारण क्या हो रहा है, इसका शीघ्र पता लगाने का कोई तरीका नहीं है। iOS काम करने लगता है।

UPD2: अगर snowtime.fun और web.snowtime.fun जवाब नहीं दे रहे हैं , तो नई habr .snowtime.fun उपडोमेन आज़माएँ । उसने सर्वर को दूसरे डेटा सेंटर में स्थानांतरित कर दिया, और पुराने IP को DNS में कैश किया गया, expire=1w । :(

रिपोजिटरी: बिटबकेट
इस लेख को लिखते समय, मैक्रोवेक्टर / फ्रीपिक इलस्ट्रेशन का उपयोग किया गया था।

"जब घड़ी में बारह बजते हैं।" या ब्राउज़र में एक माला

घड़ी की जाँच करें

विषय "एक ही समय में"

प्रदर्शन। अज्ञात ()

काली छाया

धार

दिनांक।

प्रदर्शन। अज्ञात ()

फ़ायरफ़ॉक्स

दिनांक।

प्रदर्शन। अज्ञात ()

क्रोम

दिनांक।

प्रदर्शन। अज्ञात ()

WebAudio एपीआई टाइमर

धार

दिनांक।

प्रदर्शन। अज्ञात ()

फ़ायरफ़ॉक्स

दिनांक।

प्रदर्शन। अज्ञात ()

क्रोम

दिनांक।

प्रदर्शन। अज्ञात ()

उन सभी पर शासन करने के लिए एक टाइमर

धार

दिनांक।

प्रदर्शन। अज्ञात ()

audioCtx.currentTime

फ़ायरफ़ॉक्स

दिनांक।

प्रदर्शन। अज्ञात ()

audioCtx.currentTime

क्रोम

दिनांक।

प्रदर्शन। अज्ञात ()

audioCtx.currentTime

धार

Date.now ():

प्रदर्शन। अज्ञात ():

audioCtx.currentTime:

फ़ायरफ़ॉक्स

Date.now ():

प्रदर्शन। अज्ञात ():

audioCtx.currentTime:

क्रोम

Date.now ():

प्रदर्शन। अज्ञात ():

audioCtx.currentTime:

सिंक्रोनाइज्ड, सिंक्रोनाइज्ड

हाँ सिंक्रनाइज़ नहीं

समय खिड़की

क्या हुआ?

snowtime.fun

More articles: