لوگو دویکس
ورود / ثبت نام
تگ audio

تگ audio در HTML

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 2 دقیقه آخرین بروز رسانی: 08 آذر 1399

تگ audio در HTML برای جاسازی فایل‌های صوتی در صفحات وب به کار می‌رود. با استفاده از این تگ می‌توانید موسیقی، گفتگو، افکت‌های صوتی و هر نوع محتوای صوتی دیگری را در وب‌سایت خود قرار دهید.

نحوه استفاده از تگ audio

تگ audio در HTML به صورت یک زوج تگ باز و بسته (opening and closing tag) مورد استفاده قرار می‌گیرد:

HTML

<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>

در این مثال:

  • controls: این صفت دکمه‌های کنترل پخش صدا را به نمایش می‌گذارد.
  • src: این صفت آدرس فایل صوتی را مشخص می‌کند. در این مثال، دو فایل صوتی با فرمت‌های mp3 و ogg ارائه شده است. مرورگر اولین فرمتی که پشتیبانی می‌کند را انتخاب و پخش می‌کند.
  • type: این صفت نوع فایل صوتی را مشخص می‌کند.
  • متن بین تگ‌های باز و بسته audio: این متن در مرورگرهایی که از تگ audio پشتیبانی نمی‌کنند، به نمایش در می‌آید.

نکات مهم:

  • فرمت‌های صوتی قابل پشتیبانی در HTML5 عبارتند از: mp3، ogg، wav و flac.
  • می‌توانید از چندین تگ source برای ارائه فایل‌های صوتی با فرمت‌های مختلف استفاده کنید.
  • صفات دیگری نیز برای تگ audio وجود دارند، مانند autoplay (پخش خودکار)، loop (تکرار پخش) و muted (بی صدا).
  • برای نمایش کنترل‌های بیشتر پخش صدا، می‌توانید از JavaScript استفاده کنید.

مزایای استفاده از تگ audio

تگ audio در HTML برای جاسازی فایل‌های صوتی در صفحات وب به کار می‌رود و مزایای زیادی برای صاحبان وب‌سایت و کاربران آنها دارد. برخی از این مزایا عبارتند از:

1. ارائه محتوای جذاب و پویا:

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

2. جذب مخاطب:

محتوای صوتی می‌تواند به جلب توجه مخاطبان و افزایش زمان ماندگاری آنها در وب‌سایت شما کمک کند. تحقیقات نشان داده است که افراد تمایل دارند زمان بیشتری را در صفحاتی بگذرانند که در آنها از فایل‌های صوتی استفاده شده است.

3. بهبود سئو (SEO):

موتورهای جستجو مانند گوگل به محتوای صوتی نیز توجه می‌کنند و می‌توانند با استفاده از آن، محتوای صفحه شما را بهتر درک کنند. استفاده از تگ audio و ارائه فایل‌های صوتی مرتبط با محتوای صفحه می‌تواند به بهبود رتبه‌بندی شما در نتایج جستجو کمک کند.

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

4. قابلیت دسترسی:

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

مثال:

در اینجا یک مثال از نحوه استفاده از تگ audio برای پخش یک آهنگ آورده شده است:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>پخش آهنگ</title>
</head>
<body>

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

</body>
</html>

در این مثال، یک فایل صوتی با نام music.mp3 با فرمت mp3 پخش خواهد شد.

5. سازگاری با انواع دستگاه‌ها:

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

6. ایجاد تنوع در محتوا:

استفاده از فایل‌های صوتی می‌تواند به ایجاد تنوع در محتوای وب‌سایت شما کمک کند. این تنوع می‌تواند باعث شود تا صفحه شما برای بازدیدکنندگان جذاب‌تر شود و آنها تمایل داشته باشند که زمان بیشتری را در آن بگذرانند.

7. برندسازی:

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

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