صداها و فایل‌های صوتی در وب
برای جاسازی محتوای صوتی در صفحات وب، از یک عنصر HTML با نام audio استفاده می‌شود. این
عنصر می‌تواند شامل یک یا چند منبع صدا باشد که با استفاده از صفت src یا عنصر source مشخص
می‌شوند. اگر بیش از یک منبع صدا را برای یک عنصر audio تعیین کرده باشیم، مرورگر بهترین
گزینه را انتخاب می‌کند.
در مثال زیر، یک عنصر audio درون یک عنصر figure ایجاد شده و منبع صدا
برای این عنصر با
استفاده از صفت src مشخص شده است. همچنین، یک صفت بولین مربوط به عنصر audio با نام
controls نیز به کار گرفته شده که موجب نمایش دکمه‌های کنترلی مانند play/pause می‌شود.
HTML
<figure>
<figcaption>Listen to new simple happy birthday</figcaption>
<audio src="multimedia/happy-birthday.mp3" controls>
Your browser doesn't support
the <code>audio</code> element.
</audio>
</figure>
همانطور که می‌بینید، در این مثال متنی نیز درون عنصر audio قرار داده شده است. به طور کلی
محتوای عنصر audio تنها برای کاربرانی نمایش داده می‌شود که مرورگر آنها از عنصر audio
پشتیبانی نمی‌کند. بنابراین، می‌توانیم همانند مثال بالا متن مناسبی که عدم پشتیبانی مرورگر
کاربر از عنصر audio را نشان دهد، درون عنصر audio قرار دهیم.
اما از آنجایی که همه‌ی مرورگرها از فرمت‌ها و کدک‌های صوتی یکسانی پشتیبانی نمی‌کنند،
می‌توانیم همانند مثال زیر به جای صفت src از تعدادی عنصر source
استفاده کنیم که هر کدم از
آنها حاوی یک ورژنِ دارای یک فرمت مشخص از فایل صوتی باشد. در ضمن، این بار درون عنصر audio
لینکی به فایل مورد نظر قرار داده‌ایم تا کاربرانی که مرورگرشان قادر به پشتیبانی از عنصر
audio نیست، بتوانند از طریق این لینک به فایل صوتی مورد نظر دسترسی داشته باشند.
HTML
<audio controls>
<source src="multimedia/happy-birthday.mp3" type="audio/mpeg">
<source src="multimedia/happy-birthday.ogg" type="audio/ogg">
<p>
Your browser doesn't support
audio element. You can <a href="multimedia/happy-birthday.mp3">Download audio</a> instead.
</p>
</audio>
عنصر audio علاوه بر صفت‌های عمومی، دارای تعدادی صفت اختصاصی نیز هست که در ادامه، این
صفت‌ها را بررسی کرده و مثال‌هایی از آنها ارائه می‌دهیم.
تعیین آدرس فایل صوتی با صفت src
همانطور که قبلاً هم گفتیم، صفت src آدرس url یک فایل صوتی را به عنوان مقدار دریافت
می‌کند. البته استفاده از این صفت اختیاری است و به جای آن می‌توانیم از عنصر source به
عنوان عنصر فرزند audio استفاده کنیم.
نمایش دکمه‌های کنترلی پلیر با صفت controls
صفت controls را نیز در مثال‌های بالا دیدیم و گفتیم که یک صفت بولین است که با نمایش
دکمه‌هایی نظیر play/pause و volume به کاربر امکان می‌دهد که روی فرایند پخش صدا کنترل
داشته باشد.
پخش خودکار فایل صوتی با صفت autoplay
صفت autoplay یک صفت بولین است که استفاده از آن باعث می‌شود که فایل صوتی به محض آماده شدن
برای پخش و بدون منتظر ماندن برای تکمیل فرایند دانلود کل فایل و پخش توسط کاربر، شروع به
پخش کند. البته باید بدانید که پخش خودکار یک فایل صوتی، برای کاربران سایت تجربه‌ی
خوشایندی به همراه ندارد و باید حتی‌الامکان از این کار اجتناب کنید. با این حال، در کد زیر
مثالی از این صفت می‌بینید.
HTML
<audio autoplay controls>
<source src="multimedia/happy-birthday.mp3" type="audio/mpeg">
Your browser doesn't support the audio element.
</audio>
تکرار پخش فایل صوتی با صفت loop
loop نیز یک صفت بولین دیگر از عنصر audio است که استفاده از آن باعث
تکرار فرایند پخش فایل
صوتی مورد نظر می‌شود. کد زیر مثالی از این صفت بولین ارائه می‌دهد.
HTML
<audio loop controls>
<source src="multimedia/happy-birthday.mp3" type="audio/mpeg">
Your browser doesn't support the audio element.
</audio>
پخش فایل صوتی به صورت بیصدا با صفت muted
استفاده از صفت بولین muted موجب می‌شود که فایل صوتی در بدو کار به صورت بیصدا پخش شود.
البته در صورت وجود صفت controls کاربر می‌تواند هر زمان که مایل باشد، حالت بیصدا را
غیرفعال کند. مثال زیر را ببینید.
HTML
<audio muted controls>
<source src="multimedia/happy-birthday.mp3" type="audio/mpeg">
Your browser doesn't support the audio element.
</audio>
تعیین نحوه بارگذاری فایل صوتی با صفت preload
با استفاده از صفت preload می‌توانیم به مرورگر اعلام کنیم که بهتر است هنگام بارگذاری
محتوای صفحه، فایل صوتی مورد اشاره‌ی عنصر audio را دانلود کند یا اینکه این کار را تا زمان
پخش فایل توسط کاربر به تعویق اندازد. البته هدف صفت preload فقط این است که به ما امکان
دهد که نظرمان را در مورد نحوه‌ی بارگذاری فایل صوتی به مرورگر اعلام کنیم. مطابق مستندات
HTML مرورگرها ملزم به به‌کارگیری مقداری که برای این صفت تعیین می‌کنیم، نیستند. اما با
این حال، می‌توانیم روشی را که از نظر ما منجر به بهترین تجربه‌ی کاربری می‌شود، به مرورگر
اعلام کنیم. این صفت می‌تواند یکی از مقادیر زیر را دریافت کند:
-
none: نیازی به بارگذاری زودهنگام و قبل از نیاز (preload) فایل صوتی نیست.
-
metadata: تنها اطلاعات متادیتای مربوط به فایل مانند مدت زمان فایل و مواردی از
این قبیل، زودتر از موعد بارگذاری شود.
-
auto: فارغ از اینکه کاربر بخواهد فایل را پخش کند یا خیر، کل فایل دانلود شود.
تخصیص یک رشته‌ی خالی به صفت preload نیز معادل همین مقدار است.
توجه داشته باشید که صفت autoplay نسبت به preload دارای اولویت است.
اگر صفت autoplay به
کار گرفته شده باشد، طبیعتاً فایل باید در سریع‌ترین زمان ممکن دانلود شود تا امکان پخش
حودکار آن وجود داشته باشد. به عبارت دیگر، در صورت استفاده از صفت autoplay مرورگر اقدام
به بارگیری فایل مورد نظر می‌کند و استفاده از صفت preload دیگر معنایی ندارد.
فیلم‌ها و فایل‌های ویدیویی در وب
برای قرار دادن یا جاسازی یک ویدیو در صفحات وب، می‌توانیم از عنصر video استفاده کنیم. کار
با این عنصر شباهت زیادی به عنصر audio دارد. براي قرار دادن یک ویدیو در صفحه باید از
عناصر source درون عنصر video استفاده کنیم.
HTML
<video width="250" controls>
<source src="multimedia/walking.webm" type="video/webm">
<source src="multimedia/walking.mp4" type="video/mp4">
Your browser doesn't support video element.
</video>
کد بالا شامل یک مثال ساده از عنصر video است اما همانند آنچه در مورد عنصر audio نیز
دیدیم، صفت‌های دیگری برای عنصر video در دسترس و قابل تنظیم است که از طریق آنها می‌توانیم
مواردی مانند ابعاد باکس player، نمایش یا عدم نمایش دکمه‌های کنترلی، تعداد دفعات پخش
ویدیو و موارد دیگر را تعیین کنیم.
صفت‌های src، controls، muted، loop، autoplay و
preload و نقش آنها را هنگام بررسی عنصر audio دیدیم و در اینجا از
تکرار بی‌مورد آنها خودداری می‌کنیم. اما عنصر video
صفت‌های دیگری هم دارد که در ادامه آنها را معرفی می‌کنیم.
پیشنهاد به مرورگر در مورد کنترل‌ها با صفت controlslist
وقتی از صفت controls استفاده می‌کنیم، مرورگرها لیستی از کنترل‌های مورد نظرشان را نمایش
می‌دهند و کاربر می‌تواند از آنها استفاده کند. اما صفت controlslist به ما امکان می‌دهد که
به مرورگر در مورد تصمیم‌گیری در مورد این کنترل‌ها کمک کنیم. البته صفت controlslist یک
صفت جدید است که در فاز آزمایشی (experimental) قرار دارد و در حال حاضر، یک مکانیسم
blocklist را پیاده‌سازی می‌کند که با دریافت هر یک از مقادیر زیر، نمایش یک کنترل مربوط به
آن مقدار را منتفی می‌کند:
-
nofullscreen: با استفاده از این مقدار، به مرورگر پیشنهاد داده می‌شود که قید نمایش
کنترل fullscreen را که باعث نمایش ویدیو به صورت تمام‌صفحه می‌شود، بزند.
-
nodownload: با استفاده از این مقدار، به مرورگر پیشنهاد داده می‌شود که از نمایش
کنترل download برای کاربر جلوگیری شود.
اما در مورد صفت controlslist باید به چند نکته توجه داشته باشید: اول اینکه، در صورت
تمایل، می‌توانیم برای این صفت از بیش از یک مقدار استفاده کنیم که در این صورت، مقادیر
را باید با فاصله از هم جدا کنیم. نکته‌ی دوم اینکه، اگر دقت کرده باشید ما از لفظ
پیشنهاد برای مقادیر این صفت استفاده کردیم و دلیل این امر آن است که مرورگر می‌تواند
مقداری را که برای این صفت وارد کرده‌ایم، بپذیرد یا اینکه آن را رد کند. برای نمونه،
یک مرورگر موبایل ممکن است با توجه به کوچک بودن نمایشگرش، مقدار nofullscreen را از
شما نپذیرد و کنترل fullscreen را نمایش دهد.
HTML
<video controls src="demo.webm" controlslist="nofullscreen nodownload">
Your browser doesn't support video element.
</video>
نمایش پوستر ویدیو با صفت poster
با استفاده از صفت poster می‌توانیم تصویری را به مرورگر معرفی کنیم تا هنگامی که ویدیو در
حال بارگذاری است، آن را نمایش دهد. با این حساب، مقداری که این صفت می‌تواند دریافت کند،
آدرس url مربوط به یک نصویر است. اگر از این صفت استفاده نکنیم، تا قبل از آماده شدن نخستین
فریم ویدیو، چیزی نمایش داده نمی شود و پس از آن، این فریم ابتدایی به عنوان فریم پوستر
نشان داده می‌شود.
HTML
<video width="320" height="240" poster="poster.png" controls>
<source src="walking.mp4" type="video/mp4">
</video>
افزودن زیرنویس به عناصر مالتی‌مدیا
برای عناصر مدیا یعنی video و audio امکان استفاده از یک عنصر فرزند با
نام track وجود
دارد. کاربرد این عنصر، افزودن ترک‌های متنی زمان‌بندی شده از قبیل caption و زیرنویس است.
فرمت این فایل های متنی باید Web VTT (.vtt) باشد که اختصاری است برای Web Video Text
Format.
HTML
<video width="320" height="240" controls>
<source src="walking.mp4" type="video/mp4">
<track src="subtitle-en.vtt" srclang="en">
</video>
این عنصر دارای چند صفت است که در اینجا از آنها نام می‌بریم:
-
src: این صفت، یک آدرس url را که به فایل متنی مورد نظر اشاره می‌کند، به عنوان
مقدار دریافت می‌کند.
-
srclang: این صفت مشخص‌کننده‌ی زبان به کار رفته در فایل متنی مورد نظر است.
-
default: از این صفت برای انتخاب track متنی پیش‌فرض استفاده می‌شود.
-
kind: این صفت مشخص‌کننده‌ی نوع کاربری track متنی مورد نظر است که می‌تواند
زیرنویس،
caption یا گزینه‌های دیگر باشد.
-
label: از این صفت برای تعیین عنوان track متنی استفاده می‌شود.
اما اجازه دهید هر یک از این صفت‌ها را یه صورت جداگانه و با ارائه‌ی جزئیات بیشتر بررسی
کنیم.
تعیین آدرس و زبان زیرنویس با صفت‌های src و srclang
صفت src مطابق انتظار، مشخص‌کننده‌ی فایل متنی مورد نظر است و بنابراین، یک url را به عنوان
مقدار دریافت می‌کند. صفت srclang نیز همانطور که از نامش پیداست، برای اعلام زبان فایل
متنی مورد اشاره کاربرد دارد. در مثال بالا نحوه‌ی استفاده از این دو عنصر را دیدیم.
تعیین track متنی پیش فرض با صفت default
وقتی بیش از یک عنصر track را درون یک عنصر مدیا مانند video قرار داده
باشیم، کاربر
می‌تواند هنگام پخش ویدیو یک track را انتخاب کند. اما به هر حال، باید یکی از این ترک‌ها
در حالت پیش‌فرض فعال باشد و صفت default با همین هدف یعنی تعیین track پیش‌فرض تعریف شده
است. صفت default یک صفت بولین است که باید برای هر عنصر track که
مایلیم ترک پیش‌فرض باشد،
به کار رود. مثال زیر را ببینید.
HTML
<video width="320" height="240" controls>
<source src="walking.mp4" type="video/mp4">
<track src="subtitle-en.vtt" srclang="en" default>
<track src="subtitle-fa.vtt" srclang="fa">
</video>
تعیین عنوان track متنی با صفت label
از صفت label برای تعیین برچسب یا عنوان ترک‌های متنی استفاده می‌شود. این عنوان در لیست
ترک‌هایی که مرورگر برای کاربر نمایش می‌دهد، استفاده می‌شود.
HTML
<video width="320" height="240" controls>
<source src="walking.mp4" type="video/mp4">
<track src="subtitle-en.vtt" srclang="en" label="English" default>
<track src="subtitle-fa.vtt" srclang="fa" label="Persian">
</video>
تعیین نوع track متنی با صفت kind
با استفاده از صفت kind می‌توانیم نوع ترک متنی را مشخص کنیم. منظور از نوع یک ترک متنی
کاربری یا مورد استفاده‌ی آن است که با یکی از مقادیر زیر قابل تعیین است:
-
subtitles: این مقدار زمانی استفاده می‌شود که هدف ما از استفاده از ترک متنی مورد
نظر، ارائه‌ی یک ترجمه از محتوایی باشد که ممکن است برای کاربر قابل درک نباشد. برای
نمونه، متن یا دیالوگی از فیلم که به زبان دیگری به جز زبان اصلی فیلم باشد. همچنین،
این مقدار برای مواردی که ترک متنی شامل اطلاعات اضافی و پس‌زمینه‌ای در مورد محتواست،
مناسب است. برای مثال، می‌توانیم به متن ابتدای فیلم‌های جنگ ستارگان اشاره کنیم و یا
متنی که نشان‌دهنده‌ی تاریخ، زمان یا لوکیشن در یک پلان از یک فیلم است.
-
captions: این مقدار را زمانی به صفت kind اختصاص می‌دهیم که فایل متنی مورد نظر حاوی
یک آوانویسی یا احیاناً یک ترجمه برای صدای فیلم باشد. همچنین، این مقدار می‌تواند برای
مواردی که ترک متنی مورد نظر شامل اطلاعات مهم غیرکلامی مانند افکت‌های صوتی یا
ردیف‌های موسیقی است، به کار رود.
-
metadata: این مقدار برای ترک‌های متنی که توسط اسکریپت‌ها مورد استفاده قرار
می‌گیرند و برای کاربر قابل مشاهده نیستند، مناسب است.