HTML Audio
In this page:
<audio src="audio-url" controls>
Fallback text
</audio>Audio को Natively Embed करना
किसी audio फाइल को embed करने के लिए, आप audio टैग का उपयोग करते हैं। इस कंटेनर के अंदर, आप अपनी audio फाइल paths की ओर इशारा करने वाले source एलिमेंट्स रखते हैं, जिससे ब्राउज़र को मिलने वाला पहला compatible फॉर्मेट चुनकर चलाने की सुविधा मिलती है।
- यह सुनिश्चित करने के लिए कि आपकी audio फाइलें सभी डिवाइसेज़ पर सुचारू रूप से चलें, MP3 और OGG दोनों फॉर्मेट उपलब्ध कराएं।
- Accepted attributes:
- src — audio file URL
- controls — boolean
- autoplay / loop / muted — booleans
- preload — none | metadata | auto
उदाहरण: Embedding Audio Natively
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>Playback Controls (controls)
डिफ़ॉल्ट रूप से, ब्राउज़र audio players को पूरी तरह छुपा देते हैं जब तक आप controls attribute शामिल न करें। controls attribute ब्राउज़र को play, pause, वॉल्यूम एडजस्ट करने, और track स्किप करने के लिए स्टैण्डर्ड सिस्टम बटन दिखाने के लिए कहता है।
- हमेशा controls attribute शामिल करें ताकि आपके यूज़र के पास audio playback पर पूरा कंट्रोल हो।
- Accepted values:
- controls — boolean attribute (present or controls="")
- Shows play, pause, seek and volume
उदाहरण: Playback Controls (controls)
<audio src="song.mp3" controls></audio>Audio को Mute और Auto-play करना
मॉडर्न ब्राउज़र यूज़र अनुभव की सुरक्षा के लिए साउंड ऑन के साथ audio फाइलों को auto-play होने से रोकते हैं। किसी audio फाइल को पेज लोड होते ही अपने आप चलाने के लिए, आपको autoplay और muted दोनों attributes शामिल करने होंगे।
- पेज लोड पर auto-play करने की बजाय यूज़र क्लिक्स (जैसे submit बटन क्लिक करने) के जवाब में साउंड इफेक्ट्स ट्रिगर करने के लिए JavaScript का उपयोग करें।
- Accepted attributes:
- autoplay — boolean; blocked by many browsers
- muted — boolean
- loop — boolean
उदाहरण: Muting and Auto-playing Audio
<audio src="song.mp3" autoplay muted></audio>preload से ऑप्टिमाइज़ करना
preload attribute ब्राउज़र को बताता है कि पेज लोड होने पर audio फाइल का कितना हिस्सा बैकग्राउंड में डाउनलोड करना है।
आप इस attribute को none (बैंडविड्थ बचाने के लिए), metadata (फाइल की duration और specs डाउनलोड करने के लिए), या auto (पूरी फाइल डाउनलोड करने के लिए) पर सेट कर सकते हैं।
- अपनी साइट को तेज़ी से लोड रखने के लिए कई audio players वाले पेजों पर preload="none" का उपयोग करें।
- Accepted values:
- none — do not preload
- metadata — load duration and metadata only
- auto — browser may load the whole file
- (empty) — same as auto
उदाहरण: Optimizing with preload
<audio src="song.mp3" controls preload="none"></audio>सबसे अच्छे Format चुनना
वेब परफॉर्मेंस काफी हद तक सही audio फॉर्मेट चुनने पर निर्भर करती है। ज़्यादा से ज़्यादा compatibility के लिए MP3, हाई परफॉर्मेंस open-source compression के लिए OGG, या हाई-फिडेलिटी, uncompressed audio चाहिए होने पर WAV का उपयोग करें।
- यह सुनिश्चित करने के लिए कि आपकी audio फाइलें सभी डिवाइसेज़ पर सुचारू रूप से चलें, MP3 और OGG दोनों फॉर्मेट उपलब्ध कराएं।
- Accepted attributes:
- source src — file URL
- source type — audio/mpeg | audio/ogg | audio/wav | audio/mp4 | audio/webm
उदाहरण: Selecting the Best Formats
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
</audio>Audio Captions के लिए Track एलिमेंट
वीडियो की तरह ही, audio एलिमेंट भी captions या subtitles जोड़ने के लिए track एलिमेंट को सपोर्ट करता है, जो पॉडकास्ट, इंटरव्यू, या किसी भी बोले गए कंटेंट के लिए खासतौर पर उपयोगी है।
captions यूज़र को शोरगुल वाले माहौल में या जब वे बिल्कुल साउंड का उपयोग नहीं कर सकते, तब भी साथ चलने देते हैं।
- बिना साउंड के भी इसे उपयोगी बनाने के लिए किसी भी बोले गए audio कंटेंट के लिए कम से कम एक English caption track ज़रूर उपलब्ध कराएं।
- Accepted attributes:
- kind — subtitles | captions | descriptions | chapters | metadata
- src — .vtt file URL
- srclang — language code
- label — menu text
- default — boolean
उदाहरण: Track Element for Audio Captions
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
<track src="captions.vtt" kind="captions" srclang="en" default>
</audio>एक Accessible Audio Player बनाना
एक accessible audio player में हमेशा दिखने वाले native controls शामिल होते हैं, पास में एक transcript लिंक जैसा टेक्स्ट विकल्प होता है, और यह कभी भी साउंड के साथ auto-play नहीं करता, जो कुछ यूज़र के लिए, जिनमें screen reader इस्तेमाल करने वाले लोग भी शामिल हैं, चौंकाने वाला या भ्रमित करने वाला हो सकता है।
उदाहरण: Building an Accessible Audio Player
<audio src="podcast.mp3" controls></audio>
<a href="transcript.html">Read the full transcript</a>Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: