A fully functional music streaming application built with vanilla HTML5, CSS3, and JavaScript. Inspired by the official Spotify design with complete audio playback controls, responsive layout, horizontal scrolling sections, and smooth animations.
- Play/Pause Controls - Start and stop music playback
- Next/Previous Navigation - Navigate through your playlist
- Shuffle Mode - Randomize song playback order
- Repeat Modes - Repeat all songs, repeat one song, or no repeat
- Progress Bar - Seek to any position in the track
- Volume Control - Adjustable volume slider with visual feedback
- Time Display - Current time and total duration indicators
- Modern Sidebar - Clean navigation with Spotify branding
- Horizontal Scrolling Sections - Featured, Trending, Popular Artists, Recently Played
- Album/Playlist Cards - Beautifully designed with play buttons on hover
- Artist Cards - Circular album art for artist profiles
- Sticky Music Player - Always-accessible player at bottom with full controls
- Dark Theme - Official Spotify dark color scheme (Black, Dark Gray, Green)
- Smooth Animations - Fade-in effects for cards and sections
- Greeting Header - Personalizes greeting based on time of day ("Good morning/afternoon/evening")
- Desktop - Full feature set on large screens (1400px+)
- Tablet - Optimized layout for medium screens (1024px)
- Mobile - Compact layout for phones (480px-768px)
- Touch Friendly - Large buttons and controls for mobile use
- SPACE - Play/Pause
- RIGHT ARROW - Next Song
- LEFT ARROW - Previous Song (or restart if within 3 seconds)
- Volume Persistence - Your volume setting is saved between sessions
Spotify Clone/
├── index.html # Main HTML structure
├── style.css # Complete styling with responsive design
├── script.js # Audio playback logic and UI interaction
├── README.md # This documentation
└── .gitignore # Git ignore configuration
- Sidebar - Navigation with logo, menu items, and playlists
- Main Content - Featured albums, recently played, and complete song list
- Music Player - Three-section sticky footer with controls and progress
- Audio Element - Hidden HTML5 audio element for playback
- CSS Variables - Reusable color palette for easy theming
- Flexbox/Grid - Modern layout system for responsive design
- Glassmorphism Effects - Subtle backdrop filters and transparency
- Smooth Transitions - 200ms ease transitions on all interactions
- Custom Scrollbars - Styled scrollbars matching Spotify aesthetic
- Gradient Effects - Subtle gradients for visual depth
- Audio API Integration - HTML5 Audio element controls
- State Management - Player state tracking (current song, volume, shuffle, repeat)
- DOM Manipulation - Dynamic rendering of songs, albums, and UI updates
- Event Handling - Complete event listeners for all user interactions
- Time Formatting - Utility functions for MM:SS time display
- Local Storage - Persistent volume settings
This project is open source and available for personal and educational use.
Created as a portfolio project demonstrating vanilla JavaScript audio application development.
Contributions are welcome! Please feel free to submit pull requests or open issues for bugs and feature requests.
Enjoy your music! 🎵
For questions or support, check the GitHub Issues section or contact the developer.