Media Types

🎧 Audio Element — Sound Play Karo

<audio> tag page mein sound player embed karta hai. Jaise cassette player pe play dabana — par digital, koi tape nahi chahiye. MP3, WAV, OGG formats support karta hai.

controls attribute zaroori hai — bina iske audio invisible aur unplayable hai. Browser play/pause, volume, seek bar, aur time display dikhata hai. <source> tags se multiple formats bhi de sakte ho.

🛺

Cassette se Digital: Purane din: cassette khareedo, player mein daalo, play dabao. Ab: ek <audio> tag, browser sab karta hai. Koi plugin, koi extra software nahi.

Code Example

HTML — Audio Element — Sound Play Karo

<!-- Basic audio -->
<audio controls src="hyderabad-azaan.mp3"></audio>

<!-- Multiple formats ke saath -->
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Aapka browser audio support nahi karta.
</audio>

<!-- Attributes ke saath -->
<audio 
  controls 
  preload="metadata"
  loop
>
  <source src="biryani-sizzle.mp3" type="audio/mpeg">
</audio>

<!-- Autoplay (browsers ko muted chahiye) -->
<audio autoplay muted loop>
  <source src="background-music.mp3" type="audio/mpeg">
</audio>

controlsPlay/pause/volume/seek bar dikhata hai — ZAROORI

src="..."Direct audio file ka path (single format)

<source>Multiple format options — browser pehla supported pick karta hai

type="audio/mpeg"MIME type — browser ko format download se pehle batata hai

preload="metadata"Sirf duration/size load karo, full file nahi (bandwidth save)

loopKhatam hone pe dobara start — background music ke liye

autoplay mutedUser interaction ke bina auto-play (muted = browser allow karta hai)

Fallback textPurane browsers mein dikhta hai jo <audio> support na karte

✅ When to Use

Websites pe music players
Podcast episodes
Games/apps mein sound effects
Background ambient audio
Audio recordings — interviews, lectures

❌ When NOT to Use

Jab video bhi chahiye (<video> use karo)
Streaming services ke liye (specialized APIs use karo)
User consent ke bina auto-play (accessibility issue)

💡

Hamesha kam se kam 2 formats do: MP3 (universal) + OGG (open source fallback). tags use karo, sirf src nahi. Aur purane browsers ke liye fallback text zaroor add karo.

← Back to Audio & Video Chapter