Audio در HTML5
یکی دیگه از ویژگیهای خوبی که به همراه html5 وارد دنیای وب شد، تگ audio بود. از این تگ به عنوان جایگزینی برای تگهای object و embed استفاده میشود. همراه ما باشید تا نحوهی استفاده از این تگ آشنا شویم.
برای شروع جدول پشتیبانی مرورگرها از تگ audio رو که سایت w3schools آماده کرده نگاه کنید. طبق این جدول در تمام مرورگرهای معروف موجود میتوان بدون نگرانی از این تگ استفاده کرد.
جدول بعدی از سایت caniuse گرفته شده و طبق اون به غیر از opera mini، بقیه مرورگرها در ورژنهای پرکاربردترشون این تگ رو ساپورت میکنن.
حالا نوبت به استفاده از این تگ میرسه. ساده ترین حالت استفاده از تگ audio به شکل زیر است:
<audio src="<source>" controls> </audio>
با استفاده از صفت src محل قرارگیری audio را مشخص میکنیم و با استفاده از صفت controls به مرورگر میگوییم که کنترلهای پیش فرضی که برای این تگ در نظر گرفته را نمایش دهد(play, volume, …).
کد زیر، کار کد بالا رو انجام میده با این تفاوت که زمینه رو برای انعطافپذیرتر شدن این تگ فراهم میکنه که در چند خط جلوتر دلیلش رو میفهمیم.
<audio controls> <source src="<source>" type="audio/mpeg"> </audio>
در تگ audio تگی به نام source ایجاد کردیم که بهوسیلهی اون محل قرارگیری audio رو مشخص میکنیم. با استفاده از صفت type هم میتوان فرمت پخش رو مشخص کرد. تگ source به جای صفت src به کار برده میشود.
برای انعطافپذیرتر شدن کدمون، میتونیم چندین تگ source اضافه کنیم که هرکدوم مربوط به فرمت خاصی باشن. برای مثال کد زیر رو نگاه کنید:
<audio controls> <source src="audio1.mp3" type="audio/mpeg"> <source src="audio1.ogg" type="audio/ogg"> </audio>
اتفاقی که در این حالت میفته اینه که مرورگر اولین فرمتی رو که بتونه ساپورت کنه، اجرا میکنه و بقیه تگها رو نادیده میگیره. جدول زیر نحوهی ساپورت مرورگرها از هرکدوم از فرمتها رو مشخص کرده:
جدول بعدی مربوط به تگ type برای هرکدوم از فرمت ها هست:
قسمت بعدی که میتونید به کدتون اضافه کنید، نوشته ای هست که در صورت ساپورت نکردن مرورگر از تگ audio نمایش داده میشه. برای اینکار بعد از تمام تگهای source متن مورد نظرتون رو بنویسید.
<audio controls> <source src="audio1.mp3" type="audio/mpeg"> <source src="audio1.ogg" type="audio/ogg"> Your Browser does not support audio tag </audio>
در زیر به چند ویژگی کاربردی دیگه از تگ audio اشاره میکنیم:
- با استفاده از صفت preload میتونیم مشخص کنیم که audio در هنگام لود شدن صفحه دانلود بشه یا نه. مقدار پیشفرضاین صفت برابر auto هست که یعنی در همان ابتدا دانلود شود. مقدار دیگری که برای این تگ میتوان استفاده کرد none و metadata هست.
- با استفاده از جاوااسکریپت هم میتونید audio رو کنترل کنید. برای این کار موارد زیادی در اختیار شما قرار داده شده که میتونید در w3schools ببینید. به عنوان مثال کد زیر رو نگاه کنید:
var audio = document.getElementById('myaudio'); function audio_play() { audio.play(); } function audio_pause() { audio.pause(); }
دو تابع تعریف کردیم که وظیفه یکی play کردن و دیگری pause کردن audio رو برعهده داره. تنها کاری که باید انجام داد گذاشتن این دو تابع به عنوان onclick دکمه مورد نظر است.
برای استفاده از مرجع کامل کارهایی که میتونید با تگ audio انجام بدید کافیه عبارت html5 audio tag رو در گوگل جستجو کنید.
مطالب زیر را حتما مطالعه کنید
5 ترفند css3 با عناصر کاذب before:: و after::
آشنایی با Protobuf
7 ویژگی Sass به همراه کد
شروع کار با Sass
آشنایی با برنامه نویسی Back-End
همه چیز درباره HTTP 2
2 Comments
Join the discussion and tell us your opinion.
دیدگاهتان را بنویسید لغو پاسخ
برای نوشتن دیدگاه باید وارد بشوید.
mamnon az maghale khobton
montazer mavared karbordi donyay web dar zerotohero hastam
ممنون از همراهیتون،
اگه موضوعی هم برای مقاله مدنظرتون هست خوشحال میشم درمیون بذارید