विभिन्न ब्राउज़रों के लिए ऑडियो प्लेयर विकसित करते समय आप क्या सीख सकते हैं

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

प्रागितिहास

शायद हर कोई जिसने कभी अपने जीवन में कम से कम एक बार ब्राउज़रों के लिए ऑडियो प्लेयर लिखा है, क्रॉस-ब्राउज़र संगतता और क्रॉस-प्लेटफ़ॉर्म की समस्या का सामना किया है।

इसलिए नए एमवीपी पर काम करते समय, मुझे ब्राउज़रों में ऑडियो के प्लेबैक के बारे में कई सुविधाएँ मिलीं।

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

सर्वेक्षण

फिर, हमारी लगभग सभी परियोजनाओं में ध्वनि प्रबंधक 2 पुस्तकालय का उपयोग किया गया था।

लगभग तुरंत, आपको पता चलता है कि मोबाइल उपकरणों पर एक साथ दो ऑडियो फ़ाइलें खेलना हर जगह एक जैसा काम नहीं करता है!

पीसी के लिए क्रोम (~ 62 संस्करण) में, पटरियों को खेला जाना चाहिए जैसा कि उन्हें चाहिए था। मोबाइल उपकरणों पर (क्रोम में भी), ट्रैक प्लेबैक ने काम किया, लेकिन केवल स्क्रीन सक्रिय के साथ। जब स्क्रीन लॉक किया गया था, तो वर्तमान खिलाड़ी के बाद अगला ट्रैक नहीं खेला गया था। IOS / macOS के लिए, प्लेबैक ने एक समान तरीके से काम किया। अधिक जानकारी यहां प्राप्त की जा सकती है - अनुभाग "सिंगल ऑडियो स्ट्रीम"।

इसलिए ऑडियो के साथ ब्राउज़रों की विशेषताओं के बारे में थोड़ी जानकारी के लिए खोज करते हुए तीन समुद्रों पर चलना शुरू किया।

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

कार्यान्वयन के बाद, कुछ बारीकियां स्पष्ट हो गईं।

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

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

तीसरा, डिकोडिंग के साथ समस्याएं थीं। यदि mp3 / ogg / wav फ़ाइलों के टुकड़े क्लाइंट के पास आते हैं, तो इन टुकड़ों को चुपचाप डिकोड किया गया और खेला गया। लेकिन अगर mp4 फ़ाइल का हिस्सा, जो HE-AAC के कंटेनर के रूप में काम करता है, ब्राउज़र में आया, तो उन्हें डिकोड नहीं किया जा सकता। यह कुछ हद तक ओपेरा ब्राउज़र पर भी लागू होता है, जिसमें एमपी 3 फ़ाइलों का प्लेबैक संस्करण से संस्करण में अस्थिर होता है - यह कभी-कभी पुन: उत्पन्न होता है, और यह एक त्रुटि देता है कि यह प्रारूप समर्थित नहीं है।

चौथा, ट्रैक का नाम प्रदर्शित नहीं किया गया था / एक देशी ऑडियो प्लेयर (iPad पर), incl के साथ एक प्लेट पर बंद स्क्रीन पर नहीं बदला था। जब पटरियों के बीच स्विच करना। शायद इस तथ्य के कारण कि परीक्षणों ने आईओएस के संस्करण 9 के साथ आईपैड का उपयोग किया - उस समय कोई अन्य नहीं था।

परिणामस्वरूप, इस स्तर पर, वेब ऑडियो को छोड़ना पड़ा। फिर भी, क्रॉसफ़ेड ब्राउज़रों के लिए नहीं है, अच्छी गुणवत्ता में मानक संगीत रचनाएं बहुत अधिक वजन करती हैं।

चूंकि हम क्रॉसफेड ​​से इनकार करते हैं, इसलिए हम क्रमशः संगीत ट्रैक के अंत में और शुरुआत में एक साधारण फीका को फीका कर देते हैं।

अंतिम से पहले वर्ष में कोड थोड़ा संशोधित और परीक्षण किया गया था। परीक्षणों के परिणामस्वरूप, विभिन्न बारीकियां सामने आईं (तालिका में दिखाया गया है)। यह सब साउंड मैनेजर 2 लाइब्रेरी का उपयोग कर रहा है।



हम पटरियों के बीच संक्रमण के क्षण का निर्धारण करने और यह समझने के लिए कि वे किस बिंदु पर खेलना बंद करते हैं, सभी घटनाओं को जोड़ते हैं।




