audio: پخش صدا بدون هیچ افزونهای
یادته تو درس ۱-۲ گفتیم قبل از HTML5، برای پخش صدا یا ویدیو حتماً باید از Flash استفاده میشد؟ حالا رسیدیم به همون قابلیتی که یکی از بزرگترین انقلابهای HTML5 بود: پخش مستقیم صدا با تگ audio، بدون نیاز به هیچ افزونه یا نرمافزار جانبی.
audio چیه؟
<audio src="song.mp3" controls></audio>تگ audio یه فایل صوتی رو مستقیم داخل صفحه جاسازی میکنه. برخلاف img که یه تگ خالیه، audio یه تگ باز و بستهست (دلیلش رو کمی جلوتر، تو بحث محتوای جایگزین، میبینیم).
ویژگی src: منبع فایل صوتی
ویژگی src دقیقاً همون کاری رو میکنه که تو img دیدیم؛ مسیر فایل صوتی رو مشخص میکنه، چه نسبی باشه چه یه آدرس کامل اینترنتی.
ویژگی controls: نمایش کنترلهای پخش
<audio src="song.mp3" controls></audio>ویژگی controls باعث میشه مرورگر یه رابط کاربری پیشفرض (دکمهی پخش/توقف، نوار پیشرفت، تنظیم صدا) رو نمایش بده. اگه این ویژگی رو ننویسی، صدا اصلاً هیچ رابط قابلکلیکی نداره و کاربر هیچ راهی برای کنترل دستی پخش نداره (مگر با جاوااسکریپت پیشرفته)؛ به همین خاطر، controls عملاً همیشه باید حاضر باشه، مگر اینکه بخوای پخش رو کاملاً با جاوااسکریپت خودت کنترل کنی.
ویژگی autoplay: پخش خودکار
<audio src="song.mp3" controls autoplay></audio>ویژگی autoplay باعث میشه فایل صوتی بهمحض بارگذاری صفحه، خودکار شروع به پخش کنه، بدون نیاز به کلیک کاربر. باید با احتیاط زیادی از این ویژگی استفاده کرد؛ اکثر مرورگرهای مدرن امروزه به دلایل تجربهی کاربری (و برای جلوگیری از تبلیغات صوتی ناخواسته)، پخش خودکار صدادار رو بهطور پیشفرض مسدود میکنن، مگر اینکه کاربر قبلاً با سایت تعامل داشته باشه.
ویژگی loop: پخش مکرر
<audio src="notification.mp3" controls loop></audio>ویژگی loop باعث میشه بعد از تمومشدن فایل صوتی، پخش دوباره از اول شروع بشه، بهطور مداوم؛ مناسب برای موزیک پسزمینه یا افکتهای صوتی تکرارشونده.
ویژگی muted: شروع بیصدا
<audio src="song.mp3" controls muted></audio>ویژگی muted باعث میشه صدا بهصورت پیشفرض قطع باشه (حتی اگه در حال پخشه)؛ کاربر میتونه دستی از طریق کنترلها صدا رو فعال کنه.
ویژگی preload: نحوهی پیشبارگذاری
<audio src="song.mp3" controls preload="auto"></audio>ویژگی preload به مرورگر پیشنهاد میده فایل صوتی چطور از قبل بارگذاری بشه؛ سه مقدار رایج داره:
none: هیچچیزی از قبل بارگذاری نشه؛ فقط وقتی کاربر دکمهی پخش رو بزنه شروع به دانلود میشه.metadata: فقط اطلاعات ابتدایی مثل مدتزمان فایل از قبل بارگذاری بشه، نه خود صدا.auto: مرورگر تشخیص بده که احتمالاً کاربر این فایل رو پخش میکنه، پس از قبل کاملش رو بارگذاری کنه.
استفاده از چند فرمت با تگ source
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
متن جایگزین: مرورگر شما از پخش صدا پشتیبانی نمیکند.
</audio>یه مشکل رایج اینه که همهی مرورگرها از همهی فرمتهای صوتی پشتیبانی نمیکنن. برای حل این مشکل، بهجای استفادهی مستقیم از ویژگی src روی خود audio، میشه چند تگ source با فرمتهای مختلف داخلش گذاشت. مرورگر از بالا به پایین این گزینهها رو بررسی میکنه و اولین فرمتی که پشتیبانی میکنه رو پخش میکنه.
محتوای جایگزین (Fallback Content)
همونطور که تو مثال بالا دیدی، متنی که بعد از تگهای source نوشته میشه («مرورگر شما از پخش صدا پشتیبانی نمیکند»)، فقط تو مرورگرهای خیلی قدیمی که اصلاً tag audio رو نمیشناسن نمایش داده میشه؛ این همون دلیلیه که audio یه تگ باز و بستهست، نه خالی، چون باید بتونه این محتوای جایگزین رو در خودش جا بده.
یه مثال کامل
<h2>پادکست هفتگی</h2>
<audio controls preload="metadata">
<source src="podcast-ep1.mp3" type="audio/mpeg">
<source src="podcast-ep1.ogg" type="audio/ogg">
مرورگر شما از پخش این فایل صوتی پشتیبانی نمیکند. میتوانید آن را
<a href="podcast-ep1.mp3">از این لینک دانلود کنید</a>.
</audio>تو این مثال، هم چند فرمت پشتیبان داریم، هم یه لینک دانلود مستقیم بهعنوان محتوای جایگزین برای مرورگرهای خیلی قدیمی.
چند اشتباه رایج
- فراموشکردن ویژگی controls، که باعث میشه کاربر هیچ راهی برای کنترل دستی پخش نداشته باشه.
- استفادهی بیرویه از autoplay بدون muted، که میتونه تجربهی کاربری بدی ایجاد کنه (و اکثر مرورگرها هم جلوش رو میگیرن).
- تکیه فقط به یه فرمت صوتی واحد، بدون فرمت پشتیبان از طریق source.
بهترین روشها
- همیشه ویژگی controls رو بذار، مگر اینکه بخوای پخش رو کاملاً با جاوااسکریپت مدیریت کنی.
- از autoplay با احتیاط استفاده کن؛ در صورت نیاز، همراه با muted بذارش تا شانس اجرا شدنش تو مرورگرهای مختلف بیشتر بشه.
- برای اطمینان از سازگاری بین مرورگرها، حداقل دو فرمت مختلف (مثل mp3 و ogg) رو با source ارائه بده.
نکتهی سئو
محتوای صوتی بهتنهایی توسط گوگل قابل «شنیدن» نیست، اما اگه کنار فایل audio یه رونوشت متنی (Transcript) از محتوا هم قرار بدی، این متن توسط گوگل قابلایندکسشدنه و میتونه به سئوی صفحه کمک کنه.
نکتهی دسترسیپذیری
برای کاربران ناشنوا یا کمشنوا، ارائهی یه رونوشت متنی کامل از محتوای صوتی (مثلاً زیر پلیر) حیاتیه؛ چون این کاربران هیچ راهی برای درک محتوای صرفاً صوتی ندارن، برخلاف ویدیو که امکان زیرنویس (که در درسهای بعد میبینیم) وجود داره.
جمعبندی
تگ audio امکان پخش مستقیم فایل صوتی را بدون نیاز به افزونه فراهم میکند. ویژگیهای controls، autoplay، loop، muted و preload رفتار پخش را کنترل میکنند، و استفاده از چند تگ source با فرمتهای مختلف، سازگاری بیشتری بین مرورگرهای گوناگون ایجاد میکند.