हमारे व्यावहारिक विसर्जन को एक असामान्य परिदृश्य द्वारा वर्णित किया गया है - हम इस बारे में बात नहीं करेंगे कि एचटीएमएल 5 क्या कर सकता है, लेकिन उन संभावनाओं के बारे में जो आज तक प्रदान नहीं करते हैं और इस समस्या को व्यवहार में कैसे कम किया जा सकता है।



एचटीएमएल 5 आज एक ऐसी श्रृंखला है जिसका अंत भी पटकथा लेखकों को नहीं मालूम है, एक कहानी जिसमें ड्राफ्ट स्केच में लगभग तैयार अध्याय और अध्याय हैं, और भविष्य की कहानियों के लिए सिर्फ नोट्स हैं।

ऑडियो की दृश्यता, या बल्कि ऑडियो जानकारी के लिए मूलभूत निम्न स्तर की पहुंच, भविष्य के लिए मोटे ड्राफ्ट और नोट्स के बीच कहीं है।

क्या और नहीं कर सकता <ऑडियो>

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

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

इसके अलावा, यह न केवल विनिर्देश द्वारा प्रदान की गई क्षमताओं पर निर्भर करेगा, बल्कि किसी विशेष ब्राउज़र में कार्यान्वयन पर (अधिक हद तक) - यह कोई संयोग नहीं है कि रोवियो और Google, HTML में एंग्री बर्ड्स को क्रोम के लिए अनुकूलित करते हुए, ध्वनियों के लिए ऑडियो तत्वों का उपयोग करने के विचार को छोड़ देते हैं एचटीएमएल 5। इसके बजाय, HTML5 पर एंग्री बर्ड्स फ़्लैश का उपयोग करता है। ( डेवलपर ब्लॉग पर चर्चा भी देखें।)

<ऑडियो> तत्व के विषय में गहन जानकारी के लिए, मैं लेख को HTML5 <ऑडियो> की शक्ति को अनलॉक करने की भी सलाह देता हूं, जो HTML5 में ऑडियो के साथ काम करने के लिए बुनियादी तकनीकों का वर्णन करता है।

ध्वनि निष्कर्षण मानक

वर्तमान में, W3C ऑडियो समूह के भीतर ऑडियो स्ट्रीम तक पहुंचने के लिए एक निम्न-स्तरीय एपीआई के निर्माण पर काम चल रहा है।

विकसित एपीआई न केवल ऑडियो स्ट्रीम में निम्न-स्तरीय पहुंच प्राप्त करने की क्षमता प्रदान करेगा, बल्कि मक्खी पर ऑडियो को संश्लेषित भी करेगा।

ऑडियो एपीआई ऑडियो नमूने पढ़ने, ऑडियो डेटा लिखने, आवाज़ बनाने और न्यूनतम विलंबता के साथ क्लाइंट-साइड ऑडियो प्रसंस्करण और संश्लेषण करने के लिए तरीके प्रदान करेगा। यह स्क्रिप्ट में सीधे निम्न-स्तरीय हेरफेर के लिए पीसीएम ऑडियो स्ट्रीम में प्रोग्रामेटिक एक्सेस को भी जोड़ देगा।

आज, मोज़िला और Google ऑडियो जानकारी तक पहुंचने के लिए पहले से ही एपीआई के अपने संस्करण प्रदान करने में कामयाब रहे हैं।

मोज़िला ऑडियो डेटा एपीआई पढ़ने और लिखने के लिए ऑडियो स्ट्रीम तक आसान पहुँच प्रदान करता है, वास्तविक समय ऑडियो प्रोसेसिंग एल्गोरिदम को लागू करने का कार्य स्क्रिप्ट पक्ष (जावास्क्रिप्ट में) पर हल किया जाना चाहिए। Google के वेब ऑडियो एपीआई , वेबकिट के लिए विनिर्देश एक उच्च-स्तरीय एपीआई प्रदान करता है जिसमें मूल प्रसंस्करण कार्य ब्राउज़र द्वारा मूल रूप से किए जा सकते हैं।

W3C वर्किंग ग्रुप एक सामान्य दृष्टिकोण पर काम कर रहा है जो अधिक सुविधाएँ प्रदान करने के लिए दो-परत API प्रदान करेगा।

वैसे, ऑडियो के साथ काम करने के लिए क्लाइंट API के अलावा समूह की गतिविधि के क्षेत्र में ऑडियो डिवाइस तक पहुँचने के कार्य भी शामिल हैं, जिनमें माइक्रोफ़ोन और अन्य ध्वनि स्रोत शामिल हैं, और स्पीकर के साथ काम करना, जिसमें मल्टी-चैनल मोड भी शामिल है।

ट्विटर @ w3caudio पर समूह की खबर का पालन करें।

लेकिन यह सभी गीत हैं, चलो अभ्यास करने के लिए!

व्यावहारिक दृष्टिकोण: आज क्या काम करता है?

आज जो व्यावहारिक दृष्टिकोण काम कर रहा है, वह पहले से है।

हाँ, हाँ! इतना दुखद है। बाद की पीढ़ी के साथ श्रव्य श्रव्य सूचनाओं का पूर्व-प्रसंस्करण पुन: प्रस्तुत श्रव्य धारा के साथ समकालिक होता है।

वास्तव में, अगर हम जानकारी के शब्दार्थ निष्कर्षण (उदाहरण के लिए, गीत के बोल) के बारे में बात कर रहे हैं, तो प्रीप्रोसेसिंग एकमात्र व्यावहारिक तरीका है, और एक नियम के रूप में, यह प्रसंस्करण कलम के साथ किया जाता है।

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

आइए देखें कि यह कैसे काम करता है।

जीवन उदाहरण: बारिश में चील

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

अंदर क्या है

• jQuery + Sizzle.js (चयनकर्ताओं के लिए)
• jPlayer (ऑडियो और वीडियो चलाने के लिए)
• खुद का कोड, जो वास्तव में हमारे लिए दिलचस्प है;)

यह कैसे काम करता है
प्लेबैक को नियंत्रित करने के लिए ऑडियो इनिशियलाइज़ेशन और ईवेंट हैंडलर स्किप करना।

पूरे गीत को एक विशेष वाक्यांश या एनीमेशन के चरण की शुरुआत के अनुरूप टुकड़ों में पिरोया गया है। प्रत्येक टुकड़े की शुरुआत एक सरणी में रखी जाती है:

var timings = newArray(); timings[0] = 11.5; timings[1] = 17; timings[2] = 24; timings[3] = 29; timings[4] = 35.5; ... 

गीतों से वाक्यांशों का अलग संग्रहित सरणी:

 var lyrics = newArray(); lyrics[0] = 'Exile'; lyrics[1] = 'It takes your mind... again'; lyrics[2] = "You've got sucker's luck"; lyrics[3] ='Have you given up?'; ... 

समय के संदर्भ के साथ और ऑडियो रचना में वर्तमान क्षण के आधार पर, एक नए वाक्यांश पर स्विच करने के लिए ट्रिगर होता है:

 if(event.jPlayer.status.currentTime >= timings[currentTrigger] && nolyrics != true) { fireTrigger(currentTrigger); currentTrigger++; } 

फिर, सही समय पर, एक या दूसरे ट्रिगर को निकाल दिया जाता है, जो jQuery का उपयोग करके उपयुक्त एनीमेशन लॉन्च करता है:

 function fireTrigger(trigger) { switch (trigger) { case 0: $('#lyrics1 p').addClass('vilify').html(lyrics[0]).fadeIn(1500); break; case 1: $('#lyrics2 p').html(lyrics[1]).fadeIn(1000).delay(5000).fadeOut(1000); $('#lyrics1 p').delay(6000).fadeOut(1000); break; case 2: $('#lyrics1 p').fadeIn(1000); break; case 3: $('#lyrics2 p').fadeIn(1000).delay(4000).fadeOut(1000); $('#lyrics1 p').delay(5000).fadeOut(1000); break; case 4: $('#lyrics1 p').removeClass('vilify').html(lyrics[2]).fadeIn(1000); break; case 5: $('#lyrics2 p').html(lyrics[3]).fadeIn(1000).delay(3000).fadeOut(1000); $('#lyrics1 p').delay(4000).fadeOut(1000); break; ... 

बहुत सरल और प्रभावी, सहमत! इस पूरी कहानी में सबसे महत्वपूर्ण बात यह है कि एचटीएमएल, सीएसएस और जावास्क्रिप्ट की क्षमताओं के साथ ऑडियो स्ट्रीम के संयोजन में आसानी है।

जीवन उदाहरण: संगीत मज़ेदार हो सकता है

म्यूजिक कैन बी फन कला और संगीत के प्रतिच्छेदन पर एक मिनी-गेम है। मैं पहले थोड़ा खेलने का सुझाव देता हूं ताकि यह स्पष्ट हो जाए कि क्या चर्चा होगी;)

उदाहरण अधिक जटिल है - यहां कैनवस सुविधाओं को पहले से ही सक्रिय रूप से उपयोग किया जाता है, लेकिन चूंकि हम केवल संगीत घटक में रुचि रखते हैं, इसलिए सब कुछ डरावना नहीं है!

पिछले मामले की तरह, यहाँ रचना के साथ गीत पाठ को पुन: प्रस्तुत किया जाता है, जिसके लिए संबंधित समय संदर्भ JS कोड के विल्स में सिल दिया जाता है:

 var _lyrics = [ ["00:17.94", "00:22.39", "When I have once or twice"], ["00:23.93", "00:30.52", "Thought I lived my life .. for"], ["00:40.74", "00:47.38", "Oh oh I'll wake up in a thousand years"], ["00:48.40", "00:52.06", "With every ghost I'm looking through"], ["00:53.33", "00:57.80", "I was a cold, cold boy"], ["00:59.52", "01:03.00", "Hey! Oh when I lie with you"], ... 

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

 var _effects = [ ["00:06.00", 1], ["00:30.50", 1], ["00:42.50", 1], ["00:54.50", 2], ["00:57.00", 1], ... 

(वास्तव में, यहां तक ​​कि नीली और लाल गेंदों की उपस्थिति की आवृत्तियों को समय-समय पर बांधा जाता है;)

प्लेबैक पल (onTimeUpdate इवेंट) को अपडेट करते समय, कुछ विज़ुअलाइज़ेशन लागू किए जाते हैं:

 var _onTimeUpdate = function() { var t = MusicManager.currentTime = _song.currentTime; ... for (var i = _lyricsId; i < _lyrics.length; i++) { if (MusicManager.currentTime < _lyrics[i][0]) break; if (MusicManager.currentTime < _lyrics[i][1]) { SubtitleManager.changeSubtitle(_lyrics[i][2]); } else { SubtitleManager.changeSubtitle(""); _lyricsId++; } } for (var i = _effectsId; i < _effects.length; i++) { if (MusicManager.currentTime < _effects[i][0]) break; MusicManager.isEffect1Used = false; MusicManager.isEffect2Used = !_effects[i][1] == 2; _effectsId++; } } ... } 

फिर भी सरल और प्रभावी। एक ही तकनीक आसानी से न केवल शाब्दिक जानकारी के लिए, बल्कि विभिन्न दृश्य प्रभावों पर भी लागू होती है।

यह समझा जाना बाकी है कि क्या उत्तरार्द्ध को किसी भी तरह से स्वचालित किया जा सकता है, ताकि पेन के साथ बिल्कुल कुछ भी न हो। जाहिर है, आप कर सकते हैं - और उसके ब्लॉग पर अनुदान स्किनर आपको बताता है कि यह कैसे करना है;)

जीवन उदाहरण: डेटा माइनिंग

अपने ब्लॉग पोस्ट में, सोर्स कोड के साथ HTML5 / JS में Music Visualizer, HTML5 का उपयोग करके ऑडियो रेंडर करने में अपना अनुभव साझा करता है।

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

बढ़े हुए पैमाने पर, संगीत रचना के बारे में जानकारी इस प्रकार है:


इस रूप में डेटा होने पर, इसे आसानी से निकाला जा सकता है, उदाहरण के लिए, कैनवस का उपयोग करके। पाठ के रूप में, यह अभी भी सरल है (मैं एक उदाहरण नहीं देता, क्योंकि पाठ फ़ाइल में डेटा पैक किया गया है)।

इस तरह के पूर्व-संसाधित डेटा के साथ काम करने के लिए, ग्रांट ने एक विशेष जावास्क्रिप्ट पुस्तकालय (VolumeData.js संग्रह में) लिखा।

पुस्तकालय के साथ काम करना काफी सरल है। यह सब गीत की जानकारी डाउनलोड करने के साथ शुरू होता है:

 loadMusic("music.jpg"); 

जहां, लोडम्यूजिक फ़ंक्शन के अंदर, जैसा कि आपने अनुमान लगाया होगा, सामान्य चित्र लोड किया गया है:

 function loadMusic(dataImageURL) { image = new Image(); image.src = dataImageURL; playing = false; Ticker.addListener(window); } 

सभी आवश्यक घटकों को लोड करने के बाद, ध्वनि डेटा छवि से निकाला जाता है:

 volumeData = newVolumeData(image); 

इसके अलावा, सही समय पर, इस डेटा से आप औसतन जानकारी और बाएँ और दाएँ चैनल में ध्वनि स्तर के बारे में जानकारी प्राप्त कर सकते हैं:

 var t = audio.currentTime; var vol = volumeData.getVolume(t); var avgVol = volumeData.getAverageVolume(t-0.1,t); var volDelta = volumeData.getVolume(t-0.05); volDelta.left = vol.left-volDelta.left; volDelta.right = vol.right-volDelta.right; 

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

निष्कर्ष

संक्षेप में, यह केवल यह कहना है कि यह सब देखकर, यह महसूस करना कि HTML5 उद्योग के साथ सही दिशा में बढ़ रहा है, मुझे नहीं छोड़ता है। हां, सब कुछ संभव नहीं है, और सभी चीजों से बहुत आसानी से (और आमतौर पर संभव) किया जाता है क्योंकि वे आज फ्लैश या सिल्वरलाइट में किए जा सकते हैं। लेकिन बहुत पहले से ही क्षितिज पर है!