مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش چگونگی اضافه کردن یک فایل صوتی در html بپردازیم. در html 5 این امکان نیز وجو دارد که شما می توانید یک فایل صوتی با فرمت هایی که توسط html 5 پشتیبانی می شود را در صفحه وب خود اضافه کنید. html 5 از فایل های چند رسانه ای با فرمت های : .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi. پشتیبانی می کند. و فایل های صوتی نیز با فرمت های MP3, Wav, and Ogg پشتیبانی می شود.
در پست های آموزشی قبلی html، ما به آموزش مباحث چگونگی کار با تگ های Table , Div ، تگ img ، تعریف رنگ ها در html ، تعریف فرم ها در html همچنین آموزش چگونگی افزودن ویدئو در html پرداختیم. در ادامه این پست نیز به آموزش افزودن فایل صوتی در html خواهیم پرداخت.
fig4-2- فایل های صوتی در html
فایل صوتی در html
قبل از HTML5، یک فایل صوتی در html ، فقط می توانست در یک مرورگر با یک افزونه (مانند فلش) پخش شود. در html برای اضافه کردن فایل های صوتی به وب، از تگ <audio> استفاده می شود.
استفاده از تگ <audio>
در html تگ <audio> فایل های صوتی را در صفحه وب پخش می کند.
مثال:
مثال : فایل صوتی
| <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> |
ویژگی های تگ <audio>
ویژگی control در تگ <audio>، دکمه های کنترلی پخش فایل های صوتی نظیر : play, pause, and volume را اضافه می کند. تگ <source> به شما این امکان را می دهد که نام فایل صوتی و فرمت آن را برای مرورگر خود، مشخص کنید. در مرورگر هایی که از تگ <audio> پشتیبانی نمی کنند.مرورگر متن بین <audio>و..<audio/> را نمایش می دهد.
پشتیبانی مرورگرها از فایل های صوتی در HTML
در HTML5، ۳ فرمت صوتی فرمت های صوتی که پشتیبانی می شود شامل: MP3، WAV، و OGG می باشد.
پشتیبانی مرورگر برای فرمت های مختلف:
| مرورگر | MP3 | WAV | OGG |
|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
انواع فرمت های چندرسانه ای صوتی در HTML
| فرمت فایل | نوع رسانه |
|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
متد،خصوصیات و رویدادهای صوت در HTML
متدهای DOM در HTML5 ، خواص و حوادث را برای عنصر <audio> تعریف می کند.
این به شما اجازه می دهد بارهای، پخش و مکث صوت، و همچنین مدت زمان و حجم را تنظیم کنید.
همچنین رویدادهای DOM وجود دارد که می تواند هنگامی که یک صدا شروع به پخش می کند، متوقف شود و غیره به شما اطلاع دهد.
تگ های صوتی در HTML5
| تگ | توضیحات |
|---|
| <audio> | تعریف محتوای صوتی |
| <source> | منابع رسانه چندگانه را برای عناصر رسانه ای تعریف می کند، مانند <video> و <audio> |
کلام آخر
در جلسه قبل به بررسی سینتکس و نحوه ی افزودن فایل های ویدئویی در HTML پرداختیم، در کنار ویدئو در برخی موارد ممکن است به درج فایل های صوتی نیز نیاز پیدا کنید، که برای اینگونه موارد مباحث فایل صوتی در HTML را ارائه کردیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
