وبلاگ

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

الف) فایل‌های صوتی (صدا)

ابتدا در پوشه projects، یک فایل project2.html بسازید. در کنار این فایل یک پوشه به نام musics ساخته و یک فایل صوتی مانند آهنگ را درون آن کپی کنید. به عنوان مثال فایل ebi.mp3. اکنون داخل فایل project2.html شده و با استفاده از تگ audio آن فایل را فراخوانی نمایید.

برای تعریف یک تگ audio کد زیر را درون تگ body صفحه وب خود کپی کنید.

<audio></audio>

فایل را ذخیره و با مرورگر باز کنید. همانگونه که مشاهده می‌کنید هیچ عملکردی مشاهده نمی‌شود.

اکنون نوبت آن است که صفت‌های اختصاصی تگ audio را در آن تعریف کنید. فایل project2.html را باز کرده و این صفت‌ها را به آن اضافه کنید :

صفت src

این صفت مانند src در تگ img فایل مورد نظر را فراخوانی می‌کند. لذا باید آدرس و نام دقیق فایل صوتی قید شود. (برای مطالعه تگ img اینجا را کلیک کنید)

<audio src="musics/ebi.mp3"></audio>

اما وجود این صفت نیز کارایی خاصی ایجاد نمی‌کند.

صفت controls

این صفت برای نمایش دکمه‌های Play [Pause]، Mute و Volume و … در پخش فایل صوتی به کار می‌رود و یک صفت بدون مقدار است.

<audio src="musics/ebi.mp3" controls></audio>

الان، بنا به مرورگری که دارید، می‌توانید یک Player را در صفحه وب خود مشاهده نمایید.

صفت muted

این صفت تعیین می‌کند که فایل صوتی مربوطه به صورت پیش‌فرض بی‌صدا پخش شود. این صفت نیز بدون مقدار است.

صفت autoplay

قرار گرفتن این صفت بدون مقدار، باعث پخش خودکار فایل صوتی می‌شود.

پس تگ audio ما به شکل زیر کامل شد :

<audio src="musics/ebi.mp3" controls autoplay muted></audio>

نکته : نحوه عمل صفت‌هایی مانند muted و autoplay بستگی به مرورگر شما و نسخه‌های مختلف آن دارد. مثلا در مرورگرهای خانواده Chromium، صفت autoplay مجوز عمل ندارد.

صفت source درون تگ audio

در تعریف تگ audio بالا تمامی صفت‌ها از جمله src درون یک تگ تعریف می‌شدند. اما اگر بخواهیم می‌توانیم این تگ را طور دیگری به صورت حرفه‌ای‌تر و پیشرفته‌تر تنظیم کنیم. فرض کنید از فایل‌های صوتی خاصی استفاده می‌کنید که ممکن است توسط برخی از مرورگرها پشتیبانی نشوند. در این صورت روش بالا کارایی چندانی نخواهد داشت و فایل صوتی پخش نمی‌شود. پس باید نسخه‌هایی از انواع فایل صوتی که می‌خواهیم اجرا شود داشته باشیم تا هر کدام قابلیت پخش نداشت، نسخه دیگری بررسی و اجرا شود.

برای این کار، صفت src را از تگ audio حذف کرده و به جای آن از چند تگ source استفاده می‌کنیم. داریم :

<audio controls autoplay muted>
  <source src="musics/ebi.mp3" type="audio/mpeg" />
  <source src="musics/ebi.wav" type="audio/wav" />
  <source src="musics/ebi.ogg" type="audio/ogg" />
  مرورگر نمی‌تواند این فایل را پشتیبانی کند!
</audio>

همانگونه که در قطعه کد بالا می‌بینید، زیر آخرین تگ source پیامی درج می‌کنیم تا اگر هیچ یک از انواع فایل‌ها توسط مرورگر پشتیبانی نشد، یک متن خطا ظاهر نماید. هر چند خیلی کم با چنین خطایی مواجه خواهیم شد.

در زیر قابلیت مرورگرها در پخش و اجرای انواع فایل‌های صوتی قابل مشاهده است :

نکته : بهترین فرمت فایل‌های صوتی، از نوع mp3 می‌باشد که قابل پخش توسط تمامی مرورگرهای استاندارد است.

ب) فایل‌های تصویری (ویدئو)

هر دو نوع بارگذاری و پخش فایل‌های صوت و تصویر مشابه هم هستند. با این تفاوت که برای پخش ویدئو، به جای تگ audio از تگ video استفاده می‌کنیم. این تگ علاوه بر صفت‌های controls، autoplay و muted دارای دو صفت width برای عرض کادر ویدئو و صفت height برای ارتفاع کادر ویدئو است.

این دو صفت دقیقا مانند صفت‌های width و height تگ img می‌توانند ثابت (بر مبنای پیکسل) و یا نسبی (بر مبنای درصد) بیان شوند.

مانند تگ img، بهتر است برای حفظ نسبت عرض و ارتفاع ویدئو، فقط صفت width مقداردهی شود و صفت height تعریف نگردد.

<video controls autoplay muted width="100%">
  <source src="films/ebi.mp4" type="video/mp4" />
  <source src="films/ebi.webm" type="video/webm" />
  <source src="films/ebi.ogg" type="video/ogg" />
  مرورگر نمی‌تواند این فایل را پشتیبانی کند!
</video>