अपनी वेबसाइट पर बैकग्राउंड ऑडियो/म्यूजिक कैसे जोड़ें

HTML <ऑडियो> तत्व और इसकी विभिन्न विशेषताओं का उपयोग करके अपनी वेबसाइट पर पृष्ठभूमि ऑडियो या संगीत फ़ाइलों को जोड़ने का तरीका जानें।

अपनी वेबसाइट पर पृष्ठभूमि संगीत/ऑडियो जोड़ने के लिए, आप HTML ऑडियो तत्व का उपयोग कर सकते हैं (<audio>...</audio> )।

मान लें कि आपके पास एक ऑडियो फ़ाइल है जिसे आप पृष्ठभूमि में चलाना चाहते हैं जैसे ही उपयोगकर्ता आपकी वेबसाइट पर जाते हैं। ऐसा करने के लिए आवश्यक सामान्य HTML कोड यहां दिया गया है:

<audio autoplay>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

<audio> तत्व का src विशेषता आंतरिक और बाहरी दोनों ऑडियो स्रोतों को मान के रूप में स्वीकार करती है।

autoplay पर ध्यान दें गुण। यह आवश्यक है यदि आप चाहते हैं कि उपयोगकर्ता के आपके वेबपेज में प्रवेश करते ही ऑडियो चलना शुरू हो जाए।

डेमो: एक उदाहरण सुनने के लिए, अपने कंप्यूटर/हेडफ़ोन पर आवाज़ कम करें और इस डेमो पर क्लिक करें।

HTML में तीन समर्थित ऑडियो प्रारूप हैं:MP3, WAV और OGG। <audio> . में तत्व जिसे आप type . में प्रारूप निर्दिष्ट करते हैं विशेषता:

फ़ाइल स्वरूप	मीडिया प्रकार
एमपी3	ऑडियो/एमपीईजी
ओजीजी	ऑडियो/ऑग
WAV	ऑडियो/वाव

इस ट्यूटोरियल में मैं WAV फॉर्मेट का उपयोग करता हूं, इसलिए मैंने type="audio/wav" जोड़ा है। ऊपर <स्रोत> तत्व पर विशेषता।

<घंटा/>

ऑडियो तत्व विशेषताएँ

निम्नलिखित कुछ उपयोगी विशेषताएं हैं जो <audio> . में अंतर्निहित हैं तत्व, और आपको बढ़िया नियंत्रण प्रदान करते हैं।

लूप बैकग्राउंड ऑडियो

अपने बैकग्राउंड ऑडियो को लूप करने के लिए, आप loop . जोड़ सकते हैं विशेषता:

<audio autoplay loop>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

बैकग्राउंड ऑडियो म्यूट करें

अपने बैकग्राउंड ऑडियो को म्यूट करने के लिए, आप mute जोड़ सकते हैं विशेषता:

<audio muted>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

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

नियंत्रण इंटरफ़ेस जोड़ें

नियंत्रण जोड़ने के लिए (चलाएं, रोकें, आदि), controls का उपयोग करें विशेषता:

<audio controls>
  <source src="your-audio-file.wav" type="audio/wav" />
</audio>

यदि उपयोगकर्ता आपकी ऑडियो फ़ाइल सुनना चाहते हैं तो अब वे प्ले पर क्लिक कर सकते हैं।

ऑडियो प्रारूपों के लिए ब्राउज़र समर्थन

MP3 सभी ब्राउज़रों में समर्थित है,
WAV एज/आईई को छोड़कर सभी ब्राउज़रों में समर्थित है
ओजीजी एज/आईई और सफारी को छोड़कर सभी ब्राउज़रों में समर्थित है

जुलाई 2020 तक।

युक्ति: एक अतिरिक्त जोड़ें <source> आपके <audio> . पर यदि आपका अंतिम उपयोगकर्ता किसी ऐसे ब्राउज़र का उपयोग करता है जो आपके प्राथमिक फ़ाइल स्वरूप का समर्थन नहीं करता है, तो तत्व एक फ़ॉलबैक के रूप में:

<audio controls>
  <source src="your-audio-file.wav" type="audio/wav" />
  <source src="your-audio-file.mp3" type="audio/mpeg" />
</audio>

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