با سلام
امیدوارم حال همتون خوب باشه.
در این آموزش قصد داریم تا شما را با تگ Audio در HTML آشنا کنیم که به شما این اجازه را خواهد داد تا صوت و موزیک هایی که قصد دارید در سایتتون قرار بدید رو به صورت صحیح نمایش دهید.
پس با ما همراه باشد.
این تگ هم مانند تگ video در HTML که در درس قبل به شما آموزش داده بودیم می باشد .شما باید براساس اینکه کاربران شما از کدام مرورگر استفاده می کنند در فرمت های مختلف صوت خود را ارائه کنید تا وقتی کاربران از مرورگرهای مختلف مانند Google Chrome ، Mozila Firefox، Safari و … استفاده می کنند سایت شما به درستی لود شود و نمایش صوت به درستی صورت پذیرد.
بهترنی فرمتی که می توانید از ان استفاده کنید فرمت Mp3 می باشد که در همه مرورگرها پشتیبانی می گردد.
برای مثال فرمت Wav در اینترنت اکسپلورر پشتیبانی نمی گردد.
پس بهتراست از فرمت Mp3 استفاده کنید.
شکل کلی تگ Audio به شکل زیر می باشد :
<audio>
<source src="music.mp3" type="audio/mpeg">
متنی که در صورت پشتیبانی نشدن توسط مرورگر نمایش داده می شود.
</audio>همانطور که میبنید برای تگ Audio صفت Type تعیین می گردد که برای فرمت های مختلف ،مقدارهای زیر را به ترتیب در بر می گیرد :
| فرمت فایل | مقدار صفت Type |
| MP3 | audio/mpeg |
| WAV | audio/wav |
| Ogg | audio/ogg |
شما می توانید برای صوت خود امکان کنترل ، پخش خودکار و … را فعالسازی کنید که لیست مقادیری که می توانید به این تگ تخصیص دهید در جدول زیر قرار دارد :
| نام مقادیر قابل فعالسازی | مقدار | توضیحات |
| autoplay | autoplay | پخش خودکار فایل صوتی |
| controls | controls | ایجاد دکمه های کنترل فایل صوتی |
| loop | loop | تکرار دوباره فایل صوتی پس از اتمام |
| muted | muted | اجرای فایل صوتی در حالت بی صدا |
| preload | auto metadata none | تنظیم اجرای فایل صوتی همراه با بارگذاری صفحه |
| src | URL | آدرس فایل صوتی |
برای استفاده از مقادیر جدول بالا به شکل زیر می توانید کدهای خود را در قسمت های مختلف سایتتان که به آنها نیازمندید قرار دهید(مثال زیر برای مقدار Autoplay می باشد) :
<audio controls autoplay>
<source src="music.mp3" type="audio/mpeg">
</audio>امیدوارم از این آموزش ما لذت برده باشید.
در صورتی که سوالی داشتید می تونید در زیر همین مطلب قرار دهید تا در اسرع وقت به سوالات شما پاسخ دهیم.
موفق و پیروز باشید.
