پخش کننده صوتی در HTML5

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

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

راهنمای گام به گام ایجاد پخش کننده صوتی HTML5

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

موارد مورد نیاز:

یک ویرایشگر متن (مانند Notepad++ یا Sublime Text)
یک مرورگر وب (مانند Chrome، Firefox یا Safari)
یک فایل صوتی (به فرمت MP3، Ogg یا WAV)

مراحل:

ایجاد فایل HTML:
- یک فایل HTML جدید با نام دلخواه (مثلاً audio-player.html) ایجاد کنید.
- کد زیر را در داخل فایل HTML خود قرار دهید:

HTML

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>پخش کننده صوتی HTML5</title>
</head>
<body>
  <script src="script.js"></script>
</body>
</html>

ایجاد فایل JavaScript:
- یک فایل JavaScript جدید با نام script.js ایجاد کنید.
- کد زیر را در داخل فایل JavaScript خود قرار دهید:

JavaScript

const audio = document.querySelector('audio');

audio.src = 'audio/myfile.mp3'; // مسیر فایل صوتی خود را اینجا وارد کنید
audio.controls = true; // دکمه های کنترل را نمایش می دهد

audio.addEventListener('loadedmetadata', function() {
  console.log('فایل صوتی بارگذاری شد!');
});

audio.addEventListener('play', function() {
  console.log('پخش آغاز شد!');
});

audio.addEventListener('pause', function() {
  console.log('پخش متوقف شد!');
});

audio.addEventListener('ended', function() {
  console.log('پخش به پایان رسید!');
});

آزمایش پخش کننده:
- فایل HTML و JavaScript خود را در یک پوشه ذخیره کنید.
- فایل audio-player.html را در مرورگر وب خود باز کنید.
- باید پخش کننده صوتی را با دکمه های کنترل مشاهده کنید.
- بر روی دکمه “Play” کلیک کنید تا پخش آغاز شود.
- می‌توانید با استفاده از دکمه‌های دیگر، پخش را متوقف کنید، به عقب یا جلو بروید و یا صدا را تنظیم کنید.

نکات:

می‌توانید مسیر فایل صوتی را در کد audio.src به آدرس فایل صوتی خود در کامپیوترتان تغییر دهید.
می‌توانید با استفاده از CSS به ظاهر پخش کننده صوتی خود مانند رنگ، حاشیه و اندازه استایل دهید.
می‌توانید از JavaScript برای کنترل بیشتر بر پخش کننده صوتی مانند شروع خودکار پخش، حلقه پخش و پاسخ به کلیک کاربر استفاده کنید.

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

Definition	Attribute
باعث می شود صدا به طور خودکار شروع به پخش کند	autoplay
باعث می شود که صدا پس از پایان دوباره شروع به پخش کند	loop
پخش کننده را به طور پیش فرض بی صدا می کند	muted
به مرورگر دستور می دهد که چه مواردی را از قبل بارگیری کند – کل پرونده (خودکار) ، فراداده آن (فراداده) یا اصلاً هیچ چیز (هیچکدام)	preload

نکات مهم پخش کننده صوتی HTML5

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

پشتیبانی مرورگرها

از اکثر مرورگرها مانند : chrome، ie ، Firefox ، Safari، Opera، Edge پشتیبانی می کند.

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

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