This HTML5 radio player offers a complete and customizable solution for integrating a sleek and responsive audio player directly into your web pages. With features like an audio visualizer, song history, synchronized lyrics, and social media integration, you can elevate your website's audio experience.
- Audio playback with intuitive controls for play/pause, volume, and station switching.
- Dynamic audio visualizer that reacts to the music in real time.
- Station list with thumbnails and information.
- Song history displaying recently played tracks.
- Synchronized lyrics (automatic search via API).
- Integrated social sharing for Facebook, Twitter, and WhatsApp.
- Links to mobile applications (Android and iOS).
- Integration with music information APIs to display real-time track data.
-
Download the player files:
- Download or clone this repository.
-
Configure your radio stations:
- Open the
config.js
file. - Edit the
window.streams.stations
variable and replace the example stations with your own. - For each station, fill in the information: name, hash, description, URLs for logo, album art, background cover, audio stream URL, social links, app links, etc.
- Important: Make sure that the paths for images (
logo
,album
,cover
) are correct, considering the location of theconfig.js
file on your website.
- Open the
-
Integrate the player into your page:
- Copy the HTML code from the
index.html
file and paste it into the desired location on your page, usually in the footer.
- Copy the HTML code from the
- Images: Replace the images in the
assets
folder with your own. - Colors: Customize the player's colors by editing the
css/custom.css
file. - Layout: Modify the player's layout by editing the
player.html
file. - Functionality: Adapt the player's behavior by editing the
js/main.js
file.
- If you have any questions or issues, please open an issue in the GitHub repository.
- Contributions are welcome! Feel free to submit pull requests with improvements, bug fixes, or new features.