افزودن صدا به صفحات وب یکی از قابلیت‌های جذاب HTML5 است که به شما امکان می‌دهد فایل‌های صوتی را مستقیماً در مرورگر پخش کنید.

---

🧩 مرحله اول: استفاده از عنصر <audio>

عنصر اصلی برای درج صدا در HTML:

<audio controls>
  <source src="audio/ukulele.mp3" type="audio/mpeg">
</audio>

• ویژگی controls باعث می‌شود کاربر دکمه‌های پخش، توقف و تنظیم صدا را ببیند.
• عنصر <audio> برخلاف <p> یا <div> نیازی به تگ پایانی جداگانه برای <source> ندارد؛ فقط خود <audio> بسته می‌شود.

---

📁 مرحله دوم: مسیر فایل

• فایل صوتی باید در مسیر درست قرار داشته باشد.
• پیشنهاد: پوشه‌ای به نام audio بسازید و فایل‌ها را داخل آن قرار دهید.
• مثال: <source src="audio/ukulele.mp3" type="audio/mpeg">

---

⚙️ مرحله سوم: ویژگی‌های <source>

• src: مسیر فایل صوتی (مثلاً audio/ukulele.mp3).
• type: نوع فایل برای مرورگر (مثلاً audio/mpeg برای MP3).

---

🌍 مرحله چهارم: پشتیبانی از فرمت‌های مختلف

برای سازگاری بیشتر با مرورگرها، بهتر است چند فرمت اضافه کنید:

<audio controls>
  <source src="audio/ukulele.mp3" type="audio/mpeg">
  <source src="audio/ukulele.ogg" type="audio/ogg">
</audio>

• مرورگرها به ترتیب منابع را بررسی می‌کنند و اولین فرمتی که پشتیبانی شود را پخش می‌کنند.

---

🔙 مرحله پنجم: محتوای جایگزین (Fallback)

برای مرورگرهای قدیمی که از <audio> پشتیبانی نمی‌کنند:

<audio controls>
  <source src="audio/ukulele.mp3" type="audio/mpeg">
  <source src="audio/ukulele.ogg" type="audio/ogg">
  <a href="audio/ukulele.mp3">Ukulele Audio Recording</a>
</audio>

• در این حالت، کاربر می‌تواند فایل را دانلود یا جداگانه پخش کند.

---

🎯 مرور کلی

• استفاده از <audio> برای درج صدا.
• افزودن چند <source> با فرمت‌های مختلف (MP3، OGG).
• ویژگی controls برای نمایش کنترل‌های پخش.
• محتوای fallback برای مرورگرهای قدیمی.