एचटीएमएल ऑडियो

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

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

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

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

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

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

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

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

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

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

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

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

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

उदाहरण

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

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

सवाल:

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

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

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

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

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

उदाहरण

<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>

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

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

<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> टैग डिफ़ाइन एम्बेड किए गए सामग्री, जैसे प्लगइन।