تگ audio در HTML

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ audio در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.

سایت های صوتی و تصویری همواره از پربازدیدترین سایت های فضای مجازی محسوب می شوند. از سایت های انتشار آهنگ گرفته تا سایت های پادکست و ... که امروزه برای خیلی از کاربران شناخته شده هستند. در این مطلب قصد داریم شما را با تگ audio در html که برای پخش فایل صوتی کاربرد دارد آشنا کنیم.

تگ audio چیست؟

تگ audio برای پخش فایل صوتی در صفحه HTML به کار می رود.

تگ audio در HTML5 معرفی شده و قبل از آن روش های دیگری برای پخش فایل صوتی به کار می رفت که امروزه دیگر مورد استفاده قرار نمی گیرد.

این تگ با <audio> شروع شده و با </audio> پایان می یابد.

<audio></audio>

فرمت های قابل پخش

تگ audio امکان پخش آهنگ با فرمت های mp3 و wav و ogg را فراهم می کند.

در صورتی که فرمت فایل صوتی در مرورگری قابل پشتیبانی و اجرا نباشد می توان با استفاده از تگ source یک فایل را در چند فرمت درون تگ audio قرار داد تا در صورت پشتیبانی و پخش نکردن یک فایل صوتی، فایل بعدی با فرمت دیگر پخش شود.

نکته: صفت type در تگ source نوع فایل صوتی را مشخص می کند.

کد:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.wav" type="audio/wav" />
</audio>

صفات تگ audio

صفات کنترل و تنظیمات بیشتری را در اختیار ما قرار می دهند.

در جدول زیر صفات تگ audio را مشاهده می فرمایید.

صفت	مقدار	توضیحات
src	URL (لینک فایل صوتی)	لینک آدرس فایل صوتی مورد نظر برای پخش
controls	controls	کنترل پخش صدا
autoplay	autoplay	پخش خودکار
loop	loop	تکرار پخش
muted	muted	بی صدا کردن
preload	auto | metadata | none	پیش بارگذاری فایل صوتی توسط مرورگر

صفت src

لینک فایل جهت پخش باید در این صفت قرار گیرد.

<audio src="file.mp3"></audio>

صفت controls

امکان کنترل پخش صدا را فراهم می کند.

<audio controls></audio>

صفت autoplay

با استفاده از این صفت، پخش به صورت خودکار شروع می شود.

<audio autoplay></audio>

صفت loop

با استفاده از این صفت، فایل صوتی بعد هر بار اجرا تکرار می شود.

<audio loop></audio>

صفت muted

با استفاده از این صفت فایل صوتی بی صدا می شود.

<audio muted></audio>

صفت preload

برای پیش بارگذاری فایل صوتی به کار می رود.

<audio preload="auto|metadata|none"></audio>

مقدار auto

بعد از لود صفحه، پیشاپیش فایل صوتی بارگذاری می شود.

مقدار metadata

بعد از لود صفحه، اطلاعات متا فایل صوتی بارگذاری می شود.

مقدار none

پیش بارگذاری را کلا غیر فعال می کند.

مثال های تگ audio

مثال 1:

<audio src="file.mp3" controls autoplay loop muted preload="auto"></audio>

مثال 2:

<audio controls autoplay loop muted preload="auto">
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.wav" type="audio/wav" />
</audio>

در مثال های بالا تمامی صفات نوشته شده در جدول بالا به کار رفته است.

مثال 3:

<audio src="audio.mp3" controls></audio>

همان طور که در کد بالا مشاهده می فرمایید برای آدرس لینک فایل صوتی از صفت src بهره می بریم.

صفت controls امکان کنترل پخش و توقف آهنگ را به ما می دهد.

سازگاری با مرورگرها

تگ audio با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS