آموزش HTML – تگ audio

نویسنده : مرتضی گنج | تاریخ انتشار : 2019/11/15 | بخش : آموزش HTML

تگ <audio> در HTML

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

قبل از اینکه HTML5 بیاد ما برای قرار دادن یک فایل صوتی یا تصویری باید از نرم افزارهای جانبی (افزونه یا پلاگین ها) همانند فلش استفاده میکردیم ولی امروزه با وجود HTML5 کاره ما دیگه خیلی خیلی راحت شده.

به گونه ای که الان ما میتونیم به راحتی با یک تکه کد فایل آهنگ یا بطور کلی فایل های صوتی و یا فیلم و بطور کلی فایل های ویدئویی در هر کجای یک صفحه ی وب که بخواهیم قرار دهیم.

باید به این نکته توجه نمایید که تنها ۳ فرمت MP3 و WAV و Ogg در HTML5 پشتیبانی می شوند، لذا شما برای قرار دادن یک آهنگ و.. درون یک صفحه وب باید فایل شما یکی از ۳ فرمت MP3 و WAV و Ogg را داشته باشد در غیراینصورت فایل شما برای کاربر پخش نخواهد شد.

نکته: هر نوشته ای که بین <audio> و <audio/> قرار گیرد، در مرورگر هایی که این تگ را پشتیبانی نمی کنند نمایش داده خواهد شد.

نمونه کد و تمرین از تگ <audio>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  متاسفانه مرورگر شما از تگ audio پشتیبانی نمیکند .
</audio>

 

تمرین کنید !

 

پشتیبانی مرورگرها از تگ <audio>

Element
<audio> ۴٫۰ ۳٫۵ ۹٫۰ ۴٫۰ ۱۰٫۵

جدول صفات تگ audio در HTML

 

آدرس یا مسیر فایل صوتی را مشخص میکند.​

نام صفت  مقدار توضیح
autoplay autoplay باعث می شود که فایل صوتی بصورت خودکار به محض بالا آمدن پخش شود.
controls controls باعث می شود دکمه های پخش (همچون دکمه پخش و قطع،تنظیم صدا و..) نمایش داده شوند. (استفاده از این صفت در تگ audio ضروری می باشد)
loop loop باعث می شود فایل صوتی وقتی تمام شد دوباره پخش شود.
preload auto
metadata
none
مشخص میکند که آیا با بارگذاری صفحه ، فایل صوتی نیز بارگذاری شود یا خیر
src URL آدرس یا مسیر فایل صوتی را مشخص میکند.