تگ audio در HTML | گذاشتن فایل صوتی در html

توی این جلسه از دوره آموزش رایگان html به مبحث گذاشتن فایل صوتی در html میپردازیم. اول تگ audio رو یاد میگیریم و بعد با اتریبیوت هایی مثل loop, autoplat, controls آشنا میشیم. و آخر جلسه برای یادگیری بهتر یه تمرین انجام میدیم. تگ audio یکی از مباحث آسون و در عین حال پیشرفتس، و شما باید برای تبدیل شدن به یه طراح سایت به اون مسلط باشید، پس در ادامه این جلسه با من همراه باشید.

اهمیت فایل های صوتی در سایت ها

موسیقی و فایل صوتی در html کاربرد های زیادی داره و خیلی از سایت ها هستن که کارشون فقط پخش و دانلود موزیکه مثل soundcloud و spotify. پس شما حتما به عنوان یه طراح سایت باید به این مبحث مسلط باشید.

تگ audio در HTML

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

روش قدیمی

توی این روش حالت باز و بسته این تگ رو مینویسیم و تمام اتریبیوت هارو برای همین تگ مینویسم. اینجا براتون یه نمونه از این روش رو گذاشتم

<audio src=""></audio>

روش جدید

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

<audio>
    <source src="" type="" />
</audio>

فرمت فایل های صوتی

• MP3
• WAV
• Ogg

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

اتریبیوت src

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

توی روش قدیمی این اتریبیوت رو برای تگ audio مینوشتیم اما توی روش جدید این اتریبیوت برای تگ source نوشته میشه.

اتریبیوت type

type نشون دهنده نوع و فرمت فایلمونه. برای فایل های صوتی اول audio رو مینویسیم، بعد / میزاریم و پسوند و فرمت فایلمون رو مینویسیم. بالاتر به فرمت های قابل استفاده برای فایل های صوتی اشاره کردیم.

مثال زیر یه نمونه از اتریبیوت src و type توی روش جدید رو نشون میده.

<audio>
    <source src="./music.mp3" type="audio/mp3" />
</audio>

اتریبیوت controls

اگه کد بالا رو اجرا کنید میبینید که هیچ اتفاقی نمی افته. ما باید از اتریبیوت controls توی تگ audio استفاده کنیم تا بتونیم قابلیت هایی مثل pause و play و download داشته باشیم و بتونیم موزیکمون رو کنترل کنیم. این اتریبیوت به صورت زیر نوشته میشه:

<audio controls>
    <source src="./music.mp3" type="audio/mp3" />
</audio>

اتریبیوت autoplay

بعضی وقتا پیش میاد که میخواید وقتی کاربر وارد سایت شد یه موزیک خودکار براش پخش بشه. برای انجام این کار اتریبیوتی به نام autoplay برای تگ audio مینویسیم. البته یکسری از مرورگر های جدید مثل کروم یا فایرفاکس از این کار جلوگیری میکنن و نمیزارن موزیک خودکار پخش بشه.

اتریبیوت loop

بعضی وقتا پیش میاد که یه موزیکی توی سایتمون داریم که میخوایم بعد از تموم شدن دوباره تکرار بشه. این کار با اتریبیوت لوپ (loop) از تگ audio انجام میشه. نحوه نوشتن این اتریبیوت مثل controls و autoplay هست. تکه کد زیر یه نمونه از ترکیب این اتریبیوت هارو نشون میده.

<audio controls autoplay loop>
    <source src="./music.mp3" type="audio/mp3" />
</audio>

قطع کردن صدای موزیک

بعضی وقتا نیازه که موزیک ها به صورت اولیه بدون صدا و mute باشن و کاربر خودش صدای موسیقی رو تنظیم کنه. این کار با استفاده از اتریبیوت muted انجام میشه که یه نمونه ازش رو توی تیکه کد زیر میبینید.

<audio controls muted>
    <source src="./music.mp3" type="audio/mp3" />
</audio>

پشتیبانی نکردن مرورگر از تگ audio

بعضی وقتا پیش میاد که مرورگر کاربر قدیمی باشه و از تگ audio پشتیبانی نمیکنه. ما میتونیم یه توضیحات برای همچین کاربرهایی بنویسیم (مثل alt که برای عکس ها می‌نوشتیم). این متن رو میتونیم بین تگ باز و بسته audio بنویسیم. مثال:

<audio controls>
    <source src="./music.mp3" type="audio/mp3" />
    مرورگر شما نمیتونه از این موزیک پشتیبانی کنه!
</audio>

تمرین این جلسه

یه فایل HTML باز کنید و یه موزیک داخل سایتتون بزارید. به نکات زیر توجه کنید

•  از راه دوم استفاده کنید
• موزیک به صورت پیشفرض mute یا بی صدا باشه
• حتما از controls استفاده کنید
• از هر دو نوع آدرس دهی ( مطلق و نسبی ) استفاده کنید.

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

ساختن لیست در HTML