وقتی که به این فایل رجوع کنید سه پلی‌لیست مشاهده خواهید کرد، برای مثال:

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",
  },
];

در ابتدای فایل تمام تگ‌ها و المان‌هایی که نیاز هست از آن‌ها استفاده کنید، تعریف شده‌اند.

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;

متغیرها

توابع

<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>

نکته: نام آهنگ و نام خواننده که در لیست رندر می‌شوند باید به صورت زیر نمایش داده شوند:

songName + " - " + singerName

بخش Progress Bar

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

آیکون‌ها و عملکرد آن

1. پخش و توقف (fa-play / fa-pause): + زمانی که آهنگ در حال پخش است، آیکون (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):

   • در حالت عادی، آیکون (fa-regular fa-heart) نمایش داده می‌شود.

   • با کلیک، آهنگ به لیست Favorites اضافه می‌شود و آیکون به (fa-solid fa-heart) تغییر می‌کند.

   • با کلیک مجدد، آهنگ از لیست Favorites حذف شده و آیکون دوباره به fa-regular fa-heart برمی‌گردد.