🛠️ Technologies Used

Frontend

• HTML5: Semantic markup with audio element
• CSS3: Modern styling with custom properties, Grid, and Flexbox
• JavaScript (ES6+): Vanilla JS for audio control and DOM manipulation

Assets & Resources

• SVG Icons: Custom-designed scalable vector graphics
• Audio Files: MP3 format for cross-browser compatibility
• Images: Optimized JPEG files for album artwork and backgrounds

Development Tools

• Git: Version control
• VS Code: Development environment
• Browser DevTools: Testing and debugging

🚀 Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Local web server (optional, for development)

Installation

1. Clone the repository

   git clone https://github.com/Ayokanmi-Adejola/Music-Player
   cd music-player
   

2. Open the project

   # Option 1: Open directly in browser
   open index.html
   
   # Option 2: Use a local server (recommended)
   python -m http.server 8000
   # or
   npx serve .
   

3. Access the application

   • Direct: Open index.html in your browser
   • Server: Navigate to http://localhost:8000

Quick Start

1. Click the play button to start audio playback
2. Use previous/next buttons to navigate between tracks
3. Click on the progress bar to seek to specific positions
4. Enjoy the responsive design on different devices

📁 Project Structure

music-player/
├── index.html              # Main HTML file
├── resources/              # Assets directory
│   ├── *.svg              # Custom SVG icons
│   ├── *.jpg              # Album artwork and backgrounds
│   ├── *.mp3              # Audio files
│   └── favicon.ico        # Site favicon
├── design/                # Design references
│   ├── Desktop_1350px.jpg # Desktop mockup
│   ├── Tablet_1024px.jpg  # Tablet mockup
│   └── Mobile_412px.jpg   # Mobile mockup
├── thumbnail.jpg          # Project preview image
└── README.md             # Project documentation

📱 Responsive Design

Breakpoints

• Mobile: ≤ 480px
• Small Tablet: 481px - 768px
• Large Tablet: 769px - 1024px
• Desktop: > 1024px

Responsive Features

• Fluid Layout: Adapts to any screen size
• Touch-Friendly: Optimized button sizes for mobile
• Scalable Typography: Responsive font sizes
• Flexible Images: Aspect-ratio maintained across devices
• Optimized Spacing: Contextual padding and margins

🌐 Browser Support

Required Features

• CSS Grid and Flexbox support
• HTML5 Audio API
• ES6+ JavaScript features
• CSS Custom Properties

🤝 Contributing

Development Guidelines

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Code Standards

• Use semantic HTML5 elements
• Follow BEM methodology for CSS classes
• Write clean, commented JavaScript
• Ensure responsive design principles
• Test across multiple browsers

🙏 Acknowledgments

• devChallenges.io - For providing the design challenge
• Design Inspiration - Modern music player interfaces
• Audio Assets - Sample tracks for demonstration
• Community - Feedback and suggestions from fellow developers