محتوای آموزشی

بارگذاری فایل های صوتی در HTML5

بارگذاری فایل های صوتی در HTML5

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

در برخی صفحات وب نیاز است تا به پخش و اجرای فایل های صوتی و آهنگ بپردازید. تا قبل از ارائه HTML 5 ، استاندارد خاصی برای نمایش فایل های صوتی در صفحات وب وجود نداشت و به منظور پخش اینگونه فایل ها از ابزارهای جانبی مثل real palyer و falsh player باید استفاده می کردید.

استفاده از این ابزارها چندین مشکل دارد،مهمترین مشکل این روش این است که باید plugin فلش پلیر بر روی مرورگر شما نصب شده باشد و ورژن آن به روز بوده تا فایل صوتی را پخش کند .

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

<audio src=" آدرس فایل صوتی " >

استفاده از تگ audio بسیار شبیه به استفاده از تگ video می باشد و چنانچه مقاله مربوط به " آموزش قرار دادن ویدئو در صفحات وب" را مطالعه کرده باشید مشکلی در نحوه استفاده از تگ audio نخواهید داشت.تگ audio نیز دارای ویژگی های (attributes) خاص خود می باشد که در ادامه انها را بررسی خواهیم کرد.

src

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

تعیین و مقداردهی این خاصیت اجباری می باشد.

autoplay

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

تعیین این خاصیت اختیاری می باشد.

controls

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

تعیین این خاصیت اختیاری می باشد.

loop

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

تعیین این پارامتر اختیاری است.

muted

خاصیت muted نیز جزو خواص boolean تگ audio می باشد و در صورتی که برای یک تگ audioتعیین شود، باعث می شود تا فایل صوتی در ابتدای اجرا ، بدون صدا باشد.

تعیین این پارامتر اختیاری است.

مثال زیر نمونه ای از نحوه استفاده از تگ audio در صفحات وب می باشد.

<audio src="/Portals/0/multiMedia/myMusic.mp3" controls></audio>

به منظور آنکه مثال های این بخش را بهتر درک کنید این مثال ها را عینا در کد قرار می دهیم تا خروجی کدها را مشاهده کنید.

همانطور که مشاهده می کنید فایل صوتی خود را توانستیم به صفحه اضافه کنیم،همچنین از آنجا که از خاصیت control استفاده کرده ایم دکمه کنترلی مانند پخش،توقف،volume و ... نیز نمایش داده می شود.

نکته : به منظور کنترل ابعاد پلیر خود می توانید از کدهای css استفاده کنید.به مثال زیر توجه کنید.

<audio src="/Portals/0/multiMedia/myMusic.mp3" controls style="width:100%"></audio>

به دلیل آنکه در استایل های مربوط به تگ audio خود خاصیت width آن را برابر با 100% قرار داده ایم،عرض پلیر ما برابر با عرض والد خود خواهد بود.

مشکل دیگر : مرورگرهای قدیمی

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

مرورگر MP3 Wav Ogg
اینترنت اکسپلورر
گوگول کروم
فایرفاکس
سافاری
اپرا

برای حل این مشکل نیز در HTML5،استفاده از تگ source توصیه شده است.

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

نحوه استفاده از تگ source به صورت زیر می باشد:

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

مشکل دیگر : مرورگرهای قدیمی

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

به منظور نمایش این پیام به کاربر خود می توانید پیغام خود را قبل بستن تگ audio قرار دهید.به این ترتیب چنانچه کاربر با استفاده از مرورگرهای قدیمی وارد سایت شما شود به جای نمایش ویدئو،پیغام مدنظر شما نمایش داده می شود.برای درک بهتر موضوع به مثال زیر توجه کنید:

<audio  controls="controls">
    <source src="myMusic.mp3" type="audio/mp3" />
    <source src="myMusic.ogg" type="audio/ogg" />
    <source src="myMusic.wav" type="audio/wav" />
	متاسفانه مرورگر شما قدیمی است و امکان پخش فایل های صوتی را ندارد
</audio>

به این ترتیب با نحوه اضافه کردن فایل های صوتی به صفحات خود در HTML5 آشنا شدید.

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه آموزش های HTML,CSS با ما همراه باشید.

کامنت جدید ...
Sort by:

مطالب پیشنهادی

'