نحو
را <audio> عنصر به یک تگ باز و بسته نیاز دارد. شما ممکن است یک واحد را پاس کنید src مسیر:
1 |
<audio src="audio_file.mp3"></audio> |
یا عناصر منبع تودرتوی اضافی در صورت نیاز به پشتیبانی از چندین فرمت صوتی.
1 |
<audio>
|
2 |
<source src="soundtrack.mp3 "type="audio/mpeg"> |
3 |
<source src="soundtrack.ogg "type="audio/ogg"> |
4 |
</audio>
|
مثال
در اینجا مثالی از نحوه استفاده از آن آورده شده است <audio> عنصر برای جاسازی یک فایل صوتی در صفحه وب خود:
1 |
<audio controls> |
2 |
<source src="file.mp3 "type="audio/mpeg"> |
3 |
Your browser does not support the audio element. |
4 |
</audio>
|
نتیجه
پیست یوکلله هاوایی توسط اندی اسلاتر
ویژگی های
در اینجا برخی از متداول ترین ویژگی های مورد استفاده برای عنصر
-
src– آدرس فایل صوتی را که قرار است پخش شود را مشخص می کند. -
controls– کنترل‌های اصلی پخش مانند پخش، مکث و صدا را اضافه می‌کند. -
autoplay– پخش فایل صوتی به صورت خودکار هنگام بارگیری صفحه شروع می شود. -
loop– فایل صوتی را حلقه می کند تا به طور مداوم تکرار شود. -
muted– پخش صدا را با قطع صدا شروع می کند. -
preload– مشخص می کند که آیا صدا باید از قبل بارگذاری شود یا خیر.
محتوا
را <audio> عنصر الزامات محتوای خاصی ندارد، اما مهم است که حداقل یکی را شامل شود <source> عنصر داخل <audio> عنصری برای اطمینان از سازگاری بین مرورگرها. در اینجا یک مثال است:
1 |
<audio>
|
2 |
<source src="reel.mp3" type="audio/mpeg"> |
3 |
<source src="reel.ogg" type="audio/ogg"> |
4 |
Your browser does not support the audio element. |
5 |
</audio>
|
این مثال شامل دو فرمت فایل صوتی مختلف است، MP3 و اوگ وربیس، با یک پیام بازگشتی برای مرورگرهایی که از آن پشتیبانی نمی کنند <audio> عنصر
محتوا ممکن است در داخل عنصر صوتی ارائه شود، اما برای مرورگرهای قدیمی‌تری که از آن پشتیبانی نمی‌کنند در نظر گرفته شده است audio عنصر
رندر و استایل کردن مرورگر
در حال حاضر هیچ CSS استانداردی برای استایل دادن به کنترل‌های UI مختلف در داخل وجود ندارد <audio> بازیکن.
تعدادی شبه کلاس وجود دارد، مانند :playing و :paused، که بسته به وضعیت پخش کننده به روشی بسیار محدود امکان استایل کردن را می دهد، اما پشتیبانی ضعیف است.
تعدادی نیز وجود دارد شبه کلاس هایی که می توانند با پیشوندهای مرورگر استفاده شوند، اما باز هم فرزندخواندگی مشکوک است.
در اینجا نحوه نمایش مرورگرهای اصلی آمده است <audio> عنصر به طور پیش فرض:
