سورس پیانو ساده و تعاملی با HTML, CSS و JavaScript

معرفی سورس

یک پیانوی مجازی زیبا، ساده و کاملاً تعاملی که با فناوری‌های HTML، CSS و JavaScript پیاده‌سازی شده است. این پروژه یک اکتاو کامل از نت‌های پیانو را شبیه‌سازی می‌کند و کاربران می‌توانند با کلیک ماوس یا فشردن کلیدهای کیبورد نت‌های مختلف را پخش کنند. تمام نت‌ها با استفاده از Web Audio API به‌صورت Real-time تولید می‌شوند و نیازی به هیچ فایل صوتی خارجی نیست.

🎯 ویژگی‌ها

• ✅ ۱۳ کلید پیانو (۸ کلید سفید و ۵ کلید مشکی) با ظاهر کاملاً شبیه‌سازی‌شده
• ✅ پخش کردن نت‌ها با کلیک ماوس روی کلیدها
• ✅ نواختن نت‌ها با فشردن کلیدهای کیبورد (A, S, D, F, G, H, J, K, W, E, T, Y, U)
• ✅ تولید صدا با Web Audio API – بدون نیاز به فایل صوتی
• ✅ کنترل حجم صدا (Volume) با یک اسلایدر زیبا
• ✅ بازخورد بصری (Active State) روی کلیدها هنگام پخش کردن
• ✅ نمایش Toast Message برای نمایش نام نت پخش کرده شده
• ✅ طراحی واکنش‌گرا (Responsive) – مناسب برای موبایل، تبلت و دسکتاپ
• ✅ رابط کاربری کاملاً فارسی و راست‌چین (RTL)
• ✅ طراحی مدرن با تم تیره (Dark Mode) و افکت شیشه‌ای (Glassmorphism)
• ✅ کدنویسی تمیز و دارای کامنت‌های توضیحی
• ✅ بدون نیاز به هیچ کتابخانه خارجی

🎨 طراحی ظاهری

کلیدهای سفید و مشکی با دقت طراحی شده‌اند تا ظاهری واقعی از یک پیانو را تداعی کنند. هنگام کلیک یا فشردن کلید، رنگ کلید به نارنجی تغییر می‌کند و یک Toast در گوشه صفحه نام نت را نشان می‌دهد. یک اسلایدر زیبا برای کنترل حجم صدا در پایین پیانو قرار دارد. کل طراحی با تم تیره و افکت شیشه‌ای (Glassmorphism) هماهنگ با سایت شماست.

📦 محتویات سورس

• index.html – ساختار صفحه، کلیدهای پیانو و رابط کاربری
• style.css – استایل‌دهی کامل با تم تیره و طراحی واکنش‌گرا
• script.js – منطق نواختن نت‌ها، مدیریت کیبورد و Web Audio API

🚀 نحوه استفاده

1. هر سه فایل را در یک پوشه قرار دهید.
2. فایل index.html را با مرورگر باز کنید.
3. با کلیک روی کلیدها یا فشردن دکمه‌های کیبورد (A تا K و W, E, T, Y, U) شروع به نواختن کنید.
4. حجم صدا را با اسلایدر تنظیم کنید.

برای ادغام در پروژه خود، کافی است کدهای HTML، CSS و JS را به صفحات خود اضافه کنید.

📋 مشخصات فنی

• تکنولوژی: HTML5, CSS3, JavaScript (Vanilla)
• API صوتی: Web Audio API
• طراحی: واکنش‌گرا (Responsive)، راست‌چین (RTL)
• وابستگی: صفر (بدون کتابخانه خارجی)
• تعداد فایل: ۳
• حجم کلی: بسیار کم
• سازگاری: تمام مرورگرهای مدرن

🎁 این سورس برای چه کسانی مناسب است؟

• توسعه‌دهندگان وبی که به دنبال یک پروژه خلاقانه و آماده هستند
• افراد مبتدی که می‌خواهند با Web Audio API و رویدادهای کیبورد آشنا شوند
• پروژه‌های آموزشی و سرگرمی
• هرکسی که یک کامپوننت جذاب و تعاملی برای وب‌سایت خود می‌خواهد

💡 چرا این سورس؟

• 🔹 استفاده از Web Audio API برای تولید صدای زنده و بدون فایل خارجی
• 🔹 کد بسیار تمیز، دارای کامنت و قابل یادگیری
• 🔹 طراحی کاملاً واکنش‌گرا و قابل استفاده در تمام دستگاه‌ها
• 🔹 پشتیبانی هم‌زمان از ماوس و کیبورد
• 🔹 رابط کاربری فارسی و جذاب
• 🔹 اجرای فوری و بدون پیش‌نیاز

♦️نکته مهم

توجه داشته باشید که هنگام پخش کردن از طریق کیبورد، زبان کیبورد فارسی نباشد.