آموزش تگ audio در HTML

آموزش تگ audio در HTML

تگ <audio> در HTML برای افزودن فایل‌های صوتی به صفحات وب استفاده می‌شود. این تگ به شما امکان می‌دهد تا فایل‌های صوتی مختلف را به صورت مستقیم در صفحات وب خود نمایش دهید. در این مقاله، تمام جزئیات ویژگی‌ها و حالت‌های تگ <audio> را بررسی خواهیم کرد و با مثال‌هایی آن‌ها را توضیح می‌دهیم.

1. تگ audio در HTML

تگ <audio> یک تگ خالی (یا بدون بسته شدن) است که برای افزودن فایل‌های صوتی به صفحات وب استفاده می‌شود. این تگ به شما امکان می‌دهد تا فایل‌های صوتی مختلف را از منابع مختلف مانند فایل‌های صوتی محلی یا URL‌های صوتی خارجی در صفحه وب خود نمایش دهید.

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

2. ویژگی‌های تگ audio

تگ <audio> دارای ویژگی‌های زیر است:

  • src: مشخص می‌کند که فایل صوتی که باید نمایش داده شود، از کجا بارگیری شود.
  • autoplay: تنظیم می‌کند که فایل صوتی به طور خودکار پخش شود یا خیر.
  • loop: تنظیم می‌کند که فایل صوتی به طور خودکار مجدداً پخش شود و پخش تکراری انجام شود یا خیر.
  • controls: نمایش کنترل‌های پخش صوت مانند دکمه پخش، توقف و پیش‌برو در صوت.

3. مثال کامل

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

در این مثال، یک <audio> ایجاد شده است که فایل صوتی به نام audio.mp3 را نمایش می‌دهد و دارای کنترل‌های پخش است.

4. استفاده از فرمت‌های صوتی مختلف

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

در این مثال، یک <audio> با کنترل‌های پخش ایجاد شده است که دو منبع فایل صوتی مختلف را شامل می‌شود. اگر مرورگر کاربر قادر به پخش یک فرمت صوتی نباشد، پیام “Your browser does not support the audio tag.” نمایش داده می‌شود.

5. صداهای آموزشی

<audio src="tutorial.mp3" controls></audio>

در این مثال، یک <audio> ایجاد شده است که فایل صوتی به نام tutorial.mp3 را نمایش می‌دهد و دارای کنترل‌های پخش است.

نتیجه

تگ <audio> در HTML به شما امکان می‌دهد تا به صفحات وب خود فایل‌های صوتی را اضافه کنید و از امکانات پخش صوتی برخوردار شوید. با استفاده از ویژگی‌ها و تنظیمات مختلف، می‌توانید تجربه کاربری بهتری را ارائه دهید و ارتباط بین محتوا و صدا را بهبود بخشید.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - تاریخ‌ها (Dates)

JavaScript – تاریخ‌ها (Dates)

آبجکت‌های تاریخ (Date) در جاوااسکریپت آبجکت‌های تاریخ در جاوااسکریپت به ما امکان کار با تاریخ و زمان را می‌دهند....

بیشتر بخوانید
JavaScript - آرایه‌های ثابت (Array Const)

JavaScript – آرایه‌های ثابت (Array Const)

جاوااسکریپت: تعریف آرایه با const در سال 2015، جاوااسکریپت کلمه کلیدی مهمی به نام const را معرفی کرد. این...

بیشتر بخوانید
JavaScript - تکرار آرایه‌ها (Array Iteration)

JavaScript – تکرار آرایه‌ها (Array Iteration)

جاوا اسکریپت: تکرار بر روی آرایه‌ها جاوا اسکریپت روش‌های مختلفی برای تکرار (Iteration) بر روی آرایه‌ها ارائه می‌دهد که...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.