در ادامه سلسله مقالات آموزش 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 با ما همراه باشید.
کامنت جدید ...