آموزش HTML - پخش‌کننده صوتی

عنصر <audio> در HTML یک فایل صوتی را در صفحه وب قرار می‌دهد. می‌توانید با استفاده از عنصر <audio> یک پخش‌کننده صوتی درون صفحه وب اضافه کنید.

عنصر <audio> در HTML

از عنصر <audio> برای فراهم کردن امکان پخش فایل‌های صوتی در یک صفحه وب استفاده می‌شود. می‌توانیم چندین منبع صوتی را مشخص کنیم؛ بااین‌حال، مرورگر به‌طور خودکار مناسب‌ترین فایل را انتخاب می‌کند. بیشتر ویژگی‌های عنصر <video> با عنصر <audio> نیز سازگار هستند. پرکاربردترین ویژگی‌های عنصر صوتی HTML عبارت‌اند از controls، autoplay، loop، muted و src.

ویژگی‌های عنصر <audio>

ویژگی‌های زیر برای تگ <audio> استفاده می‌شوند:

قرار دادن فایل صوتی در HTML

می‌توانید با استفاده از تگ <audio> و مشخص کردن مسیر فایل صوتی، یک پخش‌کننده صوتی در صفحه قرار دهید. مسیر فایل صوتی را می‌توان با تنظیم ویژگی src یا با استفاده از تگ <source> مشخص کرد.

پیش‌نویس فعلی استاندارد HTML5 مشخص نمی‌کند که مرورگرها باید از کدام قالب‌های صوتی در تگ صوتی پشتیبانی کنند. بااین‌حال، رایج‌ترین قالب‌های صوتی عبارت‌اند از ogg، mp3 و wav. بنابراین، می‌توان همه این قالب‌ها را نیز با استفاده از چندین تگ <source> درون عنصر <audio> ارائه کرد. در این حالت، انتخاب قالب مناسب‌تر برای پخش صدا را به مرورگر بسپارید.

استفاده از ویژگی controls ضروری است تا کاربران بتوانند عملکردهای پخش صدا، مانند تنظیم میزان صدا، رفتن به جلو یا عقب و پخش یا توقف موقت را کنترل کنند.

نحو

نحو قرار دادن یک فایل صوتی به شکل زیر است:

<audio controls>
  <source src="file_path" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

در اینجا:

• <audio>: عنصر اصلی برای قرار دادن یک پخش‌کننده صوتی است.
• controls: کنترل‌های مربوط به پخش، توقف موقت و تنظیم میزان صدا را اضافه می‌کند.
• <source>: نام فایل صوتی (به همراه مسیر آن) و قالب فایل صوتی را مشخص می‌کند.
• متن جایگزین: متنی است که در صورت پشتیبانی نکردن مرورگر از عنصر <audio> نمایش داده می‌شود. در نحو بالا، متن زیر نمایش داده خواهد شد:
  "Your browser does not support the audio element."

مثالی از عنصر صوتی HTML

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

<!DOCTYPE html>
<html>
<body>
   <p>Working with audio element</p>
   <audio controls>
      <source src= "/html/media/audio/sample_3sec_audio.mp3" type = "audio/mp3" />
      <source src= "/html/media/audio/sample_3sec_audio.wav" type = "audio/wav" />
      <source src= "/html/media/audio/sample_3sec_audio.ogg" type = "audio/ogg" />
      Your browser does not support the <audio> element.
   </audio>
</body>
</html>

استفاده از ویژگی‌های autoplay، muted و loop در پخش‌کننده صوتی

همچنین می‌توانیم با استفاده از ویژگی‌های autoplay و loop، صدا را طوری تنظیم کنیم که به‌صورت خودکار و پیوسته پخش شود. توجه داشته باشید که مرورگر Chrome از قابلیت پخش خودکار پشتیبانی نمی‌کند، مگر اینکه از ویژگی muted استفاده شود. بنابراین، توصیه می‌شود ویژگی‌های autoplay و muted را با هم به کار ببرید.

ویژگی autoplay یک ویژگی بولی است که باعث می‌شود صدا به‌محض بارگذاری صفحه به‌طور خودکار پخش شود. اگر ویژگی loop در عنصر <audio> وجود داشته باشد، پس از رسیدن به انتهای فایل صوتی، پخش صدا به‌طور خودکار به ابتدای آن بازمی‌گردد.

مثال

مثال زیر نحوه پخش خودکار و تکرارشونده صدا را نشان می‌دهد:

<!DOCTYPE html>
<html>
<body>
   <p>Working with audio element</p>
   <audio controls autoplay muted loop>
      <source src= "/html/media/audio/sample_3sec_audio.mp3" type = "audio/mp3" />
      <source src= "/html/media/audio/sample_3sec_audio.wav" type = "audio/wav" />
      <source src= "/html/media/audio/sample_3sec_audio.ogg" type = "audio/ogg" />
      Your browser does not support the <audio> element.
   </audio>
</body>
</html>

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

جدول زیر قالب‌های صوتی مختلفی را نشان می‌دهد که مرورگرهای گوناگون از آن‌ها پشتیبانی می‌کنند: