آموزش نحوه قرار دادن فایل های صوتی در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه قرار دادن فایل های صوتی در HTML با من همراه باشید.

آموزش نحوه قرار دادن فایل های صوتی در HTML

Free-Learn

فایل های صوتی در HTML

در بخش قبلی ما با چند رسانه ای ها در HTML و بطور کل با چند رسانه ای های صوتی و تصویری آشنا شدیم، که در صورت تمایل میتوانید این بخش را مشاهده نمایید.

حال در این بخش میخواهیم با نحوه قرار دادن فایل های صوتی (صدا،آهنگ و..) در یک صفحه ی وب و یا بطور کلی در HTML آشنا شویم، لطفا در ادامه و تا پایان با من همراه باشید.

اگر در جریان باشید میدانید که قبل از اینکه HTML5 روی کار بیاید ما برای قرار دادن یک فایل صوتی یا تصویری باید از نرم افزارهای جانبی (افزونه یا پلاگین ها) همانند فلش استفاده میکردیم ولی امروزه با وجود HTML5 کاره ما دیگه خیلی خیلی راحت شده.

دوستان محترم بهتر است بدانید که تنها ۳ فرمت MP3 و WAV و Ogg در HTML5 پشتیبانی می شوند، لذا شما برای قرار دادن یک آهنگ و.. درون یک صفحه وب باید فایل شما یکی از ۳ فرمت MP3 و WAV و Ogg را داشته باشد در غیراینصورت فایل شما برای کاربر پخش نخواهد شد.

Free-Learn

پشتیبانی مرورگرها از تگ <audio> در HTML5

در جدول زیر میتوانید مشاهده نمایید که انواع مرورگرهای اینترنتی به ترتیب از فرمت های MP3 و WAV و Ogg پشتیبانی می کنند یا خیر.

نام مرورگر MP3 Wav Ogg
Internet Explorer بله (پشتیبانی می شود) خیر (پشتیبانی نمی شود) خیر (پشتیبانی نمی شود)
Chrome بله (پشتیبانی می شود) بله (پشتیبانی می شود) بله (پشتیبانی می شود)
Firefox بله (پشتیبانی می شود) بله (پشتیبانی می شود) بله (پشتیبانی می شود)
Safari بله (پشتیبانی می شود) بله (پشتیبانی می شود) خیر (پشتیبانی نمی شود)
Opera بله (پشتیبانی می شود) بله (پشتیبانی می شود) بله (پشتیبانی می شود)

طبق جدول بالا همانطور که مشاهده مینمایید تنها فرمتی که توسط تمامی مرورگرها پشتیبانی می شود فرمت MP3 می باشد، لذا شما باید سعی کنید همیشه از فایل های صوتی با این فرمت استفاده نمایید.

Free-Learn

جدول نوع رسانه صوتی در HTML

فرمت فایل نوع رسانه
MP3 audio/mpeg
WAV audio/wav
Ogg audio/ogg

Free-Learn

نحوه قرار دادن فایل های صوتی در HTML

برای قرار دادن فایل های صوتی در یک صفحه ی وب و بطور کلی در HTML ما باید از تگ <audio> استفاده نماییم، لطفا به شکل کلی این تگ در HTML توجه نمایید.

برای مثال الان من یک آهنگ گذاشتم اینجا :

شکل کلی تگ <audio> بصورت زیر می باشد :

امتحان کنید

که با استفاده از صفت src ما باید آدرس دقیق فایل صوتی مان را مشخص نماییم و همچنین توسط صفت type باید مشخص شود که فایل صوتی ما از چه نوعی است (طبق جدول نوع رسانه صوتی در HTML).

Free-Learn

پیغام عدم پشتیبانی مرورگر از تگ <audio>

ما میتوانیم یک پیغام به دلخواه درون تگ <audio> قرار دهیم تا اگر مرورگر کاربر از تگ <audio> پشتیبانی نکرد آن پیغام نمایش داده شود و کاربر بداند که دلیل پخش نشدن صدا/آهنگ چه بوده است.

امتحان کنید

Free-Learn

پخش خودکار صدا در HTML

با استفاده از صفت autoplay درون تگ <audio> ، میتوان کاری کرد که صدا/آهنگ بطور خودکار به محض لود شدن صفحه پخش شود.

در مرورگرهای مدرن (آخرین نسخه های موزیلا فایرفاکس یا گوگل کروم) ممکن است از پخش خودکار صدا جلوگیری کنند، ولی خب شما میتونید خودتون تعیین کنید که آیا اجازه بده برای پخش خودکار یا خیر. (آموزش فعالسازی پخش خودکار در مرورگرها)


امتحان کنید

Free-Learn

تکرار پخش صدا در HTML

با قرار دادن صفت loop درون تگ <audio> میتوان حالت تکرار پخش یک آهنگ/صدا را فعال کرد و در اینصورت به محض اتمام آهنگ ،دوباره همان آهنگ بطور خودکار پخش خواهد شد.

امتحان کنید

Free-Learn

قطع صدای فایل صوتی در HTML

با قرار دادن صفت muted درون تگ <audio> میتوان بطور پیش فرض صدای آهنگ را قطع کرد، یعنی با کلیک بروی دکمه پخش هیچ صدایی از آهنگ پخش نخواهد شد بلکه باید بصورت دستی صدای آهنگ را تنظیم نمایید.

امتحان کنید

Free-Learn

غیرفعالسازی پیش بارگذاری صدا در HTML

اگر تا به الان متوجه شده باشید وقتی یک آهنگ/صدا درون یک صفحه ی وب قرار داشته باشد، فایل صدا همزمان با بارگذاری صفحه نیز بارگذاری می شود یعنی میشه گفت فایل آهنگ بطور خودکار با بارگذاری صفحه دانلود می شود.

حال برای اینکه این امکان را غیرفعال نماییم باید از مقدار none درون صفت preload استفاده نماییم.

اگر از صفت autoplay استفاده کرده باشید صفت preload دیگر عمل نخواهد کرد.


امتحان کنید

Free-Learn

  • خلاصه ی این بخش
  • تنها فرمت صوتی که توسط تمامی مرورگرها پشتیبانی می شود فرمت MP3 می باشد.
  • برای قرار دادن یک فایل صوتی (آهنگ،صدا و..) در یک صفحه ی وب باید از تگ <audio> استفاده کرد.
  • وجود صفت controls در درون تگ <audio> برای نمایش دکمه های پخش،تنظیم صدا و.. ضروری می باشد.
  • با استفاده از صفت autoplay میتوان قابلیت پخش خودکار یک آهنگ را فعال کرد.
  • با استفاده از صفت loop میتوان قابلیت تکرار شدن یا ریپیت آهنگ را فعال کرد.
  • برای قطع کردن صدای آهنگ درحالت پیش فرض باید از صفت muted درون تگ <audio> استفاده کرد.
  • دانلود PDF این آموزش
  • برای دانلود فایل PDF این آموزش کلیک نمایید