HTML ऑडियो

HTML में आवाज़ प्लेय करने के बहुत सी तरीके हैं。

समस्याएँ, समस्याएँ और समाधान

HTML में ऑडियो प्लेय करना बहुत कठिन है!

आपको बहुत सी कौशल जाननी होगी, ताकि आपका ऑडियो फ़ाइल सभी ब्राउज़रों (इंटरनेट एक्सप्लोरर, क्रोम, फ़ायरफ़ॉक्स, सेफ़ेरी, ओपेरा) और सभी हार्डवेयर (PC, मैक, आईपैड, आईफ़ोन) पर बदले न हो।

इस चैप्टर में, CodeW3C.com ने आपके लिए समस्याओं और उनके समाधान को सम्पन्न किया है।

प्लगइन का इस्तेमाल करें

ब्राउज़र प्लगइन एक छोटी कंप्यूटर प्रोग्राम है जो ब्राउज़र की मानक फ़ंक्शनों का विस्तार करता है。

प्लगइन के कई उपयोग हैं: संगीत प्लेकर, मानचित्र दिखाना, बैंक खाता की पुष्टि, इनपुट को नियंत्रित करना आदि।

<object> या <embed> टैग का इस्तेमाल करके एचटीएमएल पृष्ठ में प्लगइन को जोड़ा जा सकता है。

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

<embed> एलीमेंट का इस्तेमाल करें

<embed> टैग बाहरी (गैर-एचटीएमएल) सामग्री के कंटेनर को परिभाषित करता है।(यह एक एचटीएमएल 5 टैग है, जो एचटीएमएल 4 में अवैध है, लेकिन सभी ब्राउज़रों में प्रभावी है)。

नीचे दिए गए कोड स्क्रिप्ट वेबपेज में एमपी३ फ़ाइल को शामिल करने के लिए प्रदर्शित करता है:

उदाहरण

<embed height="100" width="100" src="song.mp3" />

स्वयं प्रयोग कीजिए

सवाल:

  • <embed> टैग एचटीएमएल 4 में निष्क्रिय है। पृष्ठ एचटीएमएल 4 की प्रमाणीकरण के लिए नहीं पास कर सकता।
  • विभिन्न ब्राउज़र ऑडियो फ़ॉर्मेट के समर्थन के लिए अलग-अलग हैं।
  • यदि ब्राउज़र फ़ाइल फ़ॉर्मेट को समर्थित नहीं करता और प्लगइन नहीं है, तो ऑडियो प्लेकर नहीं होगा。
  • यदि उपयोगकर्ता के कंप्यूटर में प्लगइन नहीं इंस्टॉल किया गया है, तो ऑडियो प्लेकर नहीं होगा。
  • अगर फ़ाइल को अन्य फ़ॉर्मेट में बदला जाए, तब भी सभी ब्राउज़रों में प्लेकर नहीं होगा。

टिप्पणी:<!DOCTYPE html> (HTML5) का उपयोग करके तरीका प्रमाणन मसले को सुलझाएं।

<object> एलीमेंट का इस्तेमाल करें

<object tag> टैग भी बाहरी (गैर-एचटीएमएल) सामग्री के कंटेनर को परिभाषित कर सकता है。

नीचे दिए गए कोड स्क्रिप्ट वेबपेज में एमपी३ फ़ाइल को शामिल करने के लिए प्रदर्शित करता है:

उदाहरण

<object height="100" width="100" data="song.mp3"></object>

स्वयं प्रयोग कीजिए

सवाल:

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

एचटीएमएल 5 <audio> एलीमेंट का इस्तेमाल करें

<audio> एलीमेंट एक एचटीएमएल 5 एलीमेंट है, जो एचटीएमएल 4 में अवैध है, लेकिन सभी ब्राउज़रों में प्रभावी है।

उदाहरण

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
आपका ब्राउज़र इस ऑडियो फ़ॉर्मेट को समर्थित नहीं करता。
</audio>

स्वयं प्रयोग कीजिए

ऊपरी उदाहरण में mp3 फ़ाइल का इस्तेमाल किया गया है, इसलिए यह इंटरनेट एक्सप्लोरर, क्रोम और सैफारी में प्रभावी है।

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

सवाल:

  • <audio> टैग एचटीएमएल 4 में निष्क्रिय है। आपका पृष्ठ एचटीएमएल 4 की प्रमाणीकरण के लिए नहीं पास कर सकता।
  • आपको ऑडियो फ़ाइल को अलग फ़ॉर्मेट में बदलना होगा।
  • <audio> एलीमेंट पुराने ब्राउज़रों में काम नहीं करता।

टिप्पणी:<!DOCTYPE html> (HTML5) का उपयोग करके तरीका प्रमाणन मसले को सुलझाएं।

सर्वश्रेष्ठ एचटीएमएल समाधान

उदाहरण

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

स्वयं प्रयोग कीजिए

ऊपरी उदाहरण में दो अलग आडियो फॉर्मेटों का उपयोग किया गया है। HTML5 <audio> एलीमेंट आडियो को mp3 या ogg के रूप में प्लेय करने की कोशिश करेगा। अगर इसमें असफलता होगी, तो कोड वापस करके <embed> एलीमेंट की कोशिश करेगा।

सवाल:

  • आपको आडियो को अलग फॉर्मेट में बदलना होगा।
  • <audio> एलीमेंट HTML 4 और XHTML का तरीका प्रमाणन नहीं करता।
  • <embed> एलीमेंट HTML 4 और XHTML का तरीका प्रमाणन नहीं करता।
  • <embed> एलीमेंट को त्रुटि संदेश दिखाने के लिए वापस करना नहीं हो सकता।

टिप्पणी:<!DOCTYPE html> (HTML5) का उपयोग करके तरीका प्रमाणन मसले को सुलझाएं।

वेबसाइट में आडियो जोड़ने का सबसे आसान तरीका

वेबपेज में आडियो जोड़ने का सबसे आसान तरीका क्या है?

याहू के मीडिया प्लेयर इनमें से एक है।

याहू मीडिया प्लेयर का उपयोग करना एक अलग रास्ता है। आपको केवल याहू को गाने को प्लेय करने का काम सौंपना है।

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

याहू मीडिया प्लेयर

उदाहरण

<a href="song.mp3">Play Sound</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

स्वयं प्रयोग कीजिए

याहू प्लेयर का उपयोग करना मुफ्त है। इसका उपयोग करने के लिए, आपको इस JavaScript को वेबपेज के नीचे जमा करना होगा:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

तब आपको केवल MP3 फ़ाइल को अपने HTML में लिंक करने की जरूरत है, जिससे JavaScript स्वचालित रूप से प्रत्येक गाने के लिए प्लेबटन बनाएगा:

<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>
...
...
...

याहू मीडिया प्लेयर आपके उपयोगकर्ताओं को एक छोटा प्लेबटन देता है, न कि पूर्ण प्लेयर। लेकिन जब आप इस बटन पर क्लिक करते हैं, तो पूर्ण प्लेयर बाहर आ जाता है।

ध्यान दें कि यह प्लेयर हमेशा विंडो फ्रेम के नीचे डॉकिंग करता है।इसे क्लिक करके इसे बाहर सारें।

अधिकांश लिंक का उपयोग करें

यदि वेब पृष्ठ में मीडिया फ़ाइल के लिंक है, तो अधिकांश ब्राउज़र फ़ाइल को प्लेकर के रूप में चलाएगा।

नीचे दिए गए कोड टुकड़े mp3 फ़ाइल के लिंक है।यदि उपयोगकर्ता इस लिंक पर क्लिक करता है, तो ब्राउज़र फ़ाइल को प्लेकर के रूप में चलाएगा:

उदाहरण

<a href="song.mp3">साउंड प्ले करें</a>

स्वयं प्रयोग कीजिए

अंग्रेजी वाला आवाज

जब आप वेब पृष्ठ में आवाज को शामिल करते हैं या वेब पृष्ठ के एक हिस्से के रूप में, यह अंग्रेजी वाला आवाज कहलाता है।

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

हमारी सबसे अच्छी सलाह है कि उपयोगकर्ता को अंग्रेजी वाला आवाज सुनना चाहता है तो उसे शामिल करें।एक सकारात्मक उदाहरण है, उपयोगकर्ता को रिकॉर्डिंग सुनने के लिए लिंक पर क्लिक करना चाहता है, तो पृष्ठ खोलने के बाद रिकॉर्डिंग चालू हो जाएगी।

HTML 4.01 मल्टीमीडिया टैग

टैग वर्णन
<applet> अनुमानित नहीं।एम्बेडिड applet डिफाइन करता है।
<embed> HTML4 में अनुमानित नहीं, HTML5 में अनुमानित।एम्बेडिड ऑब्जेक्ट डिफाइन करता है।
<object> एम्बेडिड ऑब्जेक्ट डिफाइन करता है।
<param> ऑब्जेक्ट के पैरामीटर डिफाइन करता है।

HTML 5 मल्टीमीडिया टैग

टैग वर्णन
<audio> टैग डिफाइन आवाज, जैसे संगीत या अन्य आवाज धारा।
<embed> टैग डिफाइन एम्बेडिड की सामग्री, जैसे प्लगइन।