آموزش تگ 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 به شما امکان می‌دهد تا به صفحات وب خود فایل‌های صوتی را اضافه کنید و از امکانات پخش صوتی برخوردار شوید. با استفاده از ویژگی‌ها و تنظیمات مختلف، می‌توانید تجربه کاربری بهتری را ارائه دهید و ارتباط بین محتوا و صدا را بهبود بخشید.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
Python - محدود کردن داده (MongoDB Limit)

Python – محدود کردن داده (MongoDB Limit)

Python MongoDB محدود کردن نتایج برای محدود کردن نتایج در MongoDB، از متد limit() استفاده می‌کنیم. متد limit() یک...

بیشتر بخوانید
Python - بروزرسانی (MongoDB Update)

Python – بروزرسانی (MongoDB Update)

به‌روزرسانی یک رکورد برای به‌روزرسانی یک رکورد یا سند در MongoDB، از متد update_one() استفاده می‌کنیم. پارامتر اول متد...

بیشتر بخوانید
Python - حذف کالکشن (MongoDB Drop Collection)

Python – حذف کالکشن (MongoDB Drop Collection)

حذف کالکشن شما می‌توانید یک جدول یا کالکشن در MongoDB را با استفاده از متد drop() حذف کنید. مثالحذف...

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

نظرات

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

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