एचटीएमएल 5 ऑडियो - स्थिति। भाग 1

(मई 2012 में एक फ्रंटएंड विशेषज्ञ और विशेष रूप से मीडिया प्रारूपों, कई ओपन सोर्स प्रोजेक्ट्स और happyworm.com के एक डेवलपर द्वारा लिखित और ब्राउज़रों द्वारा नए मीडिया टैग और प्रारूपों के समर्थन से मामलों की वर्तमान स्थिति को दर्शाता है। - नोट। अनुवादित)

यह 2009 के मेरे (लेखक, मार्क बोस) लेख, " ब्राउज़र में मूल ऑडियो " (Eng। और अक्टूबर 2010 में पूरक - लगभग अनुवाद) का एक निरंतरता है, जो HTML5 में ऑडियो की मूल बातें बताता है। यदि आप <ऑडियो> टैग और इसके संबद्ध एपीआई के संचालन को महसूस करना चाहते हैं तो आप इसे पहले पढ़ना चाहते हैं। ( एक रूसी अनुवाद है , लेकिन 2009 से संस्करण में।)

अब, 2.5 साल बाद, यह देखने का समय है कि चीजें कैसे चल रही हैं। जबकि कई उन्नत ऑडियो एपीआई सक्रिय रूप से विकसित किए जा रहे हैं, देशी ब्राउज़र-आधारित ध्वनि समर्थन जो हमें प्रेरित करता है, सुधार कर रहा है - यह <ऑडियो> टैग की आकर्षक दुनिया में लौटने का समय है।

यह समझने का एक अच्छा तरीका है कि चीजें कैसे चल रही हैं, कुछ उपयोग उदाहरणों को देखने के लिए, जिन्हें हम बाद में देखेंगे।

हम कैसे शुरू करें? कई अवधारणाएं हैं जिन्हें आपको तैयारी के लिए मास्टर करने की आवश्यकता है। आइए सबसे पहले MIME प्रकारों को समझते हैं।

■ MIME प्रकार

● सर्वर भाग

उन्हें इंटरनेट मीडिया प्रकार भी कहा जाता है - यह आपके सिस्टम को मीडिया के साथ काम करने का तरीका जानने का एक तरीका है।

सबसे पहले, सर्वर को MIME प्रकारों का ठीक से समर्थन करने के लिए कॉन्फ़िगर किया जाना चाहिए। अपाचे के मामले में, इसका मतलब है कि .htaccess में लाइनें हैं:

# AddType TYPE/SUBTYPE EXTENSION AddType audio/mpeg mp3 AddType audio/mp4 m4a AddType audio/ogg ogg AddType audio/ogg oga AddType audio/webm webma AddType audio/wav wav 

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

● ग्राहक भाग

कोड या मार्कअप में डेटा स्रोतों का वर्णन करते समय, आप एक MIME प्रकार निर्दिष्ट कर सकते हैं जो ब्राउज़र को डेटा को सही ढंग से निर्धारित करने की अनुमति देता है।

HTML5 ऑडियो का वर्णन करने का सबसे विश्वसनीय तरीका कुछ इस प्रकार है:

 <audio> <source src="elvis.mp3" type='audio/mpeg; codecs="mp3"'> <source src="elvis.oga" type='audio/ogg; codecs="vorbis"'> <!--  -     --> </audio> 

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

डेटा पते के साथ मिलकर, टाइप विशेषता src विशेषता में निर्दिष्ट है। यह वैकल्पिक है, लेकिन यह ब्राउज़र को डाउनलोड करने से पहले फ़ाइल को डिलीट करने के लिए MIME प्रकार और कोडेक्स का पता लगाने में मदद करता है। यदि नहीं, तो ब्राउज़र संभव तरीकों से फ़ाइल से प्रकार का पता लगाने की कोशिश करता है।

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

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

● पहले से ऑडियो के प्रकार को जानने में मदद मिलेगी .canPlayType (शायद)

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

यदि HTML में ऑडियो ऑब्जेक्ट का वर्णन किया गया है, तो ऑब्जेक्ट की पहुंच DOM के माध्यम से प्राप्त की जा सकती है:

 var audio = document.getElementsByTagName('audio')[index]; 

या, यदि आईडी परिभाषित है,

 var audio = document.getElementById('my-audio-id'); 

वैकल्पिक रूप से, वस्तु पूरी तरह से जावास्क्रिप्ट में बनाई गई है।

 var audio = new Audio(); 

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

 audio.canPlayType('audio/ogg'); 

तुम भी स्पष्ट रूप से एक कोडेक निर्दिष्ट कर सकते हैं:

 audio.canPlayType('audio/ogg; codecs="vorbis"'); 

canPlayType 3 मानों में से एक देता है:
1) शायद
2) हो सकता है , या
3) "" (खाली स्ट्रिंग)।
इन विचित्र प्रकारों को प्राप्त करने की बात उस स्थिति की सामान्य विचित्रता से आती है जिसमें कोडेक्स होते हैं, जब तक कि हम उन्हें टाइप करके आंकते हैं। खेलने के लिए वास्तविक प्रयास के बिना, ब्राउज़र केवल कोडेक की प्रयोज्यता के बारे में अनुमान लगा सकता है।

कुल में, समर्थन को सत्यापित करने के लिए, हम करते हैं:

 var audio = new Audio(); var canPlayOgg = !!audio.canPlayType && audio.canPlayType('audio/ogg; codecs="vorbis"') != ""; 

यहाँ यह जाँच की जाती है कि canPlayType समर्थित है ("!!" बस स्ट्रिंग ऑब्जेक्ट को बूलियन प्रकार में बदल देता है) और फिर यह चेक किया जाता है कि हमारे फॉर्मेट का canPlayType खाली स्ट्रिंग नहीं है। (यह किसी तरह पहले भाग के साथ अतार्किक है। शायद, लेखक यह उल्लेख करना भूल गया कि वह अपरिभाषित वापस आ सकता है? - लगभग। अनुवाद

■ ब्राउज़र में विभिन्न कोडेक्स के लिए समर्थन

आइए देखें कि आधुनिक ब्राउज़रों में कोडेक्स का समर्थन कैसे किया जाता है।
डेस्कटॉप ब्राउज़र कोडेक्स:

डेस्कटॉप संस्करण	संख्या	कोडेक समर्थन
इंटरनेट एक्सप्लोरर	9.0+	एमपी, एएसी
क्रोम	6.0+	ओग वोरबिस, एमपी 3, डब्ल्यूएवी (क्रोम 9 के बाद से)
फ़ायरफ़ॉक्स	3.6+	ओग वोरबिस, डब्ल्यूएवी
सफारी	5.0+	एमपी 3, एएसी, डब्ल्यूएवी
ओपेरा	10.0+	ओग वोरबिस, डब्ल्यूएवी

मोबाइल कोडेक्स:

मोबाइल ब्राउजर	संस्करण	कोडेक समर्थन
ओपेरा मोबाइल	11.0+	डिवाइस पर निर्भर
एंड्रॉयड	2.3+	डिवाइस पर निर्भर
मोबाइल सफारी	(iPhone, iPad, iPod Touch) iOS 3.0+	एमपी, एएसी
ब्लैकबेरी	6.0+	एमपी, एएसी

अच्छी खबर यह है कि लेखन के समय, लगभग 80% ब्राउज़र एचटीएमएल 5 ऑडियो का समर्थन करते हैं।

बुरी खबर यह है कि किसी भी कोडेक के लिए सार्वभौमिक समर्थन पर अभी भी कोई समझौता नहीं है, इसलिए सर्वर को ब्राउज़रों में HTML5 ऑडियो का पूरी तरह से समर्थन करने के लिए एमपी 3 और ओग वोरबिस दोनों का समर्थन करना चाहिए।

मजेदार : एंड्रॉइड 2.2 <वीडियो> का समर्थन करता है लेकिन <ऑडियो> नहीं। ऑडियो चलाने के लिए, आपको <वीडियो> टैग का उपयोग करना होगा।

● कंटेनर, प्रारूप और फ़ाइल एक्सटेंशन (और फिर, ये MIME प्रकार)

मैंने ऊपर प्रसिद्ध ऑडियो प्रारूपों का उल्लेख किया है, लेकिन तकनीकी रूप से हमें उनके कंटेनर प्रारूप के साथ काम करना होगा। (एक कंटेनर में एक से अधिक प्रारूप हो सकते हैं - उदाहरण के लिए, MP4 में AAC और AAC + हो सकते हैं।)

पात्र	प्रारूप	फ़ाइल एक्सटेंशन	माइम प्रकार	कोडेक स्ट्रिंग
एमपी 3	एमपी 3	.mp3	ऑडियो / एमपीईजी	एमपी 3
MP4	एएसी, एएसी +	.mp4, .m4a, .aac	ऑडियो / mp4	mp4a.40.5
OGA / OGG	जीजी vorbis	.योग, .ogg	ऑडियो / ऑग	वॉर्बिस
WAV	पीसीएम	.wav	ऑडियो / wav	1

● हमारे पास <ऑडियो> है और इसका उपयोग करने से डरते नहीं हैं!

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

सबसे अधिक इस्तेमाल की जाने वाली विशेषताओं में से कुछ:

संपत्ति	विवरण	वापसी मूल्य
मौजूदा समय	खिलाड़ी कर्सर स्थिति	डबल (सेकंड)
अवधि	खेलने का समय	डबल (सेकंड); केवल पढ़ें
मौन	ध्वनि गड़बड़ है	बूलियन
रोके गए	प्लेबैक बंद कर दिया है	बूलियन
आयतन	मात्रा स्तर	डबल (0 से 1 तक)

इनका उपयोग करना बेहद सरल है। उदाहरण के लिए:

 var audio = new Audio(); var duration = audio.duration; 

अवधि चर ऑडियो क्लिप की अवधि (सेकंड में) पर सेट है।

■ बफरिंग, खोज और समय सीमा

इस मोर्चे पर स्थिति में सुधार हो रहा है, ब्राउज़र डेवलपर्स विनिर्देश के थोक को करना शुरू कर रहे हैं।

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

● बफर विशेषता

फ़ाइल के पूरी तरह से लोड वर्गों के अंतराल लौटाता है। एक छोटा सा उदाहरण:

 //   TimeRanges   var buffered = audio.buffered; //        TimeRange var bufferedEnd = audio.buffered.end(); 

● TimeRanges ऑब्जेक्ट

TimeRanges ऑब्जेक्ट में एक या अधिक के रूप में बफ़र किए गए मीडिया पर भागों का डेटा होता है - आपने यह अनुमान लगाया है - समय सीमा। TimeRanges ऑब्जेक्ट में ये गुण होते हैं:

इसमें मीडिया फ़ाइल के बफ़र किए गए हिस्सों के भाग (एक या अधिक - कितने बफ़र्ड थे) के डेटा शामिल हैं और इसमें गुण हैं:

लंबाई - अंतराल की संख्या
प्रारंभ (सूचकांक) - निर्दिष्ट अंतराल का प्रारंभ समय,
अंत (इंडेक्स) - निर्दिष्ट अंतराल का अंत समय
(प्लेबैक की शुरुआत से गिना जाता है)।

मजेदार : डिफ़ॉल्ट रूप से, जेएस ऑडियो एपीआई में समय आयाम सेकंड है, हालांकि जेएस में पारंपरिक फ़ंक्शन मिलीसेकंड का उपयोग करते हैं।

 ------------------------------------------------------ // |=============| |===========| | ------------------------------------------------------ 0 5 15 19 21 

तो इस उदाहरण में:

  audio.buffered.length //returns 2 audio.buffered.start(0) //returns 0 audio.buffered.end(0) //returns 5 audio.buffered.start(1) //returns 15 audio.buffered.end(1) //returns 19 audio.buffered.end() //returns 19 

किन मामलों में एक से अधिक बफरिंग अंतराल हो सकते हैं? उपयोगकर्ता आगे क्लिक करता है, प्लेयर यूनिट पर स्केल के एक अनबफर्ड सेक्शन पर। ऑब्जेक्ट क्लिक बिंदु से एक नया बफ़रिंग शुरू करता है, और 2 बफ़रिंग अंतराल होते हैं।

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

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

आप इस आसान एचटीएमएल 5 मीडिया इवेंट इंस्पेक्टर के साथ अपने ब्राउज़र के टाइमरंग्स को जांच सकते हैं

● मांगने और खोजने योग्य विशेषताएँ

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

जारी रखने के लिए ...

मूल वेबसाइट, html5doctor.com पर ध्यान दें:

यह लेख मार्क बोस द्वारा लिखा गया था। मार्क नई और खुली वेब तकनीकों को विकसित / सिखाता / वर्णन करता है और बढ़ावा देता है। Happyworm के सह-संस्थापक, एक छोटा वेब स्टूडियो जो विशेष रूप से jPlayer Media फ्रेमवर्क विकसित करता है, यह HTML5 और जावास्क्रिप्ट का उपयोग करके ब्राउज़र क्षमताओं का विस्तार करता है। दिल में एक जनरल के रूप में, मार्क अपना ज्यादातर समय वेब मीडिया और रियल-टाइम प्रोटोकॉल पर बिताते हैं। ऑडियो से संबंधित हर चीज का प्रेमी, वह अब हाइपरहाइडो परियोजना में अपने प्रयोगों में "कुछ नया करने" के कार्य पर लगन से काम कर रहा है । आप मार्क के ट्विटर का अनुसरण कर सकते हैं।

निम्नलिखित भाग की सामग्री:

● प्रीलोड के बारे में ध्यान दें
● सफलतापूर्वक खेला गया
■ मीडिया की घटनाओं
■ स्ट्रीमिंग
विनिर्देशों का विकास (या "वाह, यह बात चलती है!")
● लोड विधि
● ब्राउज़र आधिकारिक दस्तावेज पर कब लौटेंगे?
● ऑटो प्ले और वॉल्यूम
● कई ऑडियो टैग का एक साथ प्लेबैक
● ओएस पर निर्भर
■ क्या है?
● चरण परिवर्तन
● मीडिया के टुकड़े
■ उन्नत ऑडियो एपीआई: ब्राउज़र में भविष्य की ध्वनि
■ निष्कर्ष
■ साहित्य

HTML5 ऑडियो टैग पर स्थानीय लेख और अनुवाद:
* एचटीएमएल 5 , 7 अगस्त, 2011 में ऑडियो का दृश्य
* HTML5 ऑडियो , 13 जुलाई, 2012 का उपयोग करके कैसेट रिकॉर्डर बनाएँ
* ऑडियो डेटा एपीआई के माध्यम से ध्वनि प्रसंस्करण , 30 अगस्त, 2010
* एचटीएमएल 5 ऑडियो और गेम डेवलपमेंट: ब्राउज़र बग, समस्याएं और समाधान, विचार , 6 अगस्त, 2010
* Mast5 HTML5 ऑडियो टैग , 21 जुलाई 2012
* एचटीएमएल 5 <ऑडियो> के साथ समस्याएं , 16 मई, 2011
* HTML5 ऑडियो और वीडियो का उपयोग करना , अंतिम मॉड। 13 जून 2012
इस लेख के अनुवाद की उपयोगिता को इंगित करने के लिए ShpuntiK का धन्यवाद।

UPD: दूसरे भाग का अनुवाद ।