Features


Shoutcast & Icecast

Compatible with both Shoutcast 1/2 & Icecast 2.

Native Code

Built in pure HTML5, CSS, jQuery. No Server-side script needed.

Fast Data Gathering

Direct requests to Server via JSON. Fast and automatic update.

Responsive Design

Optimized to look great on Desktop, Tablet and Phone!

Album Artwork

iTunes API is used to retrieve all the album artwork.

Song History

Display the last songs played on your radio station.

Animated

Scrolling songtitle effect and album cover animation!

Smart Volume

Volume slider on desktop and mute/unmute button on mobile.

Current Listeners

Show your radio current listeners (optional).

Multiple Instances

Play more than one stream on the same page.

Social Share

Share easily your Radio on Facebook & Twitter.

Support & Updates

100% Guaranteed support, updates and improvements.

Settings

Setting Description Value Type
URL: URL to your radio stream http://server: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
cors: Cors proxy (don't touch it) https://cors-anywhere.herokuapp.com String
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


Installation

First make sure jQuery is include, if not, include it
<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>

Examples

Shoutcast v2 Server

<script>
    $("#stream1").icast({
        URL: "http://s01.webradio-solutionscast.com:4100",
        version: "2"
    })
</script>


Icecast Server

<script>
    $("#stream1").icast({
        URL: "http://149.56.195.94:8416",
        version: "icecast",
        mount_point: "autodj",
        show_listeners: false
    })
</script>
For support, customization or freelance work please contact me at
shoutcastapps@gmail.com