Music & Podcast PWA

نواگرام — پخش‌کننده موزیک و پادکست

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

پخش‌کننده صوتPWAIndexedDBآفلاین
نقش ما
طراحی UI و توسعه فرانت‌اند
دسته
اپلیکیشن و PWA
سال
۱۴۰۵

دموی زنده — همین‌جا قابل استفاده است

../../demo/navaageram/index.html

این قاب، خودِ پروژه است و داخل آن می‌توانید اسکرول و کلیک کنید. داده‌ها نمونه هستند و به سرویس واقعی وصل نیستند. برای تجربه‌ی کامل، دمو را در تب جدید باز کنید.

چالش پروژه

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

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

راهکار تیم

  • ذخیره فایل و متادیتا در IndexedDB با لایه Provider قابل تعویض (محلی، یا REST برای بک‌اند آینده)
  • هسته ماژولار: store و config و utils و idb جدا از فیچرها (player، upload، views، tasks، actions)
  • رابط فارسی راست‌به‌چپ با دیزاین‌سیستم نومورفیک، آیکون‌های SVG درون‌خطی و کاورسازی خودکار برای فایل‌های بدون کاور
  • نصب به‌عنوان اپ با manifest و Service Worker و کارکرد در حالت آفلاین
نمای کامل رابط کاربری نواگرام — پخش‌کننده موزیک و پادکست
نمای کامل رابط کاربری — نسخه‌ی دسکتاپ

استک فنی

HTML5Tailwind CSSJavaScript (ES Modules)IndexedDBWeb AudioService Worker
پروژه‌ی بعدیشاپ — فروشگاه کالای دیجیتال
مطالعه موردی بعدی