Case Study
Music Player Component
Fully functional music player with real audio playback, progress tracking, seeking, and volume control.
- React
- TypeScript
- Tailwind CSS
- Next.js
- shadcn/ui
- HTML5 Audio API
- Lucide Icons
Timeline
1 day
Focus
UI Design • Component Development
Status
Fully functional
Live Component Demo
Playing from Playlist
My Favorites
Sunflower
Post Malone & Swae Lee
Up Next
Overview
The Music Player Component is a fully functional, production-ready React component built with modern web technologies and presented in a realistic iPhone mockup. It demonstrates clean component architecture, responsive design principles, and real audio playback using the HTML5 Audio API, featuring Juice WRLD's "Superpower" track.
Built with Next.js 15, TypeScript, and Tailwind CSS, the component showcases how to create polished, interactive UI elements using shadcn/ui primitives and Lucide React icons. The player includes real-time audio playback, seeking, volume control, playlist browsing, and repeat functionality—all displayed within an authentic iPhone frame. Try it out in the live demo above!
Features
- Real Audio Playback: HTML5 Audio API integration for actual music playback with Juice WRLD's "Superpower"
- Play/Pause Control: Toggle audio playback with visual feedback and smooth state transitions
- Seeking: Drag the progress slider to jump to any point in the track instantly
- Previous/Next Track Navigation: Skip between songs in the playlist with dedicated buttons
- Real-Time Progress: Progress bar updates automatically during playback with precise time display and countdown timer showing remaining time
- Volume Control: Adjustable volume slider with real-time audio level updates
- Repeat Mode: Loop the track continuously when enabled
- Shuffle Mode: Randomize playlist playback order for variety
- Playlist Sidebar: View and select from a 5-track playlist with smooth slide-in overlay animation on mobile
- Like/Favorite: Interactive heart icon with fill animation for user preferences
- iPhone Mockup Presentation: Component displayed within a realistic iPhone frame with authentic notch and bezels for portfolio showcase
- Responsive Design: Optimized for mobile viewport with touch-friendly controls and centered layout
Technical Implementation
The component leverages React's modern features and best practices:
- HTML5 Audio API: Direct integration with native audio element for playback control, with event listeners for timeupdate, loadedmetadata, durationchange, and ended events
- React State Management: Uses useState hooks for managing playback state, volume, and user preferences
- useRef Hook: Reference management for direct audio element manipulation and control
- TypeScript: Fully typed with proper interfaces for Song objects and strong type safety
- shadcn/ui Components: Built on top of Radix UI primitives for accessibility and flexibility
- Tailwind CSS: Utility-first styling with responsive design and smooth animations
- Lucide Icons: Consistent, scalable icon system for all UI controls
Component Architecture
The component follows a clean, maintainable structure with clear separation of concerns:
State Management
Nine independent state variables manage different aspects of the player: track selection (currentSongIndex), playback status (isPlaying), time tracking (currentTime, duration), volume level, and user preferences (isLiked, showPlaylist, isRepeat, isShuffle). This granular approach ensures efficient re-renders and clean separation of concerns.
Audio Integration
The audioRef hook maintains a reference to the HTML5 audio element, enabling direct manipulation of playback controls. Event listeners synchronize the audio state with React state, ensuring the UI accurately reflects playback progress, duration, and completion.
Helper Functions
Utility functions like formatTime() keep the component logic clean and testable, converting seconds to MM:SS format for display with proper NaN handling for robust time display.
Event Handlers
Dedicated handlers for play/pause, seeking, track navigation, and toggle actions provide clear, predictable user interactions. Each handler synchronizes both the audio element and React state for consistent behavior.
Design Details
The visual design emphasizes clarity and modern aesthetics:
- Clean, modern design using system theme colors that adapt to light and dark modes for optimal viewing in any environment
- Realistic iPhone mockup frame with authentic notch and bezels creates an immersive portfolio showcase experience
- Album artwork displayed prominently with rounded corners and shadow effects for visual depth and polish
- Large, tactile controls (48px play button, 32px auxiliary buttons) optimized for touch interaction on mobile devices
- Prominent circular play button with primary accent color serves as the visual focal point
- Full-screen playlist overlay on mobile with smooth slide-in animation from the right side
- Consistent spacing and sizing create a balanced, professional appearance optimized for the iPhone viewport
- Color changes indicate active states for shuffle, repeat, and like features providing clear visual feedback
- Countdown timer shows remaining time with minus sign, decreasing as the track plays
Use Cases
This component can be adapted for various applications:
- Music streaming applications and platforms
- Podcast players and audio content delivery
- Educational platforms with audio lessons
- Portfolio showcases and component libraries
- Marketing sites with audio demos or samples
- Audio preview features in content management systems
Potential Enhancements
Future iterations could include:
- Audio Visualizations: Real-time waveforms or frequency spectrum display using Web Audio API
- Keyboard Shortcuts: Space for play/pause, arrow keys for seeking, number keys for volume
- Themes: Multiple color schemes and layout options to match different brands
- Enhanced Accessibility: Comprehensive ARIA labels and full screen reader support
- State Persistence: Save playback position, volume, and preferences to localStorage
- Media Session API: Integration with system media controls and lock screen playback
- Expanded Playlist: Support for larger music libraries with search and filtering capabilities