tejas242 / music-player-web

A simple and visually appealing music player web application created using HTML, CSS, and JavaScript. Play your favorite songs with a beautiful user interface. Powered by Unsplash for dynamic album cover art.

Music Player Web Application

A simple and visually appealing music player web application created using HTML, CSS, and JavaScript. Play your favorite songs with a beautiful user interface. Powered by Unsplash for dynamic album cover art.

Features

• Play and pause music
• Navigate between songs
• Visual progress bar with time display
• Dynamic album cover art from Unsplash
• Responsive design for various screen sizes

Demo

You can try the Music Player live here.

Installation

To run this music player locally on your machine, follow these steps:

1. Clone this repository to your local machine.

   git clone <repoistory URL>

2. Open the project folder and launch the index.html file in your IDE (for example Visual Studio Code)

   

3. Click on "Go Live" to launch the page on your web browser.

   

4. Now, the home page of the app loads up on your browser on your local host.

   

Usage

Click the play/pause button to control playback. Use the previous and next buttons to navigate between songs. See the progress of the current song on the progress bar. Enjoy beautiful album cover art fetched from Unsplash.

Contributing

Contributions are welcome! Here's how you can contribute:

1. Check out the list of open issues for tasks that need attention.
2. Fork this repository and create a new branch for your feature or bug fix.
3. Make your changes and submit a pull request. Be sure to follow our contribution guidelines.
4. Join the discussion on any issues or pull requests that interest you. Your feedback is valuable.

Code of Conduct

Please review and adhere to our Code of Conduct to create a positive and inclusive community for all contributors.

License

This project is open-source and available under the MIT License.

Acknowledgments

Thanks to Unsplash for providing stunning album cover images.

Roadmap

Here's an expanded roadmap with a variety of tasks for the Music Player project, ranging from very basic to more advanced:

Basic Tasks:

• Change Color Theme:

  • Allow users to switch between different color themes for the user interface.
  • Level: Beginner

• Custom Font Options:

  • Implement options for users to choose from different fonts for the player interface.
  • Level: Beginner

• Volume Control:

  • Add a volume control slider to adjust the audio volume.
  • Level: Beginner

• Lyrics Display:

  • Include a lyrics display area that shows the lyrics of the currently playing song.
  • Level: Intermediate

• Customizable Album Cover Styles:

  • Allow users to customize the style (e.g., borders, shadows) of the album cover image.
  • Level: Beginner

• Playlist Sorting:

  • Enable users to sort their playlists by title, artist, or other criteria.
  • Level: Intermediate

• Social Sharing Integration:

  • Add social media sharing buttons to let users share their currently playing songs on platforms like Twitter or Facebook.
  • Level: Intermediate

Intermediate Tasks:

• Dynamic Backgrounds:

  • Implement dynamic backgrounds that change based on the currently playing song's mood or genre.
  • Level: Intermediate

• Offline Mode:

  • Create a feature that allows users to download songs for offline listening.
  • Level: Intermediate

• Equalizer Settings:

  • Add an equalizer with presets for different audio enhancements.
  • Level: Intermediate

• Song Recommendations:

  • Integrate with music streaming services to provide song recommendations based on the user's listening history.
  • Level: Intermediate

• Search Functionality:

  • Implement a search bar for users to quickly find songs in their playlists.
  • Level: Intermediate

Advanced Tasks:

• Voice Commands:

  • Enable voice commands to control the music player (e.g., "Play next song").
  • Level: Advanced

• Offline Lyrics Sync:

  • Allow users to sync and view lyrics even in offline mode.
  • Level: Advanced

• Visualizer Effects:

  • Add visualizer effects that respond to the music's beat and frequency.
  • Level: Advanced

• Integration with Music APIs:

  • Integrate your music player with external music APIs (e.g., Spotify, Last.fm) for additional features and data.
  • Level: Advanced

• Advanced Cross-Platform Compatibility:

  • Ensure your music player works seamlessly on various operating systems and browsers.
  • Level: Advanced

• User Profiles and Personalization:

  • Create user profiles to offer personalized recommendations and playlists.
  • Level: Advanced

Contact

If you have any questions, feedback, or suggestions, feel free to reach out.

Build Status

music-player-web's Issues

Code Organization

Breaking down the code into multiple files/modules to improve readability and maintainability. For instance, separate the audio-related functions, UI-related functions, and event listeners into different modules.

Here's a high-level code structure that separates concerns into modules:

- index.html
- style.css
- README.md
- js/
  - audio.js (handles audio-related functions)
  - ui.js (manages UI components)
  - main.js (main application logic)
  - utils.js (utility functions)
  - tests/ (unit tests)
- images/ (for album covers and dynamic backgrounds)
- songs/ (for audio files)

Custom Font Options

Allow users to choose from different fonts for the player interface. Provide a selection of fonts to pick from.

Difficulty: Beginner

Code Documentation

Create or update code documentation to make it more clear and comprehensive. Include comments and explanations for key functions.

Difficulty: Beginner

Visualizer Effects

Add visualizer effects that respond to the music's beat and frequency, enhancing the visual experience.
The effects can be added to the background of the app.

Difficulty: Advanced

Bug Fix - Song Progress Bar

Fix a bug where the song progress bar occasionally displays incorrect progress. Investigate and resolve this issue.

Difficulty: Beginner

[Bug] : footer section overlapping with body section

Description
The footer section of the website is overlapped with the body section of the website

Expected behaviour
The footer section does't not overlapp with the body section

#screenshot

Customizable Album Cover Styles

Allow users to customize the style (e.g., borders, shadows) of the album cover image.

Difficulty: Intermediate

Create Volume Control

Add a volume control slider to adjust the audio volume. Make sure it's easily accessible and provides a visual indication of the volume level.

Difficulty: Beginner

Implement Keyboard Shortcuts

Add keyboard shortcuts for play/pause, next, and previous actions to enhance user experience. For example, use the spacebar for play/pause and arrow keys for navigation.

Difficulty: Beginner

Implement Social Sharing

Add social media sharing buttons to let users share their currently playing song on platforms like Twitter or Facebook.

Difficulty: Beginner

Integration with Music APIs

Integrate your music player with external music APIs (e.g., Spotify, Last.fm) for additional features and data.

Difficulty: Advanced

Dynamic Backgrounds

Implement dynamic backgrounds that change based on the currently playing song's mood or genre.

Difficulty: Intermediate

Improve UI Design

Enhance the user interface by improving the design and layout. Focus on making it visually appealing and user-friendly.

Difficulty: Intermediate

Responsive Design

Optimize the CSS for mobile devices, ensuring that the music player works well on smaller screens.

Difficulty: Beginner

Change Color Theme

Allow users to switch between different color themes for the user interface. Provide at least three theme options, and ensure a smooth transition between them.

Difficulty: Beginner