آشنایی با تگ audio و video در HTML

آموزش صدا و تصویر در HTML

چگونه می‌توانیم در HTML5 از صدا و تصویر استفاده کنیم ؟ منظور از تگ audio چیست؟ و چطور از آن استفاده کنم؟

منظور از تگ video چیست؟ و چگونه از آن تگ؟ در ادامه مقاله قصد داریم

آموزش تگ Video در HTML و تگ audio در HTML را به شما عزیزان در سایت فرازنتورک بدهیم. همراه ما باشید.

صدا و تصویر در HTML

در مقاله های گذشته در رابطه با رسانه در HTML و همچنین تگ های جدید HTML5 صحبت کردیم

و متوجه شدیم که  دو تگ جدید به نام های audio و video به HTML اضافه شده است.

با استفاده از این تگ ها می‌توانیم صدا و تصویر را درون صفحاتمان ایجاد کنیم.

چرا تگ audio و video

قبل از HTML5 ، برای معرفی کردن صدا و تصویر به صفحات HTML از تگی به نام object استفاده می‌شد

و این مورد باعث می‌شد که شما نتوانید خیلی شخصی سازی خوبی برای اجرا کننده های صدا و اجرا کنندگان ویدئو ها ایجاد کنید.

در نسخه پنجم HTML دو تگ audio و video معرفی شدند که در ادامه این مقاله از سری مقالات آموزش HTMLبه آن می‌پردازیم.

تگ Audio

تگ audio برای قرار گیری صدا، موسیقی و پادکست در صفحه HTML مورد استفاده قرار می‌گیرد.

مخصوصا در این برهه زمانی استفاده از ویس و صوت در وبسایت ها بسیار رواج پیدا کرده است.

این تگ پرکاربرد HTMLاز ۳ فرمت رایج فایل صوتی پشتیبانی می‌کند که آن‌ها عبارتند از : MP3 ، Wav و OGG

دو نکته:
یک) اگر فرمت ویس یا صوت شما غیر از موارد بالا هست نگران نباشید،

شما می‌توانید به کمک نرم افزار آنلاین audio.online-convert.com به راحتی با اپلود ویس خود آن را به فرمت‌های رایج بالا تبدیل کنید.
دو) شما اگر از پیام رسان واتس آپ استفاده می‌کنید، این پیام رسان ویس‌های خود را با فرمت OGG ذخیره می‌کند،

بنابراین دوستانی که قصد دارند به کمک این پیام رسان فایل‌های صوتی خود را در سایت آپلود کنند

امکان استفاده از این تگ را بدون نیاز به تبدیل کردن فرمت آن دارند.

در ادامه برای درک بهتر تگ Audio در HTMLمثالی می‌زنیم، حتما دنبال کنید.

مثال تگ audio

<audio controls>
  <source src="https://test.com/faraznetwork.ogg" type="audio/ogg">
  <source src="https://test.com/faraznetwork.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

تشریح مثال بالا:

خط ۱) در خط یک ما از تگ باز <audio> استفاده کردیم، داخل این تگ عبارتی نوشته شده به نام controls

که جزء خاصیت‌های تگ <audio> است، وقتی این خاصیت در داخل نگ باز <audio> وجود داشته باشد

باعث می‌شود صدا یا ویس ما قابلیت Play/Pause کردن را داشته باشد.
البته درباره خاصیت‌های تگ <audio> در ادامه این مقاله بیشتر صحبت خواهیم کرد.

خط ۲) بدون تگ <source> درواقع تگ <audio> معنایی ندارد، در تگ <source> شما آدرس فایل‌های صوتی

خود را در قسمت src درج می‌کنید، یادتان باشد که همیشه آدرس باید بین ” ” دابل کوتیشن درج شود،

همانند مثال بالا که در حال مشاهده هستید.
در قسمت type هم اصولا نوع فرمت صدا را معرفی می‌کنیم، همیشه برای هر فرمتی این بخش type ثابت است،

مثلا برای فرمت ogg همیشه type<span class="attributevaluecolor">="audio/ogg"</span> را درج می‌کنیم.

خط ۳) این خط هم همان کار خط دو را انجام می‌دهد ولی با فرمت دیگر، گاهی ممکن است

مثلا فرمت ogg در برخی دستگاه‌ها لود نشود و پشتیبانی لازم را صورت دهد

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

یک فایل صوتی خود را به دو فرمت مختلف در تگ <audio> درج کنید ولی فقط یکی از آن‌ها لود می‌شود.
البته لزومی هم ندارد هر دو باشند و صرفا خط ۲ یا خط ۳ شاید کافی باشد (یعنی یک فرمت)

ولی پیشنهاد می‌شود حداقل ۲ فرمت درج کنید تا مطمئن شوید فایل صوتی شما همیشه و در همه دستگاه‌ها قابلیت پخش را دارد.
برای فرمت mp3 هم همیشه type="audio/mpeg" را درج می‌کنیم.

خط ۴) خط یکی مانده به خاطر عبارت Your browser does not support the audio tag. درج شده است

و همان طور که مشخص است اگر در یک دستگاهی نه فرمت mp3 و نه فرمت ogg را ساپورت نکند

آن زمان این متن نمایش داده می‌شود در غیر این صورت آن را کاربران نمی‌بینند.
در نظر داشته باشید که درج این عبارت اجباری نیست، ولی پیشنهاد می‌شود درج کنید.

همینطور می‌توانید به جای این عبارت انگلیسی آن را فارسی بنویسید و مشکلی نیست.

اصولا در ۹۹ درصد از دستگاه‌ها و مرورگرها فرمت های رایج پشتیبانی می‌شوند و این پیغام نمایش داده نمی‌شود.

تشریح مثال بالا را سعی کردیم کامل بیان کنیم، ولی این پایان کار نیست و شما

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

خاصیت های تگ audio

در زیر خاصیت هایی که تگ <audio> از آن‌ها پشتیبانی می‌کند را آورده ایم.

چطور می‌شود از این خاصیت‌ها استفاده کرد؟

بسیار ساده است همان مثال بالا را در نظر بگیرید؛ حال قصد داریم زمانی که فایل صوتی به انتها رسید

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

<audio controls loop>
  <source src="https://test.com/faraznetwork.ogg" type="audio/ogg">
  <source src="https://test.com/faraznetwork.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

برای بقیه خاصیت ها همانند muted یا autoplay هم میتوان همانند مثال بالا رفتار کرد.

انواع فرمت ها در تگ audio

اصولا به مقداری که باید در خاصیت type درج شود  MIME Types گفته می‌شود.

پشتیبانی فرمت‌های مختلف صدا در انواع مرورگرها

بله یعنی آن فرمت در آن مرورگر ساپورت می‌شود.

تگ Video

تگ <video> برای قرارگیری فرمت های ویدئویی در صفحات HTML استفاده می‌شود و باعث می‌شود که یک ویدئو در صفحه ما استریم شود.

این تگ از سه فرمت MP4 و WebM و Ogg پشتیبانی می‌کند.

در ادامه با مثالی با این تگ بیشتر آشنا می‌شویم.

مثال تگ video

توجه مهم: پیشنهاد میکنم اگر توضیحات مربوط به تگ audio را مطالعه نکردید، حتما به بالای صفحه رفته

و ابتدا آن را مطالعه کنید، چون بسیاری از موارد مربوط به تگ <audio> و تگ <video> یکسان است

و ما توضیحات مشترک را دیگر در تگ <video> تکرار نمی‌کنیم.

عنوان مثال قصد داریم ویدئویی با نام video را نمایش دهیم.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

تشریح مثال بالا:

خط ۱) تگ video باز را درج کردیم و در مثال ما دارای سه attributes است. width و height و controls

که درباره دو تای اولی در قسمت خاصیت‌ها صحبت خواهیم کرد هر چند بسیار ساده هستند و

البته این دو attribute به صورت عمومی در اکثر تگ ها مورد استفاده قرار می‌گیرند.

درباره contorols همان طور که قبلا گفتیم قابلیت Play/Pause را اضافه می‌کند.

خط ۲ و ۳ و ۴)  فرمت‌های مختلف فیلم بعلاوه متن عدم ساپورت است و توضیحات این بخش همانند توضیحات مثال audio می‌باشد.

مواردی که توضیح داده نشده همانند تگ audio یکسان است.

خاصیت های تگ Video

در زیر خاصیت هایی که تگ <video> از آن‌ها پشتیبانی می‌کند را آورده ایم.

اصولا به مقداری که باید در خاصیت type درج شود MIME Types گفته می‌شود.

انواع فرمت ها در تگ Video

پشتیبانی فرمت‌های مختلف ویدیو در انواع مرورگرها

بله یعنی آن فرمت در آن مرورگر ساپورت می‌شود.

نتیجه گیری 

در این مقاله با دو تگ بسیار پر استفاده در صفحات وب امروزی یعنی تگ audio و video آشنا شدیم.

توجه داشته باشید که هر نوشته ای که بین تگ‌های video و audio نوشته شود در مرورگر‌هایی که این تگ‌ها را پشتیبانی نمی‌کنند، نمایش داده می‌شود.

پیشنهاد می‌کنم مقالات دیگر مجموعه آموزشHTML را نیز مطالعه کنید.

این مقاله نیز به پایان رسید و امیدوارم از آن استفاده لازم را برده باشید.

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

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

نویسنده:راحله تبریزی