ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

پخش صوت و آهنگ در صفحات HTML5 مطلب ویژه

توسط 11 تیر, 1393 3934 0

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

audio-HTML5ممکن است در صفحات وب نیاز داشته باشید تا به پخش و اجرای فایل های صوتی و آهنگ بپردازید . تا قبل از ارائه  HTML 5، استاندارد خاصی برای نمایش فایل های صوتی در صفحات وب وجود نداشت و طراحان وب برای پخش اینگونه فایل ها از ابزارهای جانبی مثلreal palyer و falsh player استفاده می کردند .
این مسئله چند اشکال عمده دارد . اول اینکه باید plugin فلش پلیر بر روی مرورگر شما نصب شده باشد و ورژن آن به روز بوده تا فایل صوتی  را پخش کند .اما HTML 5 ، یک استاندارد برای پخش فایل های صوتی تعیین کرده است که به وسیله آن ، دیگر نیازی به استفاده و نصب نرم افزار جانبی خاصی وجود ندارد .
تگ جدید < audio > ، برای پخش فایل های صوتی در صفحات وب به کار می رود .

در جدول زیر نحوه کلی استفاده از این تگ را به شما نمایش داده و سپس به توضیح موارد مطرح شده در آن می پردازیم :

 

<audio controls='controls'>
    <source src='http://www.learning.asarayan.com/song.mp3' type='audio/mp3' />
    <source src='http://www.learning.asarayan.com/song.ogg' type='audio/ogg' />
    Your browser does not support the audio elemet.
</audio>

 


در این بخش به تشریح کد بالا و مواردی که ممکن است برای شما سوال ایجاد کند می پردازیم :

1.    خاصیت controls : مقدار دهی خاصیت controls ، باعث می شود تا مرورگر دکمه های پخش ، توقف و تنظیم صدا را به کاربر نمایش دهد . در حالت پیش فرض این کنترل ها نمایش داده نمی شوند .

2.    تعیین چند فرمت برای فایل صوتی توسط تگ < source > : همانطور که متوجه شده اید ، چند فرمت مختلف از یک فایل یکسان را به وسیله تگ < source > در درون تگ < audio > قرار داده ایم . این کار به این دلیل است که مرورگرهای مختلف از فرمت های خاص صوتی پشتیانی می کنند که اسامی آنها در جدول زیر آمده است . هر مرورگر هنگامی که یه این کد می رسد ، فرمتی که خود می تواند اجرا کند را پخش می کند . این کار برای سازگاری با مرورگرهای مختلف است .

در حال حاضر 3 نوع فرمت فایل های صوتی داریم که پشتیانی یا عدم پشتیانی آنها توسط مرورگر های مختلف نشان داده شده است :

•    MP3 : مرورگر اینترنت اکسپلورر و گوگل کروم پشتیبانی می کنند
•    WebM :مرورگر گوگل کروم, اپرا و موزیلا فایرفاکس پشتیبانی می کنند .
•    Ogg : مرورگر گوگل کروم, اپرا , و موزیلا فایرفاکس پشتیبانی می کنند .
تگ های مربوط به پخش صوت و آهنگ در صفحات وب :

در لیست زیر تگ های اصلی و مهم مرتبط با پخش صوت در HTML 5 را به همراه توضیحات مختصری راجع به هر کدام ، قرار داده ایم .

< audio >     : این تگ ، تگ اصلی پخش صوت در HTML 5 است ، که به وسیله آن کد لازم برای نمایش صوت را قرار می دهیم .

< source >    : این تگ آدرس و نوع فایل صوتی که می خواهیم پخش کنیم را تعیین می کند .

مثال : در مثال زیر کاربرد تگ < audio > را در عمل و پخش یک آهنگ را به شما نمایش داده ایم :
نکته : اگر مرورگر شما از تگ < audio > پشتیانی نکند ، پیام هشدار قرار داده شده در کد مثال نمایش داده خواهد شد .

<audio  controls='controls'>
    <source src='http://www.learning.asarayan.com/song.mp3' type='audio/mp3' />
    <source src='http://www.learning.asarayan.com/song.ogg' type='audio/ogg' />
    Your browser does not support the audio tag.
</audio>

 
مثال : در مثال دوم ، همان مثال قبل را بازنویسی کرده ایم ، با این تفاوت در آن خاصیت controls را مقدار دهی نکرده ایم . می بینید که پخش صوت دکمه های پخش و توقف را ندارد  :
نکته : اگر مرورگر شما از تگ < audio > پشتیانی نکند ، پیام هشدار قرار داده شده در کد مثال نمایش داده خواهد شد .

 

<audio >
    <source src='http://www.learning.asarayan.com/song.mp3' type='audio/mp3' />
    <source src='http://www.learning.asarayan.com/song.ogg' type='audio/ogg' />
    Your browser does not support the audio tag.
</audio>

 

این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در سه شنبه, 03 شهریور 1394 ساعت 15:49
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا