آموزش تگ audio در HTML

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

آموزش تگ audio در HTML

Free-Learn

تگ audio در HTML

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

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

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

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

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که انواع مرورگرهای اینترنتی به ترتیب از فرمت های MP3 و WAV و Ogg پشتیبانی می کنند یا خیر.

نام مرورگر MP3 Wav Ogg
Internet Explorer بله (پشتیبانی می شود) خیر (پشتیبانی نمی شود) خیر (پشتیبانی نمی شود)
Chrome بله (پشتیبانی می شود) بله (پشتیبانی می شود) بله (پشتیبانی می شود)
Firefox بله (پشتیبانی می شود) بله (پشتیبانی می شود) بله (پشتیبانی می شود)
Safari بله (پشتیبانی می شود) بله (پشتیبانی می شود) خیر (پشتیبانی نمی شود)
Opera بله (پشتیبانی می شود) بله (پشتیبانی می شود) بله (پشتیبانی می شود)

طبق جدول بالا همانطور که مشاهده مینمایید تنها فرمتی که توسط تمامی مرورگرها پشتیبانی می شود فرمت MP3 می باشد، لذا شما باید سعی کنید همیشه از فایل های صوتی با این فرمت استفاده نمایید.

Free-Learn

جدول نوع رسانه صوتی در HTML

هر یک از فرمت های صوتی موجود در جدول بالا (یا پایین) یک MIME Type یا نوع رسانه متن دارند که باید همانند جدول زیر شما نیز همیشه نوع رسانه را مشخص نمایید.

در این وبسایت میتوانید لیست کامل و تمامی انواع فایل ها بهمراه نوع آنها را مشاهده نمایید.

فرمت فایل نوع رسانه
MP3 audio/mpeg
WAV audio/wav
Ogg audio/ogg

Free-Learn

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

ما میتوانیم یک پیغام به دلخواه درون تگ <audio> قرار دهیم تا اگر مرورگر کاربر از تگ <audio> پشتیبانی نکرد آن پیغام نمایش داده شود و کاربر بداند که دلیل پخش نشدن صدا/آهنگ چه بوده است.

امتحان کنید

Free-Learn

مثال از تگ audio در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

مثال شماره ۱ : (وجود صفت controls برای نمایش دکمه های پخش،تنظیم صدا و.. ضروری می باشد)

امتحان کنید

مثال شماره ۲ : پخش خودکار آهنگ

امتحان کنید

مثال شماره ۳ : تکرار پخش آهنگ

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ audio در HTML پشتیبانی میکنند یا خیر.

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی ۴٫۰ ۳٫۵ ۱۰٫۵ ۴٫۰ ۹٫۰

Free-Learn

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

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

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

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ audio از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

تگ audio یک تگ جدید/اضافه شده در HTML5 می باشد.

هر متنی که در بین تگ audio قرار میگیرد ، اگر مرورگر از تگ audio پشتیبانی نکند آن متن برای کاربر به نمایش درخواهد آمد و کاربر میتواند دلیل پخش نشدن آهنگ،صدا را متوجه شود.

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

Free-Learn