HTML <audio> एलिमेंट और इसके विभिन्न एट्रिब्यूट्स का उपयोग करके अपनी वेबसाइट पर बैकग्राउंड ऑडियो या म्यूजिक फ़ाइलें जोड़ना सीखें।
अपनी वेबसाइट पर बैकग्राउंड म्यूजिक/ऑडियो जोड़ने के लिए, आप HTML ऑडियो एलिमेंट (<audio>...</audio>) का उपयोग कर सकते हैं।
मान लें आपके पास एक ऑडियो फ़ाइल है जिसे आप यूजर्स के आपकी वेबसाइट पर आते ही बैकग्राउंड में चलाना चाहते हैं। यहाँ ऐसा करने के लिए आवश्यक सामान्य HTML कोड है:
<audio autoplay> <source src="आपकी-ऑडियो-फ़ाइल.wav" type="audio/wav" /> </audio><audio> एलिमेंट का src एट्रिब्यूट आंतरिक और एक्सटर्नल दोनों ऑडियो सोर्स को वैल्यू के रूप में स्वीकार करता है।
autoplay एट्रिब्यूट पर ध्यान दें। यदि आप चाहते हैं कि ऑडियो यूजर के आपके वेबपेज में प्रवेश करते ही चलना शुरू कर दे तो यह आवश्यक है।
डेमो: एक उदाहरण सुनने के लिए, अपने कंप्यूटर/हेडफ़ोन पर वॉल्यूम कम करें और इस डेमो पर क्लिक करें।
HTML में तीन समर्थित ऑडियो फॉर्मेट हैं: MP3, WAV, और OGG। <audio> एलिमेंट में आप type एट्रिब्यूट में फॉर्मेट निर्दिष्ट करते हैं:
| फ़ाइल फॉर्मेट | मीडिया टाइप |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
इस ट्यूटोरियल में मैं WAV फॉर्मेट का उपयोग करता हूँ, इसलिए मैंने ऊपर type="audio/wav" एट्रिब्यूट जोड़ा।
ऑडियो एलिमेंट एट्रिब्यूट्स
<audio> एलिमेंट में बिल्ट-इन उपयोगी एट्रिब्यूट्स का एक समूह है, जो आपको बारीक नियंत्रण प्रदान करते हैं।
बैकग्राउंड ऑडियो लूप करें
अपने बैकग्राउंड ऑडियो को लूप करने के लिए, आप loop एट्रिब्यूट जोड़ सकते हैं:
<audio autoplay loop> <source src="आपकी-ऑडियो-फ़ाइल.wav" type="audio/wav" /> </audio>बैकग्राउंड ऑडियो म्यूट करें
अपने बैकग्राउंड ऑडियो को म्यूट करने के लिए, आप muted एट्रिब्यूट जोड़ सकते हैं:
<audio muted> <source src="आपकी-ऑडियो-फ़ाइल.wav" type="audio/wav" /> </audio>आप muted एट्रिब्यूट का उपयोग क्यों करेंगे? खैर, आप अपने ऑडियो एलिमेंट के ऑडियो सोर्स को अस्थायी रूप से अक्षम करना चाह सकते हैं और बाद में इसे पूरे एलिमेंट को अपने वेबपेज से हटाए बिना फिर से चालू कर सकते हैं।
कंट्रोल इंटरफेस जोड़ें
कंट्रोल्स (प्ले, पॉज, आदि) जोड़ने के लिए, controls एट्रिब्यूट का उपयोग करें:
<audio controls> <source src="आपकी-ऑडियो-फ़ाइल.wav" type="audio/wav" /> </audio>अब यूजर चाहे तो आपके ऑडियो फ़ाइल को सुनने के लिए प्ले पर क्लिक कर सकता है।
ऑडियो फॉर्मेट्स के लिए ब्राउज़र सपोर्ट
- MP3 सभी ब्राउज़र्स में समर्थित है,
- WAV Edge/IE को छोड़कर सभी ब्राउज़र्स में समर्थित है
- OGG Edge/IE और Safari को छोड़कर सभी ब्राउज़र्स में समर्थित है
जुलाई 2020 तक।
टिप: अपने <audio> एलिमेंट में एक अतिरिक्त <source> जोड़ें फॉलबैक के रूप में, यदि आपके एंड यूजर का ब्राउज़र आपके प्राथमिक फ़ाइल फॉर्मेट का समर्थन नहीं करता:
<audio controls> <source src="आपकी-ऑडियो-फ़ाइल.wav" type="audio/wav" /> <source src="आपकी-ऑडियो-फ़ाइल.mp3" type="audio/mpeg" /> </audio>अब यदि एंड यूजर का ब्राउज़र WAV फॉर्मेट का समर्थन नहीं करता, तो यह MP3 सोर्स को बजाएगा।
