Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/debajyati/xenon-punk-audio-player
A convenient audio player in your browser
https://github.com/debajyati/xenon-punk-audio-player
Last synced: 11 days ago
JSON representation
A convenient audio player in your browser
- Host: GitHub
- URL: https://github.com/debajyati/xenon-punk-audio-player
- Owner: Debajyati
- Created: 2024-06-23T20:43:45.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-06-28T12:41:35.000Z (5 months ago)
- Last Synced: 2024-10-18T09:25:25.967Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://debajyati.github.io/Xenon-Punk-Audio-Player/
- Size: 26 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# 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.
- **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:
```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]([email protected]).