تبلیغات
یادداشت های من - آموزش HTML5 – جلسه چهارم : Audio صدا – صوت

یادداشت های روزانه من درباره اینترنت، سیاست، آبکنار، رایانه، شعر، فناوری اطلاعات و ...
هر چیزی که بهش علاقه دارم

حسین (کیوان) جهانبخش آبکنار

جستجو

 

آموزش HTML5 – جلسه چهارم : Audio صدا – صوت

چهارشنبه 4 خرداد 1390   12:07 ب.ظ

HTML5 اسنانداردی را برای پخش صدا به وجود آورده است.


صدا در وب

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

HTML5 استانداردی را برای پخش صدا از طریق تگ audio فراهم کرده است. عنصر Audio می تواند فایل های صوتی و یا یک استریم صوتی را پخش کند.

فرمت های صدا

در حال حاضر 3 فرمت تحت پشتیبانی عنصر audio قرار دارد.

  • Ogg Verbis:

پشتیبانی می شود توسط:

Firefox 3.5

Opera 10.5

Chrome 3.0

پشتیبانی نمی شود توسط:

IE 9

Safari 3.0

 

  • MP3:

پشتیبانی می شود توسط:

IE 9

Chrome 3.0

Safari 3.0

پشتیبانی نمی شود توسط:

Firefox 3.5

Opera 10.5

 

  • Wav:

پشتیبانی می شود توسط:

Firefox 3.5

Opera 10.5

Safari 3.0

پشتیبانی نمی شود توسط:

IE 9

Chrome 3.0

 

این تگ (audio) چگونه کار می کند؟

برای پخش یک فایل صوتی در HTML5 تمام آن چیزی که شما نیاز دارید این یک خط کد است.

<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>

خاصیت control برای اضافه کردن دکمه های صدا و play و pause است.

برای مرورگرهایی که از تگ audio پشتیبانی نمی کنند متن مورد نظرمان برای نمایش به کاربر را داخل دو تگ <audio> و </audio> قرار می دهیم.

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

مثال بالا از یک فایل Ogg استفاده می کند که در فایرفاکس، اوپرا و کروم به درستی کار می کند. برای اینکه کاری کنیم که audio در اینترنت اکسپلورر و سافاری هم کار کند باید فایل صوتی با فرمت mp3 هم اضافه کنیم. عنصر audio به ما اجازه می دهد از چند تگ source استفاده کنیم. تگ source را می توان برای لینک کدن به فایل های صوتی متفاوت استفاده نمود. مرورگر اولین فرمتی را که شناسایی کند استفاره می کند.

 

تمام خواص تگ <audio>

Autoplay: در صورت وجود فایل صوتی به محض آماده شدن پخش می شود. مقداری که میگیرد: autoplay

Controls: دکمه های مختلف مثل play و ... را اضافه می کند. مقداری که میگیرد:controls

Loop: در صورت اتمام فایل صوتی دوباره از اول شروع به پخش می کند. مقداری که میگیرد: loop

Preload: کاری می کند که صدا در هنگام لود شدن صفحه آماده پخش شود. مقداری که میگیرد: perload

Src: آدرس قایلی که باید پخش شود. مقداری که میگیرد. مقداری که میگیرد: یک url


نوشته شده توسط : حسین (کیوان) جهانبخش آبکنار

نوع مطلب : HTML 5 ،طراحی وب ،