वेब पेज पर ऑडियो सेटिंग्स जोड़ता है, चलाता है और प्रबंधित करता है। फ़ाइल का पथ src विशेषता या उपटैग के माध्यम से निर्दिष्ट किया गया है। आप कंटेनर के अंदर टेक्स्ट लिख सकते हैं जो उन ब्राउज़र में प्रदर्शित होगा जो इस टैग के साथ काम नहीं करते हैं।
ब्राउज़रों द्वारा समर्थित कोडेक्स की सूची सीमित है और तालिका में दी गई है। 1.
| कोडेक | इंटरनेट एक्सप्लोरर | क्रोम | ओपेरा | सफारी | फ़ायरफ़ॉक्स |
| ओग/वोरबिस | |||||
| wav | |||||
| एमपी 3 | |||||
| ए.ए.सी. |
निर्दिष्ट ब्राउज़रों में सार्वभौमिक प्लेबैक के लिए, ऑडियो को विभिन्न कोडेक्स का उपयोग करके एन्कोड किया जाता है और फ़ाइलों को टैग के माध्यम से एक साथ जोड़ा जाता है।
सिंटैक्स विशेषताएँ पेज लोड होने के तुरंत बाद ध्वनि बजना शुरू हो जाती है। किसी ऑडियो फ़ाइल में एक नियंत्रण कक्ष जोड़ता है. ध्वनि को प्रारंभ से समाप्त होने के बाद भी दोहराता है। वेब पेज लोड करने के साथ-साथ फ़ाइल डाउनलोड करने के लिए उपयोग किया जाता है। चलायी जा रही फ़ाइल का पथ निर्दिष्ट करता है। समापन टैगआवश्यक।
HTML5 IE 8 IE 9+ Cr Op Sa Fx
ऑडियो
अलेक्जेंडर क्लिमेनकोव - चौदह
ऑडियो टैग आपके ब्राउज़र द्वारा समर्थित नहीं है. संगीत डाउनलोड।ओपेरा ब्राउज़र में उदाहरण का परिणाम चित्र में दिखाया गया है। 1.
चावल। 1. एक ऑडियो फ़ाइल चलाएं
ब्राउज़र्सऑडियो प्लेबैक नियंत्रण ब्राउज़रों के बीच दिखने में भिन्न-भिन्न होते हैं, लेकिन मूल तत्व समान होते हैं। ये प्ले/पॉज़ बटन, ट्रैक की लंबाई, बीता हुआ और कुल प्लेइंग समय और वॉल्यूम स्तर हैं।
पहले, ब्राउज़रों में ऑडियो और वीडियो सामग्री का समर्थन करने की अंतर्निहित क्षमताएं नहीं थीं, लेकिन इंटरनेट के विकास के साथ, आधुनिक ब्राउज़रों की एक विशेषता के रूप में मल्टीमीडिया तत्वों का समर्थन एक आवश्यकता बन गया है। HTML5 ने नए तत्व और पेश किए, जो सभी आधुनिक ब्राउज़रों में समर्थित हैं। टैग का मुख्य उद्देश्य पेज पर ऑडियो सामग्री जोड़ना है।
ऑडियो फ़ाइल प्रारूप भंडारण माध्यम (स्टोरेज डिवाइस) पर संग्रहीत होने पर ऑडियो डेटा की संरचना और प्रस्तुति सुविधाओं को निर्धारित करता है। ऑडियो डेटा की अतिरेक को खत्म करने के लिए, एक नियम के रूप में, विशेष ऑडियो कोडेक्स का उपयोग किया जाता है, जिसके लिए ऑडियो डेटा संपीड़ित होता है। आधुनिक ब्राउज़र निम्नलिखित 3 ऑडियो प्रारूपों का समर्थन करते हैं:
| हाँ | हाँ | हाँ |
| हाँ | हाँ | हाँ |
| हाँ | हाँ | हाँ |
| हाँ | हाँ | नहीं |
| हाँ | नहीं | नहीं |
| हाँ | हाँ | नहीं |
- एमपी3 प्रारूप एक ही समय में एक कोडेक और एक कंटेनर है। डाउनलोड किए गए संगीत को होस्ट करने के लिए इसका व्यापक रूप से हर जगह उपयोग किया जाता है।
- WAV प्रारूप एक ही समय में एक कोडेक और एक कंटेनर भी है।
- ओग कंटेनर + वोरबिस ऑडियो कोडेक। उन्हें आमतौर पर "ओग वॉर्बिस" कहा जाता है। इसे Xiph समुदाय द्वारा मालिकाना MP3, AAC और WMA को बदलने के लिए विकसित किया गया था।
ऑडियो के लिए MIME प्रकार:
| ऑडियो/एमपीईजी |
| ऑडियो/ओजीजी |
| ऑडियो/wav |
| 4.0 | 3.5 | 10.5 | 4.0 | 9.0 | 12.0 |
| स्वत: प्ले | स्वत: प्ले | निर्दिष्ट करता है कि ऑडियो तैयार होते ही स्वचालित रूप से प्रारंभ हो जाएगा। |
| को नियंत्रित करता है | को नियंत्रित करता है | अंतर्निहित मीडिया फ़ाइल नियंत्रण (प्ले/पॉज़ बटन, स्लाइडर जो आपको वीडियो के एक विशिष्ट टुकड़े पर जाने की अनुमति देता है, और वॉल्यूम नियंत्रण) प्रदर्शित करता है। |
| कुंडली | कुंडली | फ़ाइल प्लेबैक को लूप करता है (हमारा गाना अच्छा है - फिर से शुरू करें)... |
| मौन कर दिया गया | मौन कर दिया गया | इंगित करता है कि ऑडियो म्यूट कर दिया जाएगा (कोई ध्वनि नहीं)। |
| प्रीलोड | ऑटो मेटाडाटा कोई नहीं | निर्दिष्ट करता है कि पेज लोड होने पर ऑडियो कैसे लोड किया जाना चाहिए। यदि ऑटोप्ले विशेषता मौजूद है तो विशेषता को अनदेखा कर दिया जाता है। |
| स्रोत | यूआरएल | ऑडियो फ़ाइल का URL निर्दिष्ट करता है. |
चौड़ाई, ऊंचाई और पोस्टर विशेषताओं को छोड़कर, तत्व तत्व के समान विशेषताओं का उपयोग करता है। तत्व का उपयोग करने के समान, आप तत्व का उपयोग करके कई ऑडियो प्रारूप विकल्प प्रदान कर सकते हैं, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:
HTML5 में ऑडियो HTML5 में ऑडियो आपका ब्राउज़र इस ऑडियो प्रारूप का समर्थन नहीं करता है. आप इस फ़ाइल को नीचे दिए गए लिंक से डाउनलोड कर सकते हैं:इस उदाहरण में हम:
हमने पृष्ठ पर ऑडियो सामग्री (टैग) जोड़ा है, और मल्टीमीडिया फ़ाइल (प्ले/पॉज़ बटन, एक स्लाइडर जो आपको वीडियो के एक विशिष्ट टुकड़े पर जाने की अनुमति देता है) के लिए अंतर्निहित नियंत्रण प्रदर्शित करने के लिए नियंत्रण विशेषता को जोड़ा है, साथ ही एक वॉल्यूम नियंत्रण)।
सबसे उल्लेखनीय विशेषताओं में से एक एचटीएमएल 5ऑडियो स्ट्रीमिंग कर रहा है.
यदि आप वेब विकास में रुचि रखते हैं, तो 10 अविश्वसनीय HTML5 ऑडियो प्लेयर्स का यह संग्रह आपके काम आएगा।
- ऑडियो और वीडियो प्लेयर, जो शुद्ध रूप में लिखा गया है एचटीएमएल 5और सीएसएस. पुराने ब्राउज़रों के लिए समर्थन का उपयोग किया जाता है चमकऔर सिल्वरलाइटनकल करने वाले खिलाड़ी HTML5 मीडियाएलिमेंट एपीआई.
MediaElement के पास लोकप्रिय प्लेटफार्मों के लिए कई डिज़ाइन और समर्थन हैं: वर्डप्रेस, ड्रुपल, जूमला, आदि।
यह प्लेयर काफी न्यूनतर, लेकिन कार्यात्मक है। जब आपको प्लेलिस्ट और फैंसी प्रभावों की आवश्यकता हो तो यह आपके लिए अच्छा है!
एक और महान खिलाड़ी, शायद पूरी सूची में सर्वश्रेष्ठ। पेशेवरों यह है कि इसे स्थापित करना बहुत आसान है और यह आकार में काफी लचीला है और असीमित संख्या में रंगों के लिए अनुकूलन योग्य है।
यू क्रॉस-ब्राउज़र समर्थन, और पुराने ब्राउज़रों के लिए यह मौजूद है चमक-एनालॉग।
आप उपयोग कर रहे हैं Mootoolsआपकी वेबसाइट पर? यदि हाँ, तो आपको यह प्लेयर पसंद आ सकता है एचटीएमएल 5और मूटूल्स जावास्क्रिप्टरूपरेखा। प्लेयर सभी आधुनिक ब्राउज़रों में पूरी तरह से काम करता है।
यह खिलाड़ी सूची में एकमात्र ऐसा खिलाड़ी है जिसे भुगतान किया जाता है। इसकी कीमत केवल $5 है, लेकिन यह पूरी तरह से काम करता है। खिलाड़ी के पास कई हैं उपयोगी कार्यउदाहरण के लिए, सिग्नल ओवरले का उपयोग करके अपने ऑडियो को अवरोधन से बचाना, जो व्यावसायिक उपयोग के लिए बहुत अच्छा है।
स्रोत: http://codecanyon.net/item/universal-html5-audio-player
में प्रौद्योगिकियाँ शामिल हैं एचटीएमएल 5और चमक, जो इसे ऑडियो स्ट्रीमिंग के लिए एक बहुत हल्का (10 KB) मजबूत क्रॉस-ब्राउज़र समाधान बनाता है।
क्या आप जानना चाहते हैं कि आप क्या कर सकते हैं? ध्वनि प्रबंधक 2? डेमो देखने के लिए जाएँ!
HTML5 ऑडियो ऑडियो सामग्री के साथ काम करने के लिए बेहतर क्षमताएं प्रदान करता है। हाल तक, वेब पेजों में ध्वनि फ़ाइलें जोड़ने का एकमात्र तरीका एक टैग का उपयोग करके पृष्ठभूमि ध्वनि को एकीकृत करना था जो उपयोगकर्ता द्वारा पृष्ठ ब्राउज़ करते समय बजता था, इसे बंद करने का कोई विकल्प नहीं था।
HTML5 विनिर्देश में एक नए तत्व को जोड़ने के लिए धन्यवाद, अब एम्बेडेड के साथ ऑडियो सामग्री जोड़ना संभव है सॉफ़्टवेयर इंटरफ़ेसप्लग-इन का उपयोग किए बिना.
वेब पेज पर HTML5 ऑडियो कैसे जोड़ें 1. एलिमेंट ब्राउज़र समर्थनआईई: 9.0
फ़ायरफ़ॉक्स: 3.5 बुनियादी समर्थन, 15.0 पूर्ण समर्थन
क्रोम: 3.0
सफ़ारी: 3.1
ओपेरा: 10.5
आईओएस सफारी: 7.1
ऑपेरा मिनी: -
एंड्रॉइड ब्राउज़र: 4.1
एंड्रॉइड के लिए क्रोम: 44
HTML5 तत्व का उपयोग वेब पेजों में ऑडियो सामग्री को एम्बेड करने के लिए किया जाता है। में सामान्य रूप से देखें HTML मार्कअप इस तरह दिखता है:
नियंत्रण विशेषता ऑडियो प्लेयर नियंत्रण इंटरफ़ेस - प्ले, पॉज़, वॉल्यूम बटन प्रदर्शित करने के लिए ब्राउज़र जोड़ती है।
चावल। 1. उपस्थितिविभिन्न ब्राउज़रों में ऑडियो प्लेयर वर्तमान में ऐसा कोई ऑडियो प्रारूप नहीं है जो सभी ब्राउज़रों में काम करता हो, इसलिए यह सुनिश्चित करने के लिए कि सामग्री व्यापक संभव दर्शकों के लिए पहुंच योग्य है, यह अनुशंसा की जाती है कि आप तत्व की स्रोत विशेषता का उपयोग करके प्रस्तुत कई ऑडियो स्रोतों को शामिल करें। साथ ही, आप उन ब्राउज़रों के लिए फ़ॉलबैक सामग्री जोड़ सकते हैं जो तत्व का समर्थन नहीं करते हैं।
नाम डाउनलोड करें.mp3
| स्वत: प्ले | पेज लोड होने के तुरंत बाद ऑडियो फ़ाइल का स्वचालित प्लेबैक। |
| को नियंत्रित करता है | ब्राउज़र को बुनियादी प्लेबैक नियंत्रण प्रदर्शित करने के लिए कहता है (प्लेबैक प्रारंभ और बंद करें, रिकॉर्डिंग में किसी अन्य स्थान पर जाएं, वॉल्यूम समायोजित करें)। |
| कुंडली | किसी ऑडियो फ़ाइल का लूप प्लेबैक। |
| मौन कर दिया गया | ऑडियो फ़ाइल चलाते समय ध्वनि बंद कर देता है। |
| प्रीलोड | ऑडियो सामग्री को प्रीलोड करने के लिए जिम्मेदार एक विशेषता। वैकल्पिक, कुछ ब्राउज़र इसे अनदेखा कर देते हैं। संभावित मान: ऑटो - ब्राउज़र संपूर्ण ऑडियो फ़ाइल को डाउनलोड करता है ताकि जब उपयोगकर्ता इसे चलाना शुरू करे तो यह उपलब्ध हो। मेटाडेटा - ब्राउज़र अपनी बुनियादी विशेषताओं को निर्धारित करने के लिए ऑडियो फ़ाइल का पहला छोटा हिस्सा डाउनलोड करता है। कोई नहीं - ऑडियो फ़ाइल का कोई स्वचालित डाउनलोड नहीं। |
| स्रोत | इसमें ऑडियो फ़ाइल का पूर्ण या सापेक्ष URL शामिल है। |
एक ऑडियो कोडेक (डिकोडर) डिजिटल डेटा को ऑडियो फ़ाइल या ऑडियो स्ट्रीम प्रारूप में परिवर्तित करने का एक प्रोग्राम है। लोकप्रिय ऑडियो प्रारूप हैं:
एमपी3 सबसे लोकप्रिय ऑडियो प्रारूप है जो हानिपूर्ण संपीड़न का उपयोग करता है और आपको फ़ाइल आकार को कई बार कम करने की अनुमति देता है। लाइसेंस शुल्क के कारण फ़ायरफ़ॉक्स और ओपेरा समर्थित नहीं हैं।
ए.ए.सी. (उन्नत ऑडियो कोडेक)- बंद कोडेक, एमपी3 के अनुरूप, लेकिन बाद वाले की तुलना में, यह अधिक समर्थन करता है उच्च गुणवत्तासमान फ़ाइल आकार वाली ध्वनि.
ऑग वॉर्बिस एक निःशुल्क प्रारूप है खुला स्त्रोत, फ़ायरफ़ॉक्स, ओपेरा और क्रोम में समर्थित। प्रदान अच्छी गुणवत्ताध्वनि, लेकिन हार्डवेयर खिलाड़ियों द्वारा व्यापक रूप से समर्थित नहीं है।
3. वैकल्पिक मीडिया संसाधनतत्व का उपयोग और के लिए एकाधिक मीडिया संसाधनों को जोड़ने के लिए किया जाता है। वैकल्पिक वीडियो/ऑडियो फ़ाइलों को इंगित करता है जिन्हें ब्राउज़र अपने समर्थित मीडिया प्रकार या कोडेक के आधार पर चुन सकता है।
4. उपशीर्षक और शीर्षक जोड़ेंतत्व का उपयोग इस प्रकार किया जाता है बाल तत्वऔर । उपशीर्षक, मीडिया शीर्षक, या अन्य पाठ जानकारी के लिए एक टेक्स्ट ट्रैक जोड़ता है जो ऑडियो या वीडियो फ़ाइल चलने के दौरान दिखाई देना चाहिए।
| गलती करना | इंगित करता है कि यह ट्रैक डिफ़ॉल्ट रूप से चलाया जाता है। किसी दिए गए गुण को केवल एक तत्व में समाहित किया जा सकता है। |
| दयालु | टेक्स्ट ट्रैक का प्रकार निर्दिष्ट करता है; उपशीर्षक डिफ़ॉल्ट रूप से प्रदर्शित होते हैं। स्वीकृत मान: कैप्शन - संवादों और ध्वनि प्रभावों का अनुवाद, वीडियो पर पाठ के रूप में प्रदर्शित (बधिर उपयोगकर्ताओं के लिए)। अध्याय - मीडिया फ़ाइल के माध्यम से नेविगेशन के लिए एक सूची के रूप में अध्याय शीर्षक जोड़ता है। विवरण - वीडियो में क्या हो रहा है इसका एक ऑडियो विवरण जोड़ता है (नेत्रहीन उपयोगकर्ताओं के लिए)। मेटाडेटा - स्क्रिप्ट द्वारा उपयोग किया गया मेटाडेटा उपयोगकर्ताओं को प्रदर्शित नहीं किया जाता है। उपशीर्षक - वीडियो ऑडियो ट्रैक का पाठ दोहराव, वीडियो के लिए उपशीर्षक के रूप में प्रदर्शित किया जाता है। |
| लेबल | एक ट्रैक शीर्षक जोड़ता है. यदि यह विशेषता सेट नहीं है, तो ब्राउज़र डिफ़ॉल्ट मान लागू करेगा। |
| स्रोत | इसमें टेक्स्ट ट्रैक डेटा का एक पूर्ण या सापेक्ष यूआरएल शामिल है। |
| srclang | बजाए जा रहे ट्रैक की भाषा. |
सीएसएस शैलियों का उपयोग करके आप अपने ऑडियो प्लेयर को एक असामान्य रूप दे सकते हैं। प्लेबैक को एक छोटी स्क्रिप्ट (jQuery लाइब्रेरी का उपयोग करके) का उपयोग करके नियंत्रित किया जाता है, जब आप रिकॉर्ड पर होवर करते हैं तो ध्वनि दिखाई देती है।
यह प्रश्न बहुत बार उठता है, इसलिए मैंने पाठों में इस पर एक अलग लेख समर्पित करने का निर्णय लिया। चूंकि HTML में सभी ब्राउज़रों के लिए ऑडियो चलाने के लिए एक सार्वभौमिक तकनीक नहीं है, इसलिए इस समस्या को हल करने के लिए मैं ऑडियो प्लेयर फ़ाइल डाउनलोड करने का सुझाव देता हूं, जैसा कि अधिकांश साइटों पर किया जाता है। हम सब कुछ चरण दर चरण करते हैं:1. होस्टिंग पर जहां आपकी साइट स्थित है, रूट डायरेक्टरी (वह फ़ोल्डर जहां इंडेक्स फ़ाइल है) में, ऑडियो फ़ोल्डर बनाएं। भविष्य में आप सभी ऑडियो फ़ाइलें इसमें रखेंगे।
3. अब सेलेक्ट करें आवश्यक फ़ाइलें, एमपी3 प्रारूप में बेहतर। साइट के रूट में एक ऑडियो फ़ोल्डर बनाएं और उन्हें अपलोड करें।
4. जो कुछ बचा है वह प्लेयर कनेक्शन कोड डालना है। यह किसी भी साइट के लिए उपयुक्त है। सही जगह पर, आपको क्रमशः your_domain और Audio_file नाम शब्दों को प्रतिस्थापित करते हुए प्लेयर फ़ाइल और ऑडियो फ़ाइल का पथ इंगित करना होगा:
और सब कुछ तैयार है! आप कार्यशील उदाहरण भी देख सकते हैं.
पहला तरीका एम्बेड टैग है. एंबेड तत्व का उपयोग ऑब्जेक्ट्स को लोड करने और प्रदर्शित करने के लिए किया जाता है (उदाहरण के लिए, वीडियो फ़ाइलें, फ्लैश फिल्में, कुछ ऑडियो फ़ाइलें इत्यादि) जिन्हें ब्राउज़र प्रारंभ में समझ नहीं पाता है।
वाक्यविन्यास काफी सरल है:
समापन टैग की आवश्यकता नहीं है.
आइए अब विशेषताओं के साथ और नीचे उनकी डिकोडिंग के साथ रिकॉर्ड का एक उदाहरण देखें:
HTML में ऑडियो चलाने के लिए टैग विशेषताएँ एम्बेड करें
चौड़ाई - पिक्सेल में पैनल की चौड़ाई (या प्रतिशत)
ऊँचाई - पैनल की ऊँचाई पिक्सेल में (या प्रतिशत)
संरेखित करें - पाठ के सापेक्ष पैनल की स्थिति, संभावित मान बाएँ, दाएँ, केंद्र हैं
छिपा हुआ - आपको पैनल को छिपाने की अनुमति देता है, विशेषता मान: सत्य - पैनल छिपा हुआ है, गलत - पैनल दृश्यमान है (डिफ़ॉल्ट मान)
ऑटोस्टार्ट - सत्य - पेज लोड होने पर प्लेयर स्वचालित रूप से प्रारंभ हो जाता है, गलत - प्ले बटन दबाए जाने की प्रतीक्षा करता है
लूप - लूप, सत्य - ट्रैक एक सर्कल में खेला जाता है, और यदि गलत है - केवल एक बार
दूसरा तरीका. बहुत पुराना, लेकिन व्यावहारिक भी) मेलोडी को उसी फ़ोल्डर (निर्देशिका) में जोड़ें जहां आपकी फ़ाइल स्थित है, और मुख्य भाग में निम्नलिखित कोड लिखें:
परिणामस्वरूप, पृष्ठ लोड करने के बाद, आपके द्वारा bgsound टैग में निर्दिष्ट राग ध्वनि करेगा। आइए अब टैग विशेषताओं पर बेहतर नज़र डालें:
src - आपकी ऑडियो फ़ाइल का पथ
लूप - राग को कितनी बार दोहराना है (यदि -1, तो अंतहीन रूप से दोहराता है)
संतुलन - स्टीरियो बैलेंस मान (-10000 से 10000 तक)
वॉल्यूम - मेलोडी प्लेबैक वॉल्यूम, जहां 0 अधिकतम है, और -10000 न्यूनतम है।
हालाँकि, प्लेयर को किसी भी तरह से नियंत्रित करने का कोई तरीका नहीं होगा - हर बार पेज रीफ्रेश होने पर, ट्रैक फिर से चलाया जाएगा।
पृष्ठभूमि संगीत डालने की विधि का वर्णन करने के बाद, मैं आपको इससे दूर करना चाहता हूं, क्योंकि अधिकांश उपयोगकर्ता, एक नियम के रूप में, विभिन्न साइटों पर जाने पर पहले से ही संगीत सुनते हैं। इसलिए, साथ में संगीत केवल उसे साइट के साथ टैब बंद करने के लिए मजबूर कर सकता है।
HTML5 में ऑडियो और संगीत सम्मिलित करना - ऑडियो टैगऑडियो युग्मित टैग, जो साइट पर पृष्ठभूमि ध्वनि, संगीत, या अन्य ऑडियो स्ट्रीम को परिभाषित करता है।
ऑडियो टैग विशेषताएँ
ऑटोप्ले - पृष्ठ लोड होने पर फ़ाइल तुरंत चलायी जाती है (इसके समान)। पार्श्व संगीतबीजीसाउंड)
नियंत्रण - ब्राउज़र में प्लेयर नियंत्रण कक्ष प्रदर्शित करें
लूप - फ़ाइल समाप्त होने के बाद उसे दोबारा चलाता है
प्रीलोड - ऑडियो फ़ाइल पेज लोडिंग के साथ लोड हो जाएगी
src - ऑडियो फ़ाइल का पथ (mp3 या ogg)
ऑडियो टैग के साथ उदाहरण कोड
ऑडियो टैग
HTML 5 में ऑडियो
ऑडियो टैग आपके ब्राउज़र द्वारा समर्थित नहीं है.
संगीत डाउनलोड।
