آموزش تگ audio در HTML5

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

همانطور که گفتیم این تگ در ورژن پنجم از زبان html اضافه شده است و در ورژن های قبلی از این زبان وجود نداشت . خب برسیم به تگ audio در زبان html5 , همانطور که از نام این تگ پیداست کار این تگ اضافه کردن یک فایل صوتی یا بهتر است بگوییم یک آهنگ به صفحه سایتمان , البته از این تگ به منظور کار هایی دیگری هم استفاده می شود که بیشتر جنبه کاربر پسند دارد , مانند صدای آلرتی که هنگام دریافت یک پیغام یا یک ایمیل پخش می شود که حتما در آموزش های بعدی جاوااسکریپت به این موضوع می پردازیم . لازم به ذکر است که این تگ در مرورگر های IE ورژن 9 به بالا , فایرفاکس , کروم , سافاری و اپرا پشتیبانی می شود . این تگ نیز مانند تگ video در زبان html5 فایلی که می خواهد پخش شود باید در مرورگر مربوطه پشتیبانی شود , که معمولا فرمت این فایل های صوتی MP3,Ogg,Wavمیباشد , جدول زیر نحوه پشتیبانی مرورگر ها از این فایل های صوتی را شرح می دهد .

 

Browser	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	NO	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	NO	YES	YES

و اما ساختار دستوری این تگ بسیار شبیه تگ video که قبل تر در مورد آن صحبت کردیم می باشد :

[html]

< audio controls autoplay>
<source src=”sound.ogg” type=”audio/ogg”>
<source src=”sound.mp3″ type=”audio/mpeg”>
</audio>

[/html]

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

تگ source نیز درون تگ audio به انتخاب فایل های صوتی می پردازد همانطور که قبل تر گفتیم ما اگر بخواهیم کلیه مرورگر ها از این فایل صوتی در سایت ما پشتیبانی کنند مجبور به اضافه کردن آن فایل صوتی به فرمت های ذکر شده هستیم

صفت src درون تگ های source نشان دهنده آدرس فایل صوتی مورد نظر می باشد و صفت type نیز در این تگ نشان دهنده نوع آن فایل صوتی می باشد که به صورت کامل در جدول زیر ذکر شده است :

Format	type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

و اما در آخر هم خاصیت autoplay که همانطور که از نامش پیداست به معنی پخش خودکار فایل صوتی در صفحه می باشد

تا این جا ما با تگ های audio و video در html5 آشنا شدیم اما این تگ ها معمولا به صورت سفارشی با زبان جاوااسکریپت ترکیب می شوند و یک پلیر یا پخش کننده بسیار خوب را می سازند که ما حتما در سری آموزش های javascript و jquery به نحوه سفارشی کردن این تگ ها و option ها و api های فوق العاده این تگ ها می پردازیم .

خب به این ترتیب به پایان یکی دیگر از سری آموزش های دوران طراحی وب رسیدیم . امیدوارم از این آموزش لذت کافی را ببرید .

موفق پیروز و سربلند باشید