इससे यह माना जा सकता है कि पृष्ठभूमि में जेएस का निष्पादन थ्रॉटलिंग है या कि निष्पादन थ्रेड पूरी तरह से बंद हो जाता है (घटनाएं और समय)। हालांकि, बाद में यह स्पष्ट हो जाएगा कि यह आंशिक रूप से एक सही निष्कर्ष था। नीचे हम एक और 1 बारीकियों पर विचार करेंगे, जो पटरियों को चलाने और ध्वनि को प्रकट नहीं करने से संबंधित है।


उसी क्षण, यह सवाल उठा: पीसी और मोबाइल उपकरणों पर पटरियों के ऑटो-प्ले के बारे में क्या?

ऑटोप्ले से तात्पर्य पृष्ठ लोड करते समय किसी भी उपयोगकर्ता की कार्रवाई के बिना ट्रैक चलाने की स्वचालित शुरुआत से है।

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

और इसलिए, उस समय निम्नलिखित था:

1. एक ही समय में दो या अधिक ध्वनियों को पुन: पेश करना असंभव (वांछनीय नहीं) है;
2. ट्रैक के छद्म "ऑटो प्ले" के लिए, उपयोगकर्ता की अनुमति आवश्यक है - पहले इंटरैक्शन, बाद में इसे "डिवाइस को एक उंगली बेचें" कहा जाता था;
3. पृष्ठभूमि में (पृष्ठभूमि टैब / लॉक स्क्रीन) JS (यह सब ब्राउज़र पर निर्भर करता है):
   या तो पूरी तरह से जमा देता है;
   या तो थ्रॉटलिंग;
   या तो सक्रिय टैब के साथ ही काम करता है;
   
4. आप स्वचालित रूप से ध्वनि के बिना प्लेबैक शुरू कर सकते हैं, लेकिन यह स्पष्ट नहीं है कि (ऑडियो सामग्री के लिए) क्यों?
5. कहीं दूर की सोच खत्म होना शुरू हो जाती है, लेकिन कैसे जेएस को पृष्ठभूमि में निष्पादित करना जारी रखना है?

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

पुस्तकालयों के काम के वीडियो प्रदर्शन के साथ कुछ कोड उदाहरण:

1. साउंड मैनेजर 2 - जीथब पेज , जीथब रिपॉजिटरी , वीडियो: मैकओएस सफारी 12 ; iOS सफारी 10 अनलॉक स्क्रीन के साथ
2. बहुत बड़ी गलती
   Howler v2.0.9 - github पेज , github रिपॉजिटरी , वीडियो: macOS Safari 12 , iOS Safari 10
   हावलर v2.0.15 - जीथब पृष्ठ , जीथब रिपॉजिटरी , वीडियो: मैकओएस सफारी 12
   Howler v2.1.1 - जीथब पेज , जीथब रिपॉजिटरी , वीडियो: मैकओएस सफारी 12 , आईओएस सफारी 10
   

MacOS के लिए, ध्वनि के बिना वीडियो रिकॉर्डिंग की गई थी, इसलिए आपको वॉल्यूम संकेतक को देखने की आवश्यकता है - टैब पर स्पीकर की छवि।

रिपॉजिटरी में अधिक उदाहरण वीडियो उपलब्ध हैं।

Howler v2.1.1 के लिए इंटरैक्टिव उदाहरण में - कभी-कभी आप एक ही समय में कई ध्वनियां सुन सकते हैं, यह उपयोगकर्ता द्वारा अनलॉक किए गए ऑडियो तत्वों के एक पूल के अतिरिक्त होने के कारण है (यह लाइब्रेरी के भविष्य के संस्करणों में तय किया जाना चाहिए)।

इन पुस्तकालयों की निष्क्रियता का कारण क्या है?

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

नया ऑडियो () का उपयोग करके जीथब पृष्ठ पर और जीथब पर भंडार में एक उदाहरण परीक्षण। वीडियो: macOS सफारी 12 ; iOS सफारी 10 अनलॉक स्क्रीन के साथ।

ऐसा लगता है कि कुछ प्रकार के सार्वभौमिक उपकरण मौजूद नहीं हैं और कुछ अन्य समझौता समाधान की तलाश करना आवश्यक है।

फिर हम टीम के लोगों के साथ बैठकर चर्चा करते हैं, और ऑडियो प्लेयर के काम में वास्तव में क्या महत्वपूर्ण है? इसके लिए प्रयोग विज्ञापन जारी रखना संभव होगा, लेकिन हमें आगे बढ़ने की जरूरत है।

सबसे पहले, महत्वपूर्ण बिंदुओं की पहचान की गई, जो वांछित परिणाम की उपलब्धि को रोकती हैं:

1. जब टैब निष्क्रिय होता है, तो MacOS पर सफारी ट्रैक नहीं करती है;
2. iOS और Android पर चलने वाले स्मार्टफ़ोन पर बैकग्राउंड में (जब स्क्रीन लॉक होती है) संगीत सुनने की कोई संभावना नहीं है, मैं मोबाइल एप्लिकेशन (भविष्य में) में उपयोगकर्ताओं के आक्रामक पुनर्निर्देशन से बचना चाहूंगा, जैसा कि पिछला अनुभव बताता है कि उपयोगकर्ताओं का एक बड़ा हिस्सा मोबाइल एप्लिकेशन इंस्टॉल नहीं करना चाहता है ;
3. खिलाड़ी एक गतिशील प्लेलिस्ट के साथ सही ढंग से काम नहीं करता है, अर्थात जब यह पहले से पता नहीं है कि अगला ट्रैक क्या होगा।

इसके अलावा, यह उन लक्ष्यों को तैयार करने की अनुमति देता है जिन्हें प्राप्त करना आवश्यक था:

1. पृष्ठभूमि में खिलाड़ी प्रदान करें - विभिन्न ब्राउज़रों में और विभिन्न प्लेटफार्मों पर;
2. उपयोगकर्ता को यह चुनने की अनुमति दें कि क्या उपयोग करना है: साइट पर या मोबाइल एप्लिकेशन में संगीत सुनें;
3. विभिन्न भविष्य की परियोजनाओं में खिलाड़ी (या दृष्टिकोण) का उपयोग करने की क्षमता प्रदान करें।

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

एचटीएमएल 5 ऑडियो + डेडिकेटेड वर्कर्स जीथब पेज पर और जीथब रिपॉजिटरी में उदाहरण का परीक्षण करते हैं ।

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



उस समय भी, निम्न उदाहरण का परीक्षण किया गया था ( जीथूब पेज , जीथब रिपॉजिटरी ), जब एचटीएमएल 5 ऑडियो टैग डोम (वीडियो: मैकओएस सफारी 12 , आईओएस सफारी 10 ) में एम्बेडेड है और यह पटरियों पर स्विच करते समय एसआरसी को प्रतिस्थापित करता है। आज तक, 12 सफारी में macOS पर, यह उदाहरण काम करता है। दुर्भाग्य से, अभी सफारी 10 और 11 में macOS पर इस उदाहरण की कार्यक्षमता का परीक्षण करने का कोई तरीका नहीं है, लेकिन उस समय यह उदाहरण परीक्षण ( ऑटोप्ले नीतियों , ऑटोप्ले प्रतिबंध ) के दौरान काम नहीं आया।

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

इसके अलावा, आईओएस सफारी और आईओएस क्रोम में पटरियों के प्लेबैक के बारे में, केवल एचएलएस का उपयोग करके पृष्ठभूमि (स्क्रीन लॉक होने के साथ) में ट्रैक खेलना संभव पाया गया। IOS और macOS प्लेटफार्मों के लिए, यह प्रारूप मानक है और प्रसारण ऑपरेटिंग सिस्टम द्वारा समर्थित है। एंड्रॉइड क्रोम और एज के लिए, एक देशी कार्यान्वयन भी उपलब्ध है। और क्रोम में पीसी के लिए, आप सॉफ्टवेयर हैंडलर का उपयोग कर सकते हैं, उदाहरण के लिए, hls.js , Bitmovin Player , आदि।

गिटब रिपॉजिटरी का एक लिंक कोड का एक उदाहरण प्रदान करता है जो सरलतम उपयोग के मामले को कवर करता है - बस सर्वर पर उत्पन्न स्ट्रीम को रिवाइंड करने की क्षमता के बिना, अगले ट्रैक पर स्विच आदि खेलता है। उदाहरणों का उपयोग कर प्रस्तुत किया जाता है: ऑडियो टैग, वीडियो टैग, hls.js पुस्तकालय, और बिटमॉविन के खिलाड़ी। इस सामग्री के लिए Node.js. की आवश्यकता होती है

निष्कर्ष

पहला बिंदु, दुर्भाग्य से, ब्राउज़रों की विविधता के कारण, कोई सार्वभौमिक समाधान नहीं है जो ब्राउज़रों में संगीत को हर जगह समान रूप से सुनने की अनुमति देगा। हर जगह सीमाएं हैं और अभ्यास शो के रूप में, आप कर सकते हैं, काफी, आराम से उनके साथ रहते हैं।

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

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

और अंत में

मैं एचएलएस तकनीक का उपयोग करके आईओएस पर संगीत बजाने से संबंधित एक छोटी प्रतियोगिता की घोषणा कर रहा हूं।

विवरण को जीथब पर लिंक पर देखा जा सकता है।