ممکن است در صفحات وب نیاز داشته باشید تا به پخش و اجرای فایل های صوتی و آهنگ بپردازید . تا قبل از ارائه HTML 5 ، استاندارد خاصی برای نمایش فایل های صوتی در صفحات وب وجود نداشت و طراحان وب برای پخش اینگونه فایل ها از ابزارهای جانبی مثلreal palyer و falsh player استفاده می کردند .
این مسئله چند اشکال عمده دارد . اول اینکه باید plugin فلش پلیر بر روی مرورگر شما نصب شده باشد و ورژن آن به روز بوده تا فایل صوتی را پخش کند .
اما HTML 5 ، یک استاندارد برای پخش فایل های صوتی تعیین کرده است که به وسیله آن ، دیگر نیازی به استفاده و نصب نرم افزار جانبی خاصی وجود ندارد .
تگ جدید < audio > ، برای پخش فایل های صوتی در صفحات وب به کار می رود .
در جدول زیر نحوه کلی استفاده از این تگ را به شما نمایش داده و سپس به توضیح موارد مطرح شده در آن می پردازیم :
< audio > تگ <audio controls=”controls”> <source src=”song.mp3″ type=”audio/mp3″ /> <source src=”song.ogg” type=”audio/ogg” /> Your browser does not support the audio elemet. </audio> |
در این بخش به تشریح کد بالا و مواردی که ممکن است برای شما سوال ایجاد کند می پردازیم :
خاصیت controls : مقدار دهی خاصیت controls ، باعث می شود تا مرورگر دکمه های پخش ، توقف و تنظیم صدا را به کاربر نمایش دهد . در حالت پیش فرض این کنترل ها نمایش داده نمی شوند .
تعیین چند فرمت برای فایل صوتی توسط تگ < source > : همانطور که متوجه شده اید ، چند فرمت مختلف از یک فایل یکسان را به وسیله تگ < source > در درون تگ < audio > قرار داده ایم . این کار به این دلیل است که مرورگرهای مختلف از فرمت های خاص صوتی پشتیانی می کنند که اسامی آنها در جدول زیر آمده است . هر مرورگر هنگامی که یه این کد می رسد ، فرمتی که خود می تواند اجرا کند را پخش می کند . این کار برای سازگاری با مرورگرهای مختلف است .
در حال حاصر ۳ نوع فرمت فایل های ویدویی داریم که پشتیانی یا عدم پشتیانی آنها توسط مرورگر های مختلف را در جدول زیر نمایش داده ایم :
MP3 | Ogg | WebM | نوع مرورگر |
No | Yes | Yes | فایر فاکس |
No | Yes | Yes | اپرا |
Yes | No | No | اینترنت اکسپلورر |
Yes | Yes | Yes | کروم |
تگ های مربوط به پخش صوت و آهنگ در صفحات وب :
در لیست زیر تگ های اصلی و مهم مرتبط با پخش صوت در HTML 5 را به همراه توضیحات مختصری راجع به هر کدام ، قرار داده ایم . برای دریافت اطلاعات بیشتر بر روی نام آن تگ کلیک نمایید :
< audio >این تگ ، تگ اصلی پخش صوت در HTML 5 است ، که به وسیله آن کد لازم برای نمایش صوت را قرار می دهیم .
< source >این تگ آدرس و نوع فایل صوتی که می خواهیم پخش کنیم را تعیین می کند .