This project is a modern, responsive online radio player optimized as a Progressive Web Application (PWA). It allows streaming radio broadcasts, displaying dynamic information about the current track (if you use an API), and customizing it with your social networks.
The project consists of the following files and folders:
Edit the js/script.js file to customize your player. This file contains the radioConfig object:
const radioConfig = {
streamUrl: 'YOUR_STREAM',
streamInfoUrl: 'YOUR_API',
defaultCover: 'img/logo.png',
stationLogo: 'img/envivo.gif',
stationName: 'Radio Name',
stationSlogan: 'Slogan',
websiteUrl: 'https://yoursite.com',
facebookUrl: 'https://facebook.com/yourradio',
twitterUrl: 'https://x.com/yourradio',
whatsappNumber: '50200000000',
instagramUrl: '',
tiktokUrl: ''
};
Note: The streamInfoUrl field is optional. Use it only if you have an API that returns the current track's title and artist.
index.html through a browserstreamInfoUrl, consider validating it and protecting it with CORS or authentication
To make your player look professional and rank well in search engines like Google and on social platforms like Facebook or X (Twitter), edit the content inside the <head> tag in the index.html file.
<title>: Change the page title to your radio or project name.description: Write a clear and appealing description of your station or site.keywords: Include relevant keywords separated by commas.author: Put your name or brand name.og:image and twitter:image: Use a valid URL (ideally 1200x630 px) to show a preview when sharing your site.og:url: Change to your real domain, e.g., https://mysite.com/.favicon and apple-touch-icon icons with your own inside the /img folder.<title>My Online Radio – Listen live 24/7</title>
<meta name="description" content="Listen to music, news, and more live from your browser." />
<meta name="keywords" content="online radio, live station, streaming" />
<meta name="author" content="My Radio Station" />
<meta property="og:image" content="https://mysite.com/img/preview.png" />
<meta property="og:url" content="https://mysite.com/" />
<link rel="icon" href="img/favicon.ico" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
If you want to preview how your site will look on social media, you can use tools like metatags.io.
Edwin Giovani Macz Bac
✅ edwingiovani2009@gmail.com
📫 WhatsApp: +502 4547 2055