https://github.com/detalhe/react-radio-player
Modern radio player for Zeno.fm stations. Live streaming, real-time updates, and dynamic UI. Built with React, Vite and Tailwind CSS.
https://github.com/detalhe/react-radio-player
react tailwindcss vite zeno
Last synced: 6 months ago
JSON representation
Modern radio player for Zeno.fm stations. Live streaming, real-time updates, and dynamic UI. Built with React, Vite and Tailwind CSS.
- Host: GitHub
- URL: https://github.com/detalhe/react-radio-player
- Owner: detalhe
- Created: 2024-07-03T14:43:59.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-04T23:57:01.000Z (about 1 year ago)
- Last Synced: 2025-03-24T03:53:07.905Z (7 months ago)
- Topics: react, tailwindcss, vite, zeno
- Language: JavaScript
- Homepage: https://react-radio-demo.netlify.app
- Size: 129 KB
- Stars: 5
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Radio Player
A modern, responsive web radio player for Zeno.fm stations, built with React, Vite, and Tailwind CSS.
## Features
- 🎶 Live streaming audio playback (supports Zeno Radio stations)
- 🔄 Real-time metadata updates
- 🖼️ Dynamic album art fetching
- 📅 Daily schedule display
- 🔊 Volume control with visual feedback
- 🎚️ Play/Pause functionality
- 🎨 Sleek, dark-themed UI
- 🎛️ Media Session API integration for system-level media controls
## APIs Used
- Zeno.fm API for audio streaming and metadata
- StreamAfrica API for album art fetching
- Media Session API for system-level media control integration
## Setup and Running the Project
1. Ensure you have Node.js installed on your machine
2. Clone the repository
3. Open a terminal in the project directory
4. Run `npm install` to install dependencies
5. Create a `.env` file in the root directory with the following content:
```env
VITE_STREAM_URL=https://stream.zeno.fm/your_station_id
VITE_METADATA_URL=https://api.zeno.fm/mounts/metadata/subscribe/your_station_id
VITE_ALBUM_ART_API_URL=https://api-v2.streamafrica.net/musicsearch
VITE_DEFAULT_ALBUM_ART=https://placehold.co/400?text=song
```
Replace `your_station_id` with the actual Zeno.fm station ID you want to use.
> [!IMPORTANT]
> The `.env` file is crucial for the application to function correctly. It contains the URLs for the audio stream, metadata updates, album art API, and a default album art image. Make sure to keep this file secure and do not commit it to version control.
6. Run `npm run dev` to start the development server
7. Open your browser and navigate to `http://localhost:5173` (or the port shown in your terminal)
> [!TIP]
> If you're having issues with the audio stream or metadata updates, double-check your Zeno.fm station ID in the `.env` file.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request. :)