این روزها در شرکت، هر وقت کلمه‌ی **«هدفون»** گفته می‌شد، همه یک نفر را به یاد می‌آوردند؛ اون کسی نبود جز **فرانتیوم.** فرانتیوم تنها زمانی که مجبور بود در جلسه‌ای شرکت کند، هدفونش را از روی سر برمی‌داشت. حالا که آکاردئون داشت و بیش از هر زمان دیگری در دنیای موسیقی غرق بود، یک روز هنگام مرور آهنگ‌هایش، سوال بسیار مهمی در ذهنش شکل گرفت: چرا تا الآن یک موزیک پلیر برای خودم نساخته‌ام؟
مثل همیشه، فکر کردن به دنیای فرانت باعث شد ایده‌ی پروژه‌ی جدیدی به ذهن فرانتیوم برسد: ساخت یک موزیک پلیر.
# **پروژه اولیه**
برای دانلود **پروژه‌ی اولیه** روی [این لینک](/contest/assignments/84122/download_problem_initial_project/307253/) کلیک کنید.
<details class="red">
<summary>**ساختار فایل‌ها**</summary>
```plaintext
music_player/
├─ fonts/
├─ <mark class="orange" title="این فایل را تکمیل کنید">data.js</mark>
├─ index.html
├─ <mark class="orange" title="این فایل را تکمیل کنید">main.js</mark>
└─ styles.css
```
</details>
# **جزئیات پروژه**
در گیف زیر می‌توانید عملکر کلی برنامه را مشاهده کنید:
<details class="purple">
<summary>**پیادهسازی فایل data.js** </summary>
وقتی که به این فایل رجوع کنید سه پلی‌لیست مشاهده خواهید کرد، برای مثال:
<details class="red">
<summary>**اولین پلی‌لیست**</summary>
```js
const playlist1 = [
{
id: 1,
title: "Skyline Dreams",
artist: "Nova",
genre: "Chill",
duration: "3:45",
},
{
id: 2,
title: "Ocean Ride",
artist: "Wavey",
genre: "Electronic",
duration: "4:12",
},
{
id: 3,
title: "Midnight Sun",
artist: "Solar",
genre: "Pop",
duration: "2:58",
},
{
id: 4,
title: "Crystal Hearts",
artist: "Amber",
genre: "Indie",
duration: "3:33",
},
{
id: 5,
title: "Velvet Sky",
artist: "Luna",
genre: "Ambient",
duration: "3:10",
},
];
```
</details>
</details>
<details class="purple">
<summary>**پیادهسازی فایل main.js**</summary>
در ابتدای فایل تمام تگ‌ها و المان‌هایی که نیاز هست از آن‌ها استفاده کنید، تعریف شده‌اند.
```js
const allMenu = document.getElementById("menu-all");
const playlistMenu = document.getElementById("menu-playlist");
const favoritesMenu = document.getElementById("menu-favorites");
const trackTitle = document.getElementById("track-title");
const trackArtist = document.getElementById("track-artist");
const trackGenre = document.getElementById("track-genre");
const trackTime = document.getElementById("track-time");
const progressBar = document.getElementById("progress-bar");
const progressFill = document.getElementById("progress-fill");
const controls = {
play: document.getElementById("play"),
prev: document.getElementById("prev"),
next: document.getElementById("next"),
shuffle: document.getElementById("shuffle"),
favorite: document.getElementById("favorite")
};
let allTracks = [];
let currentTrackIndex = 0;
let activeTrackList = [];
let favorites = [];
let isShuffle = false;
let shuffledTrackList = [];
let timer = null;
let elapsedSeconds = 0;
let totalSeconds = 0;
let isPlaying = false;
```
## متغیرها
## توابع
</details>
<details class="purple">
<summary>**پیادهسازی منوی آهنگها**</summary>
<details class="red">
<summary>**ساختار منو در index.html** </summary>
```html
<aside class="menu">
<div class="menu-section">
<h3 class="toggle" data-section="all">
<i class="fa-solid fa-headphones"></i> All Tracks
</h3>
<ul class="menu-list" id="menu-all"></ul>
</div>
<div class="menu-section">
<h3 class="toggle" data-section="playlist">
<i class="fa-solid fa-folder-music"></i> Playlists
</h3>
<ul class="menu-list" id="menu-playlist"></ul>
</div>
<div class="menu-section">
<h3 class="toggle" data-section="favorites">
<i class="fa-regular fa-heart"></i> Favorites
</h3>
<ul class="menu-list" id="menu-favorites"></ul>
</div>
</aside>
```
1. **هر بخش از منو دارای یک** `<h3>` برای عنوان *(قابل کلیک)* و یک `<ul>` **برای نمایش لیست آیتم‌ها** است.
2. **کلاس‌های** `toggle` و `open` برای مدیریت *باز/بسته بودن* بخش‌ها استفاده می‌شوند.
3. **آیتم‌های آهنگها** به صورت `<li>` درون `<ul>`ها قرار می‌گیرند.
4. در بخش `📁 Playlists`، **هر لیست پخش می‌تواند شامل چند** `<ul>` زیرمجموعه باشد *(برای گروه‌بندی آهنگها)،* که هرکدام شامل `<li>`های مربوط به **آهنگ‌های همان دسته** هستند.
</details>
**نکته:** نام آهنگ و نام خواننده که در لیست رندر می‌شوند باید به صورت زیر نمایش داده شوند:
```
songName + " - " + singerName
```
</details>
<details class="purple">
<summary>**نمایش اطلاعات آهنگ**</summary>
</details>
<details class="purple">
<summary>**کنترلرهای موزیک پلیر**</summary>
## بخش **Progress Bar**
این بخش باید با زمان واقعی آهنگ هماهنگ باشد و قابلیت جابه‌جایی بین زمان‌های مختلف آهنگ را فراهم کند. پس از پایان آهنگ، باید به آهنگ بعدی منتقل شود.
## آیکون‌ها و عملکرد آن
1. **پخش و توقف (`fa-play` / `fa-pause`)**:
+ زمانی که آهنگ **در حال پخش** است، آیکون
<i class="fa-solid fa-pause"></i> (`fa-pause`) نمایش داده می‌شود و با کلیک بر روی آن، آهنگ متوقف می‌شود.
+ زمانی که آهنگ **متوقف** است، آیکون
<i class="fa-solid fa-play"></i> (`fa-play`) نمایش داده می‌شود و با کلیک، پخش آهنگ ادامه پیدا می‌کند.
2. **دکمه‌ی بازگشت (`fa-backward-step`)**:
+ اگر **بیش از ۱۰ ثانیه** از آهنگ گذشته باشد، با کلیک به **ابتدای همان آهنگ** بازمی‌گردیم.
+ اگر **کمتر از ۱۰ ثانیه** گذشته باشد، با کلیک به **آهنگ قبلی** منتقل می‌شویم.
3. **دکمه‌ی جلو (`fa-forward-step`)**:
+ با کلیک روی این دکمه، به **آهنگ بعدی** منتقل می‌شویم.
4. **دکمه‌ی شافل (`fa-shuffle`)**:
+ با فعال کردن این دکمه، آهنگها **به صورت تصادفی (Random)** پخش می‌شوند.
+ با کلیک مجدد، پخش تصادفی غیرفعال می‌شود و ترتیب اصلی آهنگها بازمی‌گردد.
5. **دکمه‌ی علاقه‌مندی (`fa-heart`)**:
+ در حالت عادی، آیکون <i class="fa-regular fa-heart"></i> (`fa-regular fa-heart`) نمایش داده می‌شود.
+ با کلیک، آهنگ به لیست _Favorites_ اضافه می‌شود و آیکون به
<i class="fa-solid fa-heart"></i> (`fa-solid fa-heart`) تغییر می‌کند.
+ با کلیک مجدد، آهنگ از لیست _Favorites_ حذف شده و آیکون دوباره به `fa-regular fa-heart` برمی‌گردد.
</details>
# **آن‌چه باید آپلود کنید**
+ **توجه**: پس از اعمال تغییرات، کل پروژه را _Zip_ کرده و آپلود کنید. **همانند پروژه اولیه در فایل زیپ شده نباید کد در پوشه‌ی دیگری قرار بگیرد در غیر این صورت سیستم داوری فایل را شناسایی نکرده و نمره‌ای دریافت نخواهید کرد.**
+ **توجه:** تنها فایل‌هایی که در **ساختار پروژه** مشخص شده‌اند، در سیستم داوری **مورد پذیرش** قرار خواهد گرفت و سایر تغییرات در سایر فایل‌ها **بی‌تاثیر** خواهند بود.
+ **توجه:** پیش از آپلود پاسخ، کامنت‌های موجود در فایل _main.js_ را حذف کنید.