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.

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.
• index.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:

   git checkout -b feature-name

3. Commit your changes:

   git commit -m 'Add some feature'

4. Push to the branch:

   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 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.