📶 Documentation / VinylCast Radio Player – HTML5 + PWA

📌 Introduction

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.

🧧 Project Structure

The project consists of the following files and folders:

🔧 Configuration

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.

📬 Installation

  1. Upload all project files to your web server or hosting
  2. Ensure your site uses HTTPS (required to install the app as a PWA)
  3. Access index.html through a browser
  4. From a mobile or desktop browser, users will be able to install the application as an app

🛡 Security

🎯 Customize the <head> for SEO and Social Media

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.

🔄 Elements you should modify:

🌐 For correct sharing on social media:

🎨 Custom icons:

📌 Example of a customized head section:

<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.

🤵 Author

Edwin Giovani Macz Bac
edwingiovani2009@gmail.com
📫 WhatsApp: +502 4547 2055