Create a modern music player interface with playlist management, audio visualization, and smooth playback controls. Focus on creating an intuitive and visually appealing user experience.

Project Checklist

• Design a player interface with play, pause, next, previous controls
• Implement progress bar with seek functionality
• Display current track information (title, artist, album art)
• Create a playlist view with track listing
• Add volume control slider
• Implement shuffle and repeat modes

Bonus Project Checklist Items

• Add audio waveform visualization using Web Audio API
• Implement equalizer with frequency bands
• Create queue management (add to queue, reorder tracks)
• Add lyrics display synchronized with playback
• Implement keyboard shortcuts for playback control
• Add theme customization (light/dark modes)

Inspiration (Any companies/libraries similar)

• Spotify
• Apple Music
• YouTube Music

Hint/Code snippet to start

To get started, you can use the following code snippet to set up audio playback:

const audio = new Audio();
let currentTrackIndex = 0;
const playlist = [];

function playTrack(index) {
  currentTrackIndex = index;
  audio.src = playlist[index].url;
  audio.play();
  updateUI();
}

audio.addEventListener('timeupdate', () => {
  const progress = (audio.currentTime / audio.duration) * 100;
  updateProgressBar(progress);
});

audio.addEventListener('ended', () => {
  playNext();
});