قبل از HTML5، برای قرار دادن فایل های صوتی و ویدیویی، به پلاگین‌هایی مثل
فلش یا Silverlight نیاز داشتیم. متاسفانه این پلاگین‌ها مشکلات زیادی
برای مرورگرها ایجاد می‌کردن و از طرفی نیاز به استفاده از فایل‌های صوتی و
تصویری به صورت مستقیم در صفحات وب، حس می‌شد.
در HTML5، دو تگ audio برای قرار دادن فایل صوتی وvideo برای قرار دادن مستقیم فایل‌های ویدیویی در صفحه، معرفی شدن.
تگ audio به صورت زیر استفاده میشه:
<audio src="file.mp3"></audio>
که آدرس فایل صوتی، برای صفت src نوشته میشه.
در تگ میشه از سه فرمت MP3 ، OGG و Wav استفاده کرد.
کروم و فایرفاکس هر سه فرمت رو پشتیبانی میکنن ولی اینترنت اکسپلورر فقط
MP3 رو اجرا میکنه؛ از طرفی اپرا فایل‌های MP3 رو اجرا نمیکنه و سافاری هم
OGG رو پخش نمیکنه. پس برای اجرای درست در همه‌ی مرورگرها، حداقل به دو
فایل MP3 به همراه Wav یا OGG نیاز داریم. برای مقداردهی همزمان دو فایل به
تگ audio ، از تگ source استفاده می‌کنیم:
<audio>
<source src="file.mp3" type="audio/mpeg">
<source src="file.ogg" type="audio/ogg">
</audio>
همچنین برای اینکه متنی برای مرورگرهای قدیمی‌تر نمایش داده بشه، این متن
رو بین دو تگ audio قرار میدیم. یا حتی میتونیم به جای متن، از فایل‌های
صوتی فلش استفاده کنیم تا اگه مرورگر قدیمی بود، آبجکت فلش رو اجرا کنه.
<audio>
<source src="file.mp3" type="audio/mpeg">
<source src="file.ogg" type="audio/ogg">
Update your browser dude!
</audio>
تگ video هم مثل تگ audio، استفاده میشه:
<video src="file.mp4"></video>
مرورگرها از سه فرمت MP4، WebM و OGG برای پخش ویدیو پشتیبانی میکنن.
برای اجرای فایل در همه‌ی مرورگرها حداقل از دو فرمت MP4 به همراه WebM یا OGG استفاده می‌کنیم.
<video> <source src="file.mp4" type="audio/mpeg">
<source src="file.ogg" type="audio/ogg">
</video>
البته تگ‌های audio و video در سه نسخه‌ی آخر همه‌ی مرورگرها کار میکنن و به راحتی می‌تونید استفاده کنید.
خاصیت Controls
کنترل‌های Play/Pause، نوار پیمایش و Volume رو نمایش میده.
اگه این خاصیت رو برای تگ audio استفاده نکنیم، هیچ عنصری در صفحه دیده نمیشه.
<audio src="file.mp3" controls></audio>
<video src="file.mp4" controls></video>
خاصیت autoplay
به محض لود شدن عنصر، شروع به پخش فایل میکنه
<audio src="file.mp3" autoplay></audio>
<video src="file.mp4" autoplay></video>
خاصیت loop
باعث میشه بعد از اتمام پخش، فایل مجددا پخش بشه
<audio src="file.mp3" loop></audio><video src="file.mp4" loop></video>خاصیت muted
در حالت پیشفرض، صدا رو قطع میکنه
<audio src="file.mp3" muted></audio><video src="file.mp4" muted></video>خاصیت preload
اگه auto باشه، به محض بارگذاری عنصر، دریافت فایل صوتی شورع میشه؛ اگه none باشه، تا قبل از play شدن، فایل از سرور دریافت نمیشه.
<audio src="file.mp3" preload="auto"></audio><video src="file.mp4" preload="auto"></video>مثال:
<audio controls autoplay><source src="sound.ogg" type="audio/ogg">
<source src="sound.mp3" type="audio/mpeg">
</audio>
موفق باشید
