آموزش تگ Audio در HTML

آموزش تگ Audio در HTML
آموزشگاه آنلاین اکسیژن 2

با سلام

امیدوارم حال همتون خوب باشه.

در این آموزش قصد داریم تا شما را با تگ 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>

امیدوارم از این آموزش ما لذت برده باشید.

در صورتی که سوالی داشتید می تونید در زیر همین مطلب قرار دهید تا در اسرع وقت به سوالات شما پاسخ دهیم.

موفق و پیروز باشید.

پاسخی بگذارید