HTML5 Icecast/Shoutcast/AzuraCast Full Page Radio Player with PWA Support

• 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!

Demo Screenshots

Documentation.

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; 

Change Logo.

Open The img folder and add your logo named "cover.png"

Installation

Just put the files in your server or use Free Hosting

Free Hosting

Progressive Web App (PWA) Support

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.

Configuring Radio Name and Colors

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:

1. Open the manifest.json file in your project.
2. Locate the "name" field and replace 'Your Radio Name' with the name of your radio.
3. 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"
    }
  ]
}

Supported Hosting Types

• Azuracast

Supported API/Data Sources

• Azuracast

Keyboard Controls

• M - mute/unmute
• P and space - play/pause
• arrow up and arrow down - increase/decrease volume
• 0 to 9 - volume percent

Feedback

If you have any feedback, please reach out to me at contact@jailson.es

License

MIT

Credits

• gsavio/player-shoutcast-html5
• joeyboli/RadioPlayer