Features
Compatible with Shoutcast 1/2 & Icecast 2.
Built in pure HTML5, CSS, jQuery. No Server-side script needed.
Works on websites with ssl(https) enabled.
Direct requests to Server via JSONP. Fast and automatic update.
Optimized to look great on Desktop, Tablet and Phone!
Choose any Material Design color for both background and play/pause button.
iTunes API is used to retrieve all the album artwork.
Show your current listeners, stream quality, genre, etc...
Display the last songs played on your radio station.
Smooth animated transitions between songs.
Ready for English, Spanish, Portugese, French and Italian.
Play more than one stream on the same page.
Share your Radio on Facebook, Twitter & Google Plus.
100% Guaranteed support. Updates and improvements in the future.
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 |
| 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://cors-anywhere.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 |
| bg: | Background for the player | red, pink, purple, deeppurple, indigo, blue, lightblue, cyan, teal, green, lightgreen, lime, yellow, amber, orange, deeporange, brown, grey, bluegrey, darkblue, black, white |
String |
| accent: | Accent color applied to play/pause button and slider thumb | red, pink, purple, deeppurple, indigo, blue, lightblue, cyan, teal, green, lightgreen, lime, yellow, amber, orange, deeporange, brown, grey, bluegrey, darkblue, black |
String |
| vertical_layout: | Sets vertical layout (Big artwork) | false, true | Boolean |
| blur: | Add a blur effect with the album cover to the player background | true, false | Boolean |
| blur_opacity: | Blur effect opacity (if enabled) | 0.01 - 1 | Integer |
| lang: | Prefered language for Server Info | en, es, pt, fr, it | String |
| 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
Then include myCast files
<script src="js/myCast.min.js"></script> (within <body> tag just before calling player script)
Add a parent div to the body of your html page, with a unique id and myCast class
Finally call the script in the body of your html page
<script>
$("#stream1").myCast({
URL: "http://ip:port",
version: "2",
});
</script>
Examples
$("#stream1").myCast({
URL: "http://s01.webradio-solutionscast.com:4060",
version: "2"
});
$("#stream2").myCast({
URL: "http://149.56.195.94:8416",
version: "icecast",
mount_point: "autodj",
bg: "green",
accent: "amber",
lang: "es",
blur: true,
blur_opacity: 0.16
});
$("#stream3").myCast({
URL: "http://s01.webradio-solutionscast.com:4060",
version: "2",
bg: "purple",
accent: "pink",
vertical_layout: true
});