بخش های اصلی

آموزش HTML 5

آموزش HTML 5 - کار با صدا (Audio)

راه های مختلفی برای پخش صدا در صفحه ی وب هست.

صدای تعبیه شده در سند HTML

گذاشتن صدا در صفحه ی وب زیاد راحت نیست چون مرورگرها برای تعریف فایل های چندرسانه ایِ تعبیه شده، استاندارد رسمی ای ندارن.

در این فصل تعدادی از راه های تعبیه کردن صدا را در صفحه های وب تان به شما نشان میدیم؛ از استفاده از یک لینک ساده گرفته تا استفاده از آخرین عنصر HTML5 <audio>.

استفاده از عنصرِ HTML5 audio

عنصر <audio> جدیدِ معرفی شده در HTML5 راهی استاندارد برای تعبیه صدا در صفحه های وب فراهم می کنه. به هر حال، عنصر audio نسبتاً جدیده، ولی در بیشتر مرورگرهای مدرن کار می کنه. مثال زیر به راحتی یک فایل صوتی را با استفاده از مجموعه کنترل هایِ پیش فرض مرورگر با یک منبع، در سند HTML5، جایگذاری می کنه.

مثال

<audio controls="controls" src="birds.mp3">
    Your browser does not support the HTML5 Audio element.
</audio>

فایل صوتی از مجموعه کنترل های پیش فرض مرورگر به همراه منبع جایگزین استفاده می کنه.

مثال

<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>

در مثال بالا، تِرَکِ (track) ‘ogg’، در Firefox، Opera و Chrome کار می کنه، در حالی که همان تِرَک جهت کار کردن با Internet Explorer و Safari به فرمت ‘mp3’ درآمده.

لینک کردنِ فایل های صوتی

می توانید به فایل های صوتی، لینک بزنین و با کلیک کردن روی فایل ها، آن ها را پخش کنین.

مثال

<a href="sea.mp3">Track 1</a>
<a href="wind.mp3">Track 2</a>

استفاده از عنصر object

عنصر <object> برای تعبیه کردن انواع مختلفی از فایل های رسانه ای در سند HTML استفاده میشه. قبلاً، از این عنصر برای اضافه کردن کنترل های ActiveX استفاده میشد، ولی بر اساس اعتبارنامه ها، یک شیء می تواند هر نوع شیء چندرسانه ای مثل ویدیو، صوت، اپلت های جاوا، ActivX، سند(HTML، PDF، Word و...)، انیمیشن های فلش یا حتی عکس باشه. مثال زیر در این رابطه ست:

مثال

<object data="sea.mp3" width="200px" height="50px"></object>
<object data="sea.ogg" width="200px" height="50px"></object>

اخطار: عنصر <object> بصورت گسترده پشتیبانی نمیشه و به نوع شی ای که تعبیه میشه خیلی بستگی داره. روش های دیگه مثل عنصر HTML5 <audio> یا Google MP3 Player در بسیاری از موارد می توانند انتخاب بهتری باشن.

استفاده از عنصر object

عنصر <embed> برای تعبیه کردن محتوای چند رسانه ای در سند HTML استفاده میشه.

قطعه کد زیر فایل صوتی را در صفحه وب تعبیه میکنه.

مثال

<embed src="wind.mp3" width="200px" height="50px">
<embed src="wind.ogg" width="200px" height="50px">

اخطار: عنصر <embed> در مرورگرهای امروزی به خوبی پشتیبانی میشه و بعنوان استانداردی در HTML5 تعریف شده، با این حال ممکن فایل صوتی شما به علت عدم پشتیبانی مرورگر از فرمت فایل یا موجود نبودن پلاگین، پخش نشه.

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

آخرین مقالات

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد