آگهی رایگان

آموزش تگ audio در HTML5

html5 audio

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

همانطور که گفتیم این تگ در ورژن پنجم از زبان html اضافه شده است و در ورژن های قبلی از این زبان وجود نداشت . خب برسیم به تگ audio در زبان html5 , همانطور که از نام این تگ پیداست کار این تگ اضافه کردن یک فایل صوتی یا بهتر است بگوییم یک آهنگ به صفحه سایتمان , البته از این تگ به منظور کار هایی دیگری هم استفاده می شود که بیشتر جنبه کاربر پسند دارد , مانند صدای آلرتی که هنگام دریافت یک پیغام یا یک ایمیل پخش می شود که حتما در آموزش های بعدی جاوااسکریپت به این موضوع می پردازیم . لازم به ذکر است که این تگ در مرورگر های IE ورژن ۹ به بالا , فایرفاکس , کروم , سافاری و اپرا پشتیبانی می شود . این تگ نیز مانند تگ 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 های فوق العاده این تگ ها می پردازیم .

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

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

 


دیدگاه ها برای آموزش تگ audio در HTML5

  • من امتحان کردم جواب داد
    و خیلی ممنون که این اموزش رو گزاشتید

    خرید دوربین مهر ۳, ۱۳۹۲ ۰۲:۴۲ پاسخ دادن
  • سپاس فراوان
    مطالب مفیدی بود
    لطفا بیشتر و بیشتر از این آموزش ها بگذارید

    مچکرم

    میترا فروردین ۶, ۱۳۹۴ ۱۰:۴۵ پاسخ دادن

با نظرات و پیشنهادات خود تمپ ها را همراهی کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *