راهنمای ساخت پلیر موزیک با HTML
در این مقاله به بررسی روش ساخت یک پلیر موزیک ساده با استفاده از تگ audio در HTML می‌پردازیم. این تگ امکاناتی را برای پخش فایل‌های صوتی در صفحات وب فراهم می‌کند.
کد پایه پلیر موزیک
ساده‌ترین فرم استفاده از تگ audio به صورت زیر است:
<audio controls>
<source src="آدرس-فایل-صوتی.mp3" type="audio/mpeg">
</audio>
این کد یک پلیر ساده با کنترل‌های پیش‌فرض مرورگر ایجاد می‌کند که شامل دکمه‌های پخش، مکث، تنظیم صدا و ... است.
ویژگی‌های مهم تگ audio
| ویژگی |
توضیحات |
| controls |
نمایش کنترل‌های پخش |
| autoplay |
پخش خودکار فایل |
| loop |
تکرار خودکار فایل |
| muted |
بی‌صدا کردن پلیر |
پشتیبانی از فرمت‌های مختلف
برای پشتیبانی از مرورگرهای مختلف، بهتر است چندین فرمت صوتی ارائه شود:
- MP3 - پشتیبانی گسترده در مرورگرها
- OGG - مناسب برای فایرفاکس و کروم
- WAV - کیفیت بالا اما حجم زیاد
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
مرورگر شما از پلیر صوتی پشتیبانی نمی‌کند.
</audio>
برای اطلاعات بیشتر درباره تگ audio می‌توانید کد html موزیک پلیر.
استایل دهی به پلیر
با استفاده از CSS می‌توانید ظاهر پلیر را تغییر دهید:
<style>
audio {
width: 100%;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 5px;
}
</style>
با استفاده از JavaScript می‌توانید کنترل بیشتری روی پلیر داشته باشید. مثلاً می‌توانید رویدادهای مختلفی مانند play، pause و ended را مدیریت کنید.
امیدواریم این آموزش برای شما مفید بوده باشد. برای اطلاعات تکمیلی حتماً مستندات رسمی HTML را مطالعه کنید.
