تگ audio در HTML
از تگ audio در HTML برای پخش و قرار دادن فایل های صوتی در سند استفاده میکنیم.
مثال
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>تعریف و کاربرد
از تگ audio در HTML برای قرار دادن فایل های صوتی در سند استفاده می شود ، مانند : موزیک ها ، پادکست های صوتی و…
عنصر <audio> درون خودش یک یا چند تگ <source> دارد که هر کدام از آن یک نسخه از فایل صوتی را با فرمت متفاوت در خودش دارد و مرورگر ها اولین فرمتی را که از این فایل صوتی پشتیبانی میکنند اجرا خواهند کرد.
نکته: وقتی شما فایل صوتی خود را با دو فرمت مثلاً mp3 و wav درون تگ source قرار می دهید اگر مرورگر فرمت mp3 را پشتیبانی نکند فرمت wav را اجرا خواهد کرد یا فرمتی که توان پشتیبانی آن را داشته باشد.
متنی که بین <audio> و <audio/> قرار دارد تنها در صورتی نمایش داده می شود که مرورگر ( Browser ) تگ audio را پشتیبانی نکند.
سه قالب صوتی پشتیبانی شده در HTML وجود دارد: MP3 ، WAV و OGG.
پشتیبانی مرورگر ها از فرمت های صوتی مختلف
| مرورگر | MP3 | WAV | OGG |
|---|---|---|---|
| Edge / IE | بله | بله* | بله* |
| Chrome | بله | بله | بله |
| Firefox | بله | بله | بله |
| Safari | بله | بله | خیر |
| Opera | بله | بله | بله |
پشتیبانی مرورگر ها
اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کند که به طور کامل عنصر را پشتیبانی می کند.
| عنصر | |||||
|---|---|---|---|---|---|
<audio> | 4.0 | 9.0 | 3.5 | 4.0 | 11.5 |
خواص
| خاصیت | مقدار | توضیحات |
|---|---|---|
| autoplay | autoplay | بعد از بارگیری کامل فایل ، رسانه بلافاصله به صورت اتوماتیک پخش و اجرا می شود |
| controls | controls | مشخص میکند که دکمه های کنترل نمایش داده شود یا خیر (دکمه پخش / دانلود / توقف و…) |
| loop | loop | بعد از اتمام فایل صوتی مجدد دوباره پخش می شود |
| muted | muted | مشخص می کند که خروجی صدا باید بی صدا باشد |
| preload | auto metadata none | مشخص میکند که آیا با بارگذاری صفحه ، فایل صوتی نیز بارگذاری شود یا خیر |
| src | URL | آدرس یا مسیر ( URL ) فایل صوتی را مشخص میکند |
خواص عمومی
تگ audio از خواص عمومی در HTML پشتیبانی میکند.
رویداد های عمومی
تگ audio از رویداد های عمومی در HTML پشتیبانی میکند.
پست های مرتبط
ارسال یک نظر
برای نوشتن دیدگاه باید وارد بشوید.