پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید.

music-player
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   │   ├── musics
│   │   │   ├── 1.mp3
│   │   │   ├── 2.mp3
│   │   │   ├── 3.mp3
│   │   │   └── 4.mp3
│   │   ├── next.svg
│   │   ├── pause.svg
│   │   ├── play.svg
│   │   └── prev.svg
│   ├── components
│   │   ├── Button.jsx
│   │   ├── Container.jsx
│   │   ├── MusicTitle.jsx
│   │   └── Progress.jsx
│   ├── containers
│   │   └── MusicPlayer.jsx
│   ├── data
│   │   └── Musics.js
│   ├── models
│   │   └── Audio.js
│   ├── styles
│   │   └── index.css
│   └── index.js
├── README.md
├── package.json
└── yarn.lock

جزئیات

در این سوال ما قصد داریم یک موزیک پلیر ساده طراحی کنیم. ظاهر کلی برنامه بدین صورت است:

در فایل Musics.js موجود در پوشه data لیستی از موزیک ها قرار داده شده است. شکل ایتم های موجود در این فایل به شکل زیر است:

{
  name: string,
  path: string
}

که name نام موزیک و path آدرس فایل آن است که باید توسط مرورگر پخش شود. شما باید برنامه ای طراحی کنید که این موزیک ها را پخش نماید.

مواردی که باید در این سوال رعایت کنید:

• نام موزیک و میزان پخش شده از آن باید مطابق با تصویر بالا نمایش داده شود.
• همچنین این برنامه باید قابلیت پخش و مکث موزیک و رفتن به موزیک قبلی و بعدی را داشته باشد.
• درصورتی که یک موزیک تمام شد موزیک بعدی باید به صورت خودکار پخش شود.
• دکمه موزیک بعدی باید درصورتی که موزیک فعلی آخرین موزیک است در حالت disabled باشد و برای دکمه قبلی اگر موزیک فعلی اولین موزیک بود باید این اتفاق بیافتد.

نکات

• کامپوننت های مورد نیاز در فایل MusicPlayer.jsx آورده شده است.
• props های مورد نیاز کاپموننت های استفاده شده را به آن ها ارسال کنید.
• Object مورد نیاز برای پخش موزیک در فایل Audio.js در پوشه models export شده است.شما باید برای پخش موزیک از این Object استفاده کنید.

نکات

• شما تنها مجاز به اعمال تغییر در فایل MusicPlayer.jsx هستید. پس از اعمال تغییرات، پروژه را zip کرده و ارسال کنید.
• دقت کنید که پوشه‌ی node_modules در فایل ارسالی نباشد.