آموزش HTML 5 - پخش فایل های صوتی در صفحات وب
پخش صوت و آهنگ در صفحات HTML :
ممکن است در صفحات وب نیاز داشته باشید تا به پخش و اجرای فایل های صوتی و آهنگ بپردازید
. تا قبل از ارائه 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 > قرار داده ایم . این کار به این دلیل است که مرورگرهای
مختلف از فرمت های خاص صوتی پشتیانی می کنند که اسامی آنها در جدول زیر آمده است .
هر مرورگر هنگامی که یه این کد می رسد ، فرمتی که خود می تواند اجرا کند را پخش می
کند . این کار برای سازگاری با مرورگرهای مختلف است .
در حال حاصر 3 نوع فرمت فایل های ویدویی داریم که پشتیانی یا عدم پشتیانی آنها توسط
مرورگر های مختلف را در جدول زیر نمایش داده ایم :
|
Yes
|
Yes
|
No
|
|
Yes
|
Yes
|
No
|
|
No
|
No
|
Yes
|
|
Yes
|
Yes
|
Yes
|
تگ های مربوط به پخش صوت و آهنگ در صفحات وب :
در لیست زیر تگ های اصلی و مهم مرتبط با پخش صوت در HTML 5 را به همراه توضیحات مختصری
راجع به هر کدام ، قرار داده ایم . برای دریافت اطلاعات بیشتر بر روی نام آن تگ کلیک
نمایید :
|
این تگ ، تگ اصلی پخش صوت در HTML 5 است ، که به وسیله آن کد لازم برای نمایش صوت را
قرار می دهیم .
|
|
این تگ آدرس و نوع فایل صوتی که می خواهیم پخش کنیم را تعیین می کند .
|
مثال عملی استفاده از تگ < audio > و نمایش ویدیو در صفحه :
مثال : در مثال زیر کاربرد تگ < 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 tag.
</audio>
|
|
|
مثال : در مثال دوم ، همان مثال قبل را بازنویسی کرده ایم ،
با این تفاوت در آن خاصیت controls را مقدار دهی نکرده ایم . می بینید که پخش صوت دکمه
های پخش و توقف را ندارد :
نکته : اگر مرورگر شما از تگ < audio > پشتیانی نکند ،
پیام هشدار قرار داده شده در کد مثال نمایش داده خواهد شد .
<audio >
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
Your browser does not support the audio tag.
</audio>
|
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :