در جلسه قبلی آموزش HTML با تگ SVG در html برای رسم عناصر گرافیکی آشنا شدیم. در این بخش به پخش صدا در html خواهیم پرداخت.
راه های زیادی برای قرار دادن فایل صوتی در صفحه وب و پخش صدا در html وجود دارد.
قرار دادن فایل های صوتی در HTML
قرار دادن صدا در صفحه وب نسبتا ساده هم نیست. چراکه مرورگرها معمولا فرم استانداردی برای فایل های مدیا قرار داده شده ندارند.
در این بخش انواع راه های قرار دادن فایل صوتی در صفحه وب , از یک لینک ساده تا استفاده از تگ <audio> در HTML5 را نشان می دهیم.
پخش صدا با استفاده تگ audio در html5
تگ جدید <audio> در HTML5 یک راه استاندارد برای پخش صدا در html است. به هرحال, این المان نسبتا جدید است اما روی بیشتر مرورگرهای مدرن کار می کند.
مثال زیر بطور ساده نحوه قرار دادن و پخش صدا در html با تگ audio را به همراه خصوصیت controls را نشان می دهد (آدرس نسبی است.)
|
1 2 3 |
<audio controls="controls" src="birds.mp3"> Your browser does not support the HTML5 Audio element. </audio> |
یک فایل صوتی, با کنترل های پیش فرض و با چندین فایل منبع مختلف که فرمت مخنلفی دارند و اگر یکی پخش نشد دیگری اجرا می شود.
|
1 2 3 4 5 |
<audio controls="controls"> <source src="birds.mp3" type="audio/mpeg"> <source src="birds.ogg" type="audio/ogg"> Your browser does not support the HTML5 Audio element. </audio> |
ترک ‘ogg’ در فایرفاکس, اپرا و کروم کار می کند, در حالی که فرمت ‘mp3’ برای کار کردن و پخش صدا در اینترنت اکسپلورر و سافاری اضافه شده است.
لینک کردن فایل های صدا (Audio)
شما می توانید فایل های صدا را لینک و با کلیک روی آنها و باز کردن آدرس کامل در مرورگر اجرا کنید.
|
1 2 |
<a href="sea.mp3">Track 1</a> <a href="wind.mp3">Track 2</a> |
استفاده از تگ object
تگ <object> برای قرار دادن انواع مختلف فایل های مدیا در سند HTML استفاده می شود.
این المان از کنترل های ActiveX استفاده می کرد, اما با توجه به مشخصات, یک آبجکت می تواند هر نوع آبجکت رسانه ای مثل ویدیو, صدا, اپلت جاوا, اکتیوX , سند (HTML, PDF, Word و ..), انیمیشن فلش یا حتی تصاویر باشد.
|
1 2 |
<object data="sea.mp3" width="200px" height="50px"></object> <object data="sea.ogg" width="200px" height="50px"></object> |
توجه: المان <object> بطور گسترده پشتیبانی نمی شود و بستگی به نوع آبجکتی که قرار دادید, دارد. بقیه روش ها مثل تگ <audio> در HTML5 یا پلیر Google MP3 می تواند در بیشتر موارد گزینه بهتری باشد.
استفاده از تگ embed
المان <embed> برای قرار دادن محتوای مالتی مدیا داخل سند HTML کاربرد دارد. مثلا فایل تصویری.
|
1 2 |
<embed src="wind.mp3" width="200px" height="50px"> <embed src="wind.ogg" width="200px" height="50px"> |
توجه: تگ <embed> در حال حاضر به خوبی توسط مرورگرها پشتیبانی می شود و به عنوان استاندارد در HTML5 تعریف شده است, اما فایل های صدا احتمالا به دلیل فرمت فایل ها که توسط مروگر پشتیبانی نمی شود یا نبودن پلاگین های آن به خوبی اجرا نشود.
امیدوارم در این بخش آموزش HTML , از پخش صدا در html نهایت استفاده را برده باشید.
در بخش بعدی با قرار دادن ویدیو در صفحه وب آشنا می شویم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
