- Current song
- Historic of played songs ( added option to show or hide history song )
- Cover art of the current song
- Lyrics of the current song (Vagalume API)
- Responsive design
- Now available as a Progressive Web App (PWA) for enhanced user experience!
Open The Script.js file and edit the lines Below.
// RADIO NAME
const RADIO_NAME = 'Your Radio';
// Change Azuracast Stream URL Here, .
const URL_STREAMING = 'https://azuracp.web-radios.eu/listen/treloparea/stream';
//API URL Azuracast Now Playing
const API_URL = 'https://azuracp.web-radios.eu/api/nowplaying/2';
// Visit https://api.vagalume.com.br/docs/ to get your API key
const API_KEY = "18fe07917957c289983464588aabddfb";
// Variable to control history display: true = display / false = hides
let showHistory = true;
Open The img folder and add your logo named "cover.png"
Just put the files in your server or use Free Hosting
Now you can install the Radio Player as a Progressive Web App (PWA) to your device for an enhanced experience! Simply visit the website on a supported browser and follow the prompts to install it.
To configure the name of your radio and the colors used in the Progressive Web App (PWA), you need to edit the manifest.json
file:
- Open the
manifest.json
file in your project. - Locate the
"name"
field and replace'Your Radio Name'
with the name of your radio. - If desired, you can also customize the
"background_color"
and"theme_color"
fields to match your radio's branding colors.
Here's an example:
{
"name": "Your Radio Name",
"short_name": "Radio Player",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff", // Customize this color to match your branding
"theme_color": "#ffffff", // Customize this color to match your branding
"icons": [
{
"src": "img/cover.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
- Azuracast
- Azuracast
M
- mute/unmuteP
andspace
- play/pausearrow up
andarrow down
- increase/decrease volume0 to 9
- volume percent
If you have any feedback, please reach out to me at contact@jailson.es