s
BIN
.DS_Store
vendido
178
README.md
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
A modern, responsive web-based radio player with a beautiful Spotify-inspired interface. Stream your favorite radio station with real-time song information, lyrics, and playback history.
|
A modern, responsive web-based radio player with a beautiful Spotify-inspired interface. Stream your favorite radio station with real-time song information, lyrics, and playback history.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
## ✨ Features
|
## ✨ Features
|
||||||
|
|
||||||
@@ -14,93 +14,37 @@ A modern, responsive web-based radio player with a beautiful Spotify-inspired in
|
|||||||
- **📚 Playback History**: Shows up to 5 recently played songs
|
- **📚 Playback History**: Shows up to 5 recently played songs
|
||||||
- **🎛️ Volume Control**: Precise volume control with keyboard shortcuts
|
- **🎛️ Volume Control**: Precise volume control with keyboard shortcuts
|
||||||
- **⌨️ Keyboard Shortcuts**: Full keyboard navigation support
|
- **⌨️ Keyboard Shortcuts**: Full keyboard navigation support
|
||||||
- **🎨 Dynamic Artwork**: Album covers with loading animations
|
|
||||||
- **🔊 Media Session**: Integration with browser media controls
|
|
||||||
|
|
||||||
## 🚀 Quick Start
|
## 🚀 Quick Start
|
||||||
|
|
||||||
### Prerequisites
|
|
||||||
|
|
||||||
- A modern web browser (Chrome, Firefox, Safari, Edge)
|
|
||||||
- A radio stream URL
|
|
||||||
- (Optional) Vagalume API key for lyrics
|
|
||||||
|
|
||||||
### Installation
|
|
||||||
|
|
||||||
1. **Clone the repository**
|
1. **Clone the repository**
|
||||||
```bash
|
```bash
|
||||||
git clone https://github.com/yourusername/radio-player.git
|
git clone https://github.com/yourusername/radio-player.git
|
||||||
cd radio-player
|
cd radio-player
|
||||||
```
|
```
|
||||||
|
|
||||||
2. **Install dependencies** (if using npm/pnpm)
|
2. **Configure your radio stream**
|
||||||
```bash
|
|
||||||
pnpm install
|
|
||||||
```
|
|
||||||
|
|
||||||
3. **Configure your radio stream**
|
|
||||||
- Open `js/script.js`
|
- Open `js/script.js`
|
||||||
- Update the `URL_STREAMING` constant with your stream URL
|
- Update the `URL_STREAMING` constant with your stream URL
|
||||||
- Update the `API_URL` with your metadata API endpoint
|
- Get your API endpoint from [RadioAPI.me](https://radioapi.me)
|
||||||
|
|
||||||
4. **Serve the files**
|
3. **Serve the files**
|
||||||
```bash
|
```bash
|
||||||
# Using Python
|
|
||||||
python -m http.server 8000
|
python -m http.server 8000
|
||||||
|
|
||||||
# Using Node.js
|
|
||||||
npx serve .
|
|
||||||
|
|
||||||
# Using PHP
|
|
||||||
php -S localhost:8000
|
|
||||||
```
|
```
|
||||||
|
|
||||||
5. **Open in browser**
|
4. **Open in browser**
|
||||||
```
|
```
|
||||||
http://localhost:8000
|
http://localhost:8000
|
||||||
```
|
```
|
||||||
|
|
||||||
## ⚙️ Configuration
|
## ⚙️ Configuration
|
||||||
|
|
||||||
### Stream Configuration
|
|
||||||
|
|
||||||
Edit `js/script.js` to configure your radio stream:
|
Edit `js/script.js` to configure your radio stream:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// Change Stream URL Here
|
|
||||||
const URL_STREAMING = "https://your-stream-url.com/stream"
|
const URL_STREAMING = "https://your-stream-url.com/stream"
|
||||||
|
const API_URL = "https://prod-api.radioapi.me/metadata/YOUR-API-KEY"
|
||||||
// API endpoint for metadata
|
|
||||||
const API_URL = "https://your-api-endpoint.com/metadata"
|
|
||||||
|
|
||||||
// Vagalume API key for lyrics (optional)
|
|
||||||
const API_KEY = "your-vagalume-api-key"
|
|
||||||
```
|
|
||||||
|
|
||||||
### Supported Stream Types
|
|
||||||
|
|
||||||
- **Icecast**: `http://icecast.server.com:8000/stream`
|
|
||||||
- **Shoutcast**: `http://shoutcast.server.com:8000/stream`
|
|
||||||
- **Radiojar**: `https://stream.radiojar.com/stream`
|
|
||||||
- **Zeno**: `https://zeno.fm/stream`
|
|
||||||
|
|
||||||
### API Configuration
|
|
||||||
|
|
||||||
The player expects a JSON API response with the following structure:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"title": "Song Title",
|
|
||||||
"artist": "Artist Name",
|
|
||||||
"art": "https://album-art-url.com/cover.jpg",
|
|
||||||
"history": [
|
|
||||||
{
|
|
||||||
"song": "Previous Song",
|
|
||||||
"artist": "Previous Artist",
|
|
||||||
"artwork": "https://previous-artwork-url.com/cover.jpg"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## 🎮 Keyboard Shortcuts
|
## 🎮 Keyboard Shortcuts
|
||||||
@@ -115,29 +59,7 @@ The player expects a JSON API response with the following structure:
|
|||||||
|
|
||||||
## 🎨 Customization
|
## 🎨 Customization
|
||||||
|
|
||||||
### Styling
|
To change the number of history items displayed, edit `js/script.js` and modify the `HISTORY_ITEMS_COUNT` constant.
|
||||||
|
|
||||||
The player uses CSS custom properties for easy theming. Edit `css/style.css` to customize:
|
|
||||||
|
|
||||||
```css
|
|
||||||
:root {
|
|
||||||
--primary-color: #1db954;
|
|
||||||
--secondary-color: #191414;
|
|
||||||
--text-color: #ffffff;
|
|
||||||
--background-color: #121212;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### History Items
|
|
||||||
|
|
||||||
To change the number of history items displayed:
|
|
||||||
|
|
||||||
1. Edit `js/script.js`
|
|
||||||
2. Modify the `HISTORY_ITEMS_COUNT` constant in `initializeHistoryItems()`
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const HISTORY_ITEMS_COUNT = 10 // Change from 5 to desired number
|
|
||||||
```
|
|
||||||
|
|
||||||
## 📱 Browser Support
|
## 📱 Browser Support
|
||||||
|
|
||||||
@@ -146,104 +68,40 @@ const HISTORY_ITEMS_COUNT = 10 // Change from 5 to desired number
|
|||||||
- ✅ Safari 12+
|
- ✅ Safari 12+
|
||||||
- ✅ Edge 79+
|
- ✅ Edge 79+
|
||||||
|
|
||||||
## 🔧 Development
|
## 🔧 Project Structure
|
||||||
|
|
||||||
### Project Structure
|
|
||||||
|
|
||||||
```
|
```
|
||||||
radio-player/
|
radio-player/
|
||||||
├── css/
|
├── css/ # Stylesheets
|
||||||
│ ├── animate.css # Animation library
|
|
||||||
│ ├── bootstrap.min.css # Bootstrap framework
|
|
||||||
│ ├── font-awesome.min.css # Icon library
|
|
||||||
│ └── style.css # Custom styles
|
|
||||||
├── fonts/ # Font Awesome fonts
|
├── fonts/ # Font Awesome fonts
|
||||||
├── img/ # Images and artwork
|
├── img/ # Images and artwork
|
||||||
├── js/
|
├── js/ # JavaScript files
|
||||||
│ ├── bootstrap.min.js # Bootstrap JavaScript
|
|
||||||
│ └── script.js # Main application logic
|
|
||||||
├── index.html # Main HTML file
|
├── index.html # Main HTML file
|
||||||
├── package.json # Dependencies
|
|
||||||
└── README.md # This file
|
└── README.md # This file
|
||||||
```
|
```
|
||||||
|
|
||||||
### Key Functions
|
|
||||||
|
|
||||||
- `Page()` - Handles UI updates and DOM manipulation
|
|
||||||
- `Player()` - Manages audio playback and controls
|
|
||||||
- `getStreamingData()` - Fetches metadata from API
|
|
||||||
- `initializeHistoryItems()` - Dynamically generates history items
|
|
||||||
|
|
||||||
## 🌐 API Integration
|
## 🌐 API Integration
|
||||||
|
|
||||||
### Vagalume Lyrics API
|
This player uses [RadioAPI.me](https://radioapi.me) for metadata. Get your API endpoint from their service.
|
||||||
|
|
||||||
To enable lyrics functionality:
|
For lyrics functionality, get a Vagalume API key from [Vagalume API](https://api.vagalume.com.br/docs/).
|
||||||
|
|
||||||
1. Visit [Vagalume API](https://api.vagalume.com.br/docs/)
|
|
||||||
2. Get your API key
|
|
||||||
3. Update the `API_KEY` constant in `js/script.js`
|
|
||||||
|
|
||||||
### Custom Metadata API
|
|
||||||
|
|
||||||
The player expects a REST API endpoint that returns JSON metadata. Implement your own API or use services like:
|
|
||||||
|
|
||||||
- RadioAPI.me
|
|
||||||
- Radio Browser API
|
|
||||||
- Custom Icecast metadata parser
|
|
||||||
|
|
||||||
## 🐛 Troubleshooting
|
## 🐛 Troubleshooting
|
||||||
|
|
||||||
### Common Issues
|
|
||||||
|
|
||||||
**Stream not playing:**
|
|
||||||
- Check if the stream URL is accessible
|
|
||||||
- Verify CORS settings on your server
|
|
||||||
- Ensure the stream format is supported
|
|
||||||
|
|
||||||
**Metadata not updating:**
|
|
||||||
- Verify API endpoint is working
|
|
||||||
- Check browser console for errors
|
- Check browser console for errors
|
||||||
- Ensure API response format matches expected structure
|
- Verify stream URL is accessible
|
||||||
|
- Ensure API endpoint is working
|
||||||
**Lyrics not showing:**
|
|
||||||
- Verify Vagalume API key is valid
|
|
||||||
- Check if song/artist exists in Vagalume database
|
|
||||||
- Ensure API requests are not blocked by CORS
|
|
||||||
|
|
||||||
### Debug Mode
|
|
||||||
|
|
||||||
Enable debug logging by opening browser console and looking for:
|
|
||||||
- API response data
|
|
||||||
- Stream connection status
|
|
||||||
- Error messages
|
|
||||||
|
|
||||||
## 📄 License
|
## 📄 License
|
||||||
|
|
||||||
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
MIT License
|
||||||
|
|
||||||
## 🤝 Contributing
|
## 🤝 Contributing
|
||||||
|
|
||||||
1. Fork the repository
|
1. Fork the repository
|
||||||
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
|
2. Create a feature branch
|
||||||
3. Commit your changes (`git commit -m 'Add amazing feature'`)
|
3. Commit your changes
|
||||||
4. Push to the branch (`git push origin feature/amazing-feature`)
|
4. Open a Pull Request
|
||||||
5. Open a Pull Request
|
|
||||||
|
|
||||||
## 🙏 Acknowledgments
|
|
||||||
|
|
||||||
- [Bootstrap](https://getbootstrap.com/) - CSS framework
|
|
||||||
- [Font Awesome](https://fontawesome.com/) - Icons
|
|
||||||
- [Animate.css](https://animate.style/) - Animations
|
|
||||||
- [Vagalume](https://www.vagalume.com.br/) - Lyrics API
|
|
||||||
|
|
||||||
## 📞 Support
|
|
||||||
|
|
||||||
If you need help or have questions:
|
|
||||||
|
|
||||||
- Create an [issue](https://github.com/yourusername/radio-player/issues)
|
|
||||||
- Check the [documentation](https://github.com/yourusername/radio-player/wiki)
|
|
||||||
- Join our [Discord community](https://discord.gg/your-community)
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
BIN
img/.DS_Store
vendido
Archivo normal
|
Antes Anchura: | Altura: | Tamaño: 20 KiB |
|
Antes Anchura: | Altura: | Tamaño: 12 KiB |
BIN
img/bg-capa.jpg
|
Antes Anchura: | Altura: | Tamaño: 167 KiB |
|
Antes Anchura: | Altura: | Tamaño: 192 KiB |
BIN
img/bg_site.jpg
|
Antes Anchura: | Altura: | Tamaño: 199 KiB |
BIN
img/cover.jpg
|
Antes Anchura: | Altura: | Tamaño: 12 KiB |
BIN
img/fondito.png
|
Antes Anchura: | Altura: | Tamaño: 39 KiB |
BIN
img/imageupdate.png
Archivo normal
|
Después Anchura: | Altura: | Tamaño: 5.3 MiB |
|
Antes Anchura: | Altura: | Tamaño: 4.5 KiB |