Git Product home page Git Product logo

jailsonsb2 / radioplayer Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 1.0 1.04 MB

HTML5 Internet Radio Web Player compatible with any Stream and with PWA Support. Displays currently playing artists and songs, automatically fetches song covers via API.

Home Page: https://allstream.netlify.app/

CSS 22.98% HTML 18.32% JavaScript 46.08% PHP 12.62%
azuracast azuracastplayer html5 html5audio html5player icecast icecast2 internet-radio-player pwa pwa-app

radioplayer's Introduction

HTML5 Icecast/Shoutcast Full Page Radio Player with PWA Support

Demo Screenshots

Demo Screenshot

  • Current song
  • Historic of played songs
  • 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!

Documentation.

Open The Script.js file and edit the lines Below.

// RADIO NAME
const RADIO_NAME = 'Your Radio Name';

// Change Stream URL Here, Supports, ICECAST, ZENO, SHOUTCAST, RADIOJAR and any other stream service.
const URL_STREAMING = 'https://stream.zeno.fm/yn65fsaurfhvv';

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

Deploy with Vercel Deploy to Netlify

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

  • Icecast / Shoutcast
  • Zeno Radio
  • RadioJar
  • Azuracast
  • Centova Cast
  • Everest Cast
  • MediaCP
  • Sonic Panel

Supported API/Data Sources

  • Apple Music / Itunes
  • Deezer
  • Spotify
  • Azuracast
  • MediCP
  • CentovaCast

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 [email protected]

License

MIT

Credits

radioplayer's People

Contributors

jailsonsb2 avatar

Stargazers

 avatar  avatar

Watchers

 avatar

radioplayer's Issues

Error

Good morning, I think something is wrong. I'm getting this error both when I installed it on my server and on the test link.
Could you help, please?

error

script.js

Hi again, I think something changed in script.js because it's not getting any artwork

new url

Hi, sorry, but new URL do not works for me
2024-07-17_10-24-52

covers not show

covers not show, I tried both spotify and deezer providers

AzuraCast Script with API Service

hello!
how can i use azuracast only to get the song info, like artist and music and get the artwork from an api service like itunes por exemple, ignoring the artwork coming from azuracast.

is that possible?

Api.php error

Hi Jailson, I think something is wrong in the api.php file. When I try to open a URL I always get the error shown in the attached image. I've already tried it with other links like the one on your demo radio and it doesn't work either.
api_error

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.