Garlito.js is a simple shoutcast radio player. You can check the demo version.
You can check both the popup and static version of the player inside the demo folder of this repository
- Include Jquery 3.3.1
- Include Bootstrap 4.2.1
- Include Howler.js
- Include Garlito.js & Garlito.css
<!-- Garlito CSS -->
<link rel="stylesheet" href="css/garlito.min.css">
<!--Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- Jquery 3.3.1 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!-- Howler Lib -->
<script src="js/howler.min.js" ></script>
<!-- Garlito JS -->
<script type="text/javascript" src="js/garlito.min.js"></script>
- To activate the player in your html
<script>
$( "#yourplayer" ).garlitoPlayer({
ip: "x.x.x.x",
port: "9247",
volume: 1,
facebookUrl: "https://facebook.com/fabricradio",
instagramUrl: "https://instagram.com",
radioName : "Fabric Radio",
autoplay: true,
popup:false,
lastFmApiKey:"85d4e735d8374226a892f97260219982",
});
</script>
ip
: (default:''
) Your shoutcast ip adress.port
: (default:''
) Your shoutcast port.protocol
: (default:'http://'
) You can use 'http://' or 'https://' depends on your server.emptyCoverImgUrl
: (default:'img/no-cover.jpg'
) The img used when there is not any cover for the current song.autoplay
: (default:true
) Boolean determining whether the player starts playing automatically or not.volume
: (default:0.5
) That is the default value of the player's volume, you can use among 0 - 1 ( Ex. 0.45 ) .popup
: (default:true
) Boolean determining whether the player is initialising as a popup or static.lastFmApiKey
: (default:''
) That is the last.fm api key you need for the album covers.facebookUrl
: (default:false
) You can add your facebook's url page or whatever.instagramUrl
: (default:false
) You can add your instagram's url page or whatever.logoUrl
: (default:'img/logo.png'
) The default url of the station logo, replace it with your's,radioName
: (default:'Radio Station Name'
) The default name of the station, replace it with your's,listenButtonId
: (default:''
) If you set the popup option as true you should also set this selector to the button pointing.nowPlayingText
: (default:'Now Playing:'
) In case u want to translate it in your language.
- Jquery
- Bootstrap
- Howler.js
Copyright (c) 2019 Aris Papaprodromou
Released under the MIT License.