diff --git a/Readme.md b/Readme.md index 7b1d212..480088b 100644 --- a/Readme.md +++ b/Readme.md @@ -1,4 +1,77 @@ -# How to use this? -- Clone the repository -- Navigate to the directory -- start index.html \ No newline at end of file +# Xenon Punk Audio Player + +Welcome to the **Xenon Punk Audio Player** project! This sleek and modern audio player is built using vanilla JavaScript, HTML, and CSS. It features a futuristic Xenon punk design and offers a robust set of functionalities, including a playlist, search functionality, and dynamic audio file uploads. The player is also responsive, ensuring a seamless experience across devices. + +## Features + +- **Dynamic Playlist**: Add, play, pause, stop, and navigate through audio files. +- **Responsive Design**: Ensures a great user experience on both desktop and mobile devices. +- **Search Functionality**: Quickly find songs in the playlist with a built-in search bar. +- **Upload Local Audio Files**: Temporarily upload and play local audio files (until the page is refreshed). +- **Animation**: Displays an animation when audio is playing. +- **Now Playing Indicator**: Shows the name of the currently playing track. +- **Looping and Shuffling**: Options to loop the entire playlist, shuffle songs, or loop a single track. + +## Demo + +Check out the live demo of the Xenon Punk Audio Player [here](https://debajyati.github.io/Xenon-Punk-Audio-Player/). + +## Usage + +### Adding Audio Files + +1. **Upload Audio Files**: + - Click on the `Choose` button located at the top right corner. + - Select one or more audio files from your local device. + - Click on the `Upload` botton. + +2. **Search for Songs**: + - Use the search bar above the playlist to filter songs by name. + +3. **Playback Controls**: + - **Play**: Start playing the selected track. + - **Pause**: Pause the current track. + - **Stop**: Stop the track and reset its position. + - **Prev**: Play the previous track in the playlist. + - **Next**: Play the next track in the playlist. + - **Loop**: Loop the entire playlist. + - **Shuffle**: Shuffle the playlist. + - **Single Loop**: Loop the currently playing track. + +### Playlist and Now Playing + +- **Scrollable Playlist**: The playlist is scrollable when it contains more than 5 tracks. +- **Now Playing**: The name of the currently playing track is displayed at the bottom right corner. + +## Code Structure + +The project is divided into several key files: + +- **index.html**: The main HTML file containing the structure of the audio player. +- **style.css**: Contains all the styles and media queries for responsiveness. +- **script.js**: Main JavaScript file handling the core functionality of the audio player. +- **search.js**: JavaScript file dedicated to the search functionality within the playlist. + +## Contributing + +Contributions to enhance the Xenon Punk Audio Player are cordially welcomed. To contribute: + +1. **Fork the repository**. +2. **Create a new branch** for your feature or bug fix: + ```sh + git checkout -b feature-name + ``` +3. **Commit your changes**: + ```sh + git commit -m 'Add some feature' + ``` +4. **Push to the branch**: + ```sh + git push origin feature-name + ``` +5. **Open a pull request** and describe your changes. + +## License +This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. + +Enjoy using the **Xenon Punk Audio Player**! If you have any questions or feedback, feel free to open an issue or contact me at [my email](kaalpurushdaykon@gmail.com).