Compatible with both Shoutcast 1/2 & Icecast 2.
Built in pure HTML5, CSS, jQuery. No Server-side script needed.
Direct requests to Server via JSON. Fast and automatic update.
Optimized to look great on Desktop, Tablet and Phone!
iTunes API is used to retrieve all the album artwork.
Display the last songs played on your radio station.
Scrolling songtitle effect and album cover animation!
Volume slider on desktop and mute/unmute button on mobile.
Show your radio current listeners (optional).
Play more than one stream on the same page.
Share easily your Radio on Facebook & Twitter.
100% Guaranteed support, updates and improvements.
Setting | Description | Value | Type |
---|---|---|---|
URL: | URL to your radio stream | http://ip:port | String |
version: | Version of Shoutcast (1/2) or Icecast | 1, 2, icecast | String |
stream_id: | The stream id of your DNAS 2 Server | 1, 2, 3, etc.. | Integer |
mount_point: | Mount Point of your Icecast stream | path/to/stream | String |
type: | Used to correct play of DNAS 1 Stream (don't change it) | /;type=mp3 | String |
streampath: | The stream path to your DNAS 2 Server | /stream?icy=http | String |
enable_cors: | For Shoutcast v2 users. Set to true if your website is https | true, false | Boolean |
cors: | Cors proxy (don't touch it) | https://shoutcastapps.herokuapp.com | String |
artwork: | Display album artwork. If set to false, logo will be shown. | true, false | Boolean |
logo: | This image will be used as album cover fallback | pathto/your/logo.jpg | String |
servertitle: | Shoutcast v1 Server Title | My Radio Title | String |
show_listeners: | Show/Hide current listeners | true, false | Boolean |
src: | Used for play/pause function (leave it blank) | none | Empty |
volume: | Defines the initial volume level | 0.01 - 1 | Integer |
autoplay: | Play radio stream on page load | true, false | Boolean |
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>Then include iCast files
<link href="css/icast.min.css" type="text/css" rel="stylesheet"> <script src="js/icast.min.js"></script>Add a parent div to the body of your page, wherever you want the player to appear
<div class="icast" id="stream1"></div>Finally call the script on your html page, at the end of the body tag
<script> $("#stream1").icast({ URL: "http://ip:port", version: "2" }) </script>
<script> $("#stream1").icast({ URL: "http://s01.webradio-solutionscast.com:4060", version: "2" }) </script>
<script> $("#stream2").icast({ URL: "http://149.56.195.94:8416", version: "icecast", mount_point: "autodj", show_listeners: false }) </script>