लोड हो रहा है...

HTML ऑडियो

वीडियो पाठ ने चलती तस्वीरें सिखाईं। ऑडियो सिर्फ आवाज़ वाला चचेरा भाई है: पॉडकास्ट, वॉइस नोट्स, पाठ की शुरूआत और छोटे इफेक्ट। तत्व है audio। controls से शुरू करें ताकि लोग खुद चलाएँ — वही शिष्टाचार जो वीडियो में सीखा — बिना poster, स्क्रीन पर तस्वीर या आरक्षित वीडियो बॉक्स के। पतली कंट्रोल पट्टी media/ से फ़ाइल लाती है और लेआउट को पूरे क्लिप से शांत रखती है।

audio क्या करता है

audio ब्राउज़र से ध्वनि फ़ाइल लाने और छोटा प्लेयर दिखाने को कहता है। आप src से एक फ़ाइल सेट कर सकते हैं, या कई <source> बच्चे सूचीबद्ध कर सकते हैं ताकि ब्राउज़र समझ में आने वाला प्रारूप चुने। video जैसी दृश्य कैनवस नहीं है; controls होने पर आमतौर पर पतली पट्टी दिखती है। टाइमलाइन, म्यूट और वॉल्यूम अभी भी मायने रखते हैं क्योंकि आवाज़ शांत कमरे को उतनी ही काट सकती है जितना तेज़ वीडियो। प्लेयर को उपकरण मानें जिसे विज़िटर चलाता है, न कि पृष्ठभूमि जो खुद शुरू हो जाए।

सीधा उत्तर

<audio controls src="sound.mp3"> लिखें या MP3 और Ogg जैसे प्रारूपों के लिए कई <source> टैग नेस्ट करें। तत्व के अंदर छोटा फ़ॉलबैक पाठ (और वैकल्पिक डाउनलोड लिंक) रखें। वेब के लिए संपीड़ित फ़ाइलें पसंद करें। आवाज़ के साथ आश्चर्यजनक ऑटोप्ले से बचें। जब क्लिप बोली गई बातों से सिखाए, प्लेयर के पास ट्रांसक्रिप्ट या स्पष्ट नोट्स की योजना बनाएँ।

शुरुआती जो प्रारूप देखते हैं

सभी ब्राउज़र एक ही कोडेक पसंद नहीं करते। शुरुआती अक्सर MP3 से शुरू करते हैं, फिर दूसरा उम्मीदवार Ogg जोड़ते हैं। WAV लोकल एडिटिंग के लिए ठीक है लेकिन अक्सर अकेली वेब कॉपी के लिए बहुत बड़ी होती है। नीचे की तालिका व्यावहारिक शुरुआत का नक्शा है — पूरी कोडेक विश्वकोश नहीं।

📊 आम ऑडियो प्रकार

Type hint	Typical file	Beginner note
audio/mpeg	.mp3	व्यापक रूप से उपयोगी शुरुआती प्रारूप
audio/ogg	.ogg	व्यापक समर्थन के लिए उपयोगी दूसरा स्रोत
audio/wav	.wav	अक्सर बड़ी; जब संभव हो वेब के लिए संपीड़ित करें

controls के साथ सरल ऑडियो

एक छोटा MP3 प्लस controls कई अभ्यास पृष्ठों के लिए काफी है। फ़ाइल media/ के नीचे रखें, पथ छवि URL की तरह जाँचें। अगर पट्टी दिखे पर प्ले न चले, डेवलपर टूल खोलें या फ़ाइल URL सीधे आज़माएँ — टूटे पथ चुपचाप असफल होते हैं।

Simple audio

html

HTML Code

<audio controls src="media/hello.mp3">
Your browser does not support audio.
</audio>

सरल नमूने को पढ़ना

controls प्ले, पॉज़, सीक और अक्सर वॉल्यूम दिखाता है
src पृष्ठ के सापेक्ष ध्वनि फ़ाइल की ओर इशारा करता है (यहाँ media/ के नीचे)
भीतरी पाठ तब फ़ॉलबैक है जब तत्व नहीं चला सकता
यहाँ poster नहीं — वह video का है
बुनियादी ऑडियो पट्टी के लिए आमतौर पर वीडियो जैसा width नहीं चाहिए

कई स्रोत और डाउनलोड लिंक

type में MIME मानों के साथ Ogg और MP3 सूचीबद्ध करने से प्ले करने योग्य उम्मीदवार मिलने की संभावना बढ़ती है। क्रम मायने रखता है: ब्राउज़र सूची चलाता है जब तक डिकोड न कर सके। डाउनलोड लिंक प्ले विफल होने या सहेजने पर मदद करता है। दो प्रारूप निर्यात करते समय प्रत्येक फ़ाइल में वही पाठ सामग्री रखें।

Multiple audio sources

html

HTML Code

<audio controls>
<source src="media/hello.ogg" type="audio/ogg">
<source src="media/hello.mp3" type="audio/mpeg">
Download <a href="media/hello.mp3">hello.mp3</a>
</audio>

मल्टी-सोर्स नमूने को पढ़ना

स्रोत क्रम में आज़माए जाते हैं जब तक ब्राउज़र चला सकने वाला न मिले
type असमर्थित प्रारूप जल्दी छोड़ने में मदद करता है
डाउनलोड लिंक audio के अंदर मानव-अनुकूल फ़ॉलबैक है
फ़ाइलनाम और फ़ोल्डर सटीक रखें — src में टाइपो “टूटा प्लेयर” लगता है
छोटे डेमो के लिए अभी भी एकल src रख सकते हैं; मल्टी-सोर्स मजबूती का अपग्रेड है

कान और बैंडविड्थ का सम्मान

बिना स्पष्ट उपयोगकर्ता क्रिया के आवाज़ ऑटोप्ले अक्सर ब्लॉक होता है और आमतौर पर असभ्य है। controls न होने पर विज़िटर विनम्रता से पॉज़ नहीं कर सकता। लंबा असंपीड़ित WAV मोबाइल डेटा बर्बाद कर सकता है जब कॉम्पैक्ट MP3 वही बात सिखाए। वेब-आकार ऑडियो वैसे ही निर्यात करें जैसे वेब-आकार वीडियो। बाद में बैकग्राउंड संगीत सहमति और म्यूट के साथ अलग डिज़ाइन निर्णय है — शुरुआती पाठ पृष्ठ का डिफ़ॉल्ट नहीं।

जब भाषण सिखाए तो ट्रांसक्रिप्ट

अगर क्लिप शब्दों में अवधारणा समझाए, पृष्ठ पर ट्रांसक्रिप्ट या स्पष्ट नोट्स की योजना बनाएँ। audio img की तरह alt नहीं इस्तेमाल करता। भाषण की पहुँच टेक्स्ट विकल्प, प्लेयर के पास स्पष्ट शीर्षक और उपयोगकर्ता नियंत्रण है — पोस्टर छवि नहीं। यहाँ तक कि छोटा पैराग्राफ जो बोली गई टिप दोहराए, उन लोगों की मदद करता है जो अभी सुन नहीं सकते।

ऑडियो बनाम वीडियो बनाम एम्बेड

स्व-होस्टेड ध्वनि फ़ाइल → audio
छवि वाला स्व-होस्टेड क्लिप → video
किसी अन्य साइट का प्लेयर पृष्ठ → अक्सर iframe (बाद के पाठ में YouTube-शैली एम्बेड)
पॉडकास्ट को सिर्फ इसलिए video में न डालें कि वहाँ पहले controls देखा। जब audio काफी हो स्थानीय MP3 को iframe में न लपेटें। तत्व को मीडिया प्रकार से मिलाएँ।

संपादक में अभ्यास

media/ के नीचे छोटा .mp3 जोड़ें (दस से तीस सेकंड काफी)।
सही सापेक्ष पथ के साथ audio controls से एम्बेड करें।
ब्राउज़र UI से प्ले, पॉज़, सीक और वॉल्यूम आज़माएँ।
वैकल्पिक: दूसरा source प्रकार और डाउनलोड लिंक जोड़ें।
अगर क्लिप बोलता है तो प्लेयर के पास एक वाक्य ट्रांसक्रिप्ट या नोट लिखें।
पुष्टि करें कि कोई प्ले न दबाए तो भी पृष्ठ समझ में आता है।

आसान गलतियाँ

बिना स्पष्ट उपयोगकर्ता क्रिया के आवाज़ ऑटोप्ले
controls गायब
जब MP3 काफी हो विशाल असंपीड़ित WAV लिंक करना
audio पर poster की उम्मीद
फ़ॉलबैक पाठ या डाउनलोड पथ भूलना
YouTube-शैली iframe एम्बेड को स्व-होस्टेड audio से मिलाना
परीक्षण में प्रत्येक source में अलग बोली गई सामग्री
टूटा media/ पथ और ब्राउज़र को दोष देना

सारांश

audio आपके होस्ट की ध्वनि फ़ाइलें एम्बेड करता है
controls से विज़िटर प्ले, पॉज़ और सीक कर सकते हैं
type संकेतों के साथ कई source प्रारूप समर्थन बेहतर बनाते हैं
संपीड़ित फ़ाइलें और उपयोगकर्ता-शुरू प्लेबैक पसंद करें
जब बोली गई सामग्री पाठ ले जाए तो ट्रांसक्रिप्ट या नोट्स की योजना बनाएँ
आवाज़ के लिए ऑडियो, छवि+आवाज़ के लिए वीडियो, बाहरी प्लेयर के लिए iframe

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा