با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش چگونگی اضافه کردن یک فایل صوتی در 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 خواهیم پرداخت.
قبل از HTML5، یک فایل صوتی در html ، فقط می توانست در یک مرورگر با یک افزونه (مانند فلش) پخش شود. در html برای اضافه کردن فایل های صوتی به وب، از تگ <audio> استفاده می شود.
در html تگ <audio> فایل های صوتی را در صفحه وب پخش می کند.
مثال:
1 2 3 4 5 | <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> |
ویژگی control در تگ <audio>، دکمه های کنترلی پخش فایل های صوتی نظیر : play, pause, and volume را اضافه می کند. تگ <source> به شما این امکان را می دهد که نام فایل صوتی و فرمت آن را برای مرورگر خود، مشخص کنید. در مرورگر هایی که از تگ <audio> پشتیبانی نمی کنند.مرورگر متن بین <audio>و..<audio/> را نمایش می دهد.
در 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 |
فرمت فایل | نوع رسانه |
---|---|
MP3 | audio/mpeg |
OGG | audio/ogg |
WAV | audio/wav |
متدهای DOM در HTML5 ، خواص و حوادث را برای عنصر <audio> تعریف می کند.
این به شما اجازه می دهد بارهای، پخش و مکث صوت، و همچنین مدت زمان و حجم را تنظیم کنید.
همچنین رویدادهای DOM وجود دارد که می تواند هنگامی که یک صدا شروع به پخش می کند، متوقف شود و غیره به شما اطلاع دهد.
تگ | توضیحات |
---|---|
<audio> | تعریف محتوای صوتی |
<source> | منابع رسانه چندگانه را برای عناصر رسانه ای تعریف می کند، مانند <video> و <audio> |
در جلسه قبل به بررسی سینتکس و نحوه ی افزودن فایل های ویدئویی در HTML پرداختیم، در کنار ویدئو در برخی موارد ممکن است به درج فایل های صوتی نیز نیاز پیدا کنید، که برای اینگونه موارد مباحث فایل صوتی در HTML را ارائه کردیم.