Overview
Kast – Extraordinary SHOUTcast HTML5 Sticky Radio Participant on your web site
(jQuery and Zepto Plugin).
Permits you to stream your dwell radio station to your internet guests on Desktops, Tablets and Cellular units.
SHOUTcast unique, Colourful, Responsive design, Totally-customizable, Manufacturing-ready, Cellular-compatible, Contact-friendly, Retina-ready and extra.
Following Google’s Materials Design pointers.
Replace: Spotify API has been changed with lastFM API to repair pictures situation.
Options
- Pure HTML5: HTML5 solely audio participant
- All SHOUTcast Variations: Performs any SHOUTcast station
- SID: Helps a number of streams from a single server
- Multi-format Audio Participant: MP3, OGG, AAC, AAC+ (aacPlus)
- SHOUTcast Unique: for SHOUTcast servers solely, made with love
- Sticky Participant: Runs peacefully at your internet browser nook.
- Popup Participant
- Present and Performed Info: Shows numerous data and stats a couple of SHOUTcast server (server title, present listeners, style, observe title, artist title and extra)
- Album and Artist Artworks: Good album art work retrieving from the most important music database (utilizing lastFM API), or Artist art work as a fallback
- Cellular-compatible with MobileCare: Kast is memory-efficient, runs completely on Cellular units (Premium characteristic)
- Responsive Design: Extremely Responsive Design with Cellular-first method
- Materials Design: Kast UI Following Google’s Materials Design pointers
- Colourful: All Materials Design Colours (Pink, Pink, Purple, Deep Purple, Indigo, Blue, Mild Blue, Cyan, Teal, Inexperienced, Mild Inexperienced, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Gray, Blue Gray, Carolina, Black, White)
- Mild and Darkish Themes: Materials Mild Theme and Materials Darkish Theme
- Dynamic Theme, Colours and Distinction: Dynamically modifications colours and theme based mostly on the dominated colours (shade palette) from the art work picture with additionally shade distinction examine for textual content colours (mild or darkish).
- Anyplace: You’ll be able to insert it anyplace into your internet web page (Non-sticky).
- Cross-browser: Chrome, Firefox, Safari, Opera, Edge, IE
- Contact-friendly and Retina-ready
- Unbiased participant, simply jQuery
- Steady and LiveStream play
- SHOUTcast Direct Metadata through DNAS JSONP Assist
- Multi Language Assist
- HTTPS (SSL) Assist: Stream your radio station in your SSL secured web site (HTTPS)
- Offline Detection: Show message on SHOUTcast server offline or Web connection loss.
- Efficiency-focused: Utterly written in plain JavaScript.
- Straightforward-to-use: Meant for everybody
- Extremely customizable: Straightforward to customise and totally customizable
- Developer API: Wealthy API and occasions for Builders
- Further: Quantity controls (Mute / Unmute), reduce and maximize the participant and extra
Extra Screenshots?
Click on on the Screenshots button to view the gallery.
Stay Preview
Click on on the Stay Preview button to view the demo.
Utilization
First be sure jQuery is included, If not, embrace it
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Then embrace Kast recordsdata
<hyperlink href="path/to/kast.min.css" kind="textual content/css" rel="stylesheet"> <script src="path/to/kast.min.js"></script>
Name it
<script>
$.kast({
host: "myshoutcastserver.com",
port: 8080,
model: 2
})
</script>
Advisable: embrace Google’s Roboto font
<hyperlink href="https://fonts.googleapis.com/css?household=Roboto:400" kind="textual content/css" rel="stylesheet">
Choices
Customise Kast simply the best way you prefer it, Utilization:
$.kast({
host: "...",
port: ...,
optionName: ...
})
- host:
StringServer IP or area titleRequired - port:
IntegerServer port (80 by default) - protocol:
StringServer protocol (“http” by default) - model:
IntegerSHOUTcast model (2 by default) (1 or 2) - sid:
IntegerSHOUTcast V2 server stream ID * If in case you have a number of stations * (1 by default) - statsPath:
StringSHOUTcast V2 path to statistics (“stats” by default) - playedPath:
StringPath to performed listing (“performed” by default) - directStreamURL:
Boolean or StringAdd direct audio stream URL (false by default) - ui:
StringConsumer Interface (“coloured” by default) (“clear” or “coloured”) - theme:
StringMaterials Design theme (“mild” by default) (“darkish”, “mild” or “dynamic”) - colours:
String or ObjectMaterials Design colours ({main: “cyan”, accent: “yellow”} by default) ({main: “shade title”, accent: “shade title”} or “dynamic”)
Coloration names: crimson, pink, purple, deep purple, indigo, blue, mild blue, cyan, teal, inexperienced, mild inexperienced, lime, yellow, amber, orange, deep orange, brown, gray, blue Gray, carolina, black, white
Be aware: Carolina shade it’s an additional shade - startTemplate:
StringBeginning template (“maximized” by default) (“minimized” or “maximized”) - place:
StringParticipant sticky place (“proper” by default) (“proper” or “left”) - container:
StringParticipant container ingredient, class or ID. (“physique” by default) - autoPlay:
BooleanAutoplay radio (false by default) (true or false) - autoUpdate:
Boolean or StringAuto replace data * Present enjoying data, performed listing, server stats * (true by default) (true, false or “all”)
Be aware: “all” Auto updates all the data together with server stats (present listeners, and so on..) - art work:
Boolean or ArrayRetrieve album art work (or artist art work as a fallback) utilizing lastFM API or set a customized picture (true by default) (true, false or [“https://my-website-or-some-cors-website.com/my-custom-artwork.jpg”])
Be aware about customized picture: It’s really helpful so as to add 64×64 (small) picture with customized picture array. i.e [“images/video-games-music.jpg’, ‘images/video-games-music-optional-64×64.jpg”] - statusBar:
BooleanPresent standing bar on the prime of the participant (true by default) (true or false) - minimizeMaximize:
BooleanPresent reduce / maximize button within the standing bar (true by default) (true or false) - muteUnmute:
BooleanPresent mute / unmute button within the standing bar (true by default) (true or false) - startMuted:
BooleanBegin audio muted (false by default) (true or false) - serverInfo:
Boolean, String or ArrayPresent server data / stats within the standing bar or set a customized textual content (false by default) (false, “My Customized textual content”, [“servertitle”, “servergenre”, etc..])
SHOUTcast V1 server data: “currentlisteners”, “streamstatus”, “peaklisteners”, “maxlisteners”, “uniquelisteners”, “bitrate”, “songtitle”
SHOUTcast V2 server data: “averagetime”, “backupstatus”, “bitrate”, “content material”, “currentlisteners”, “maxlisteners”, “peaklisteners”, “servergenre”, “servertitle”, “serverurl”, “songtitle”, “streamhits”, “streamlisted”, “streamlistederror”, “streampath”, “streamstatus”, “streamuptime”, “uniquelisteners”, “model” - performed:
BooleanPresent performed listing (true by default) (true or false) - currentTrack:
Boolean or StringPresent present observe title or set a customized textual content (true by default) (true, false, “My Monitor Title”, and so on..) - currentArtist:
Boolean or StringPresent present artist title or set a customized textual content (true by default) (true, false, “My Artist Title”, and so on..) - playedTracks:
BooleanPresent SHOUTcast V2 performed observe titles (true by default) (true or false) - playedArtists:
BooleanPresent SHOUTcast V2 performed artist names (true by default) (true or false) - offlineCheck:
BooleanPresent message on SHOUTcast server offline or Web connection loss within the standing bar (true by default) (true or false) - mobileCare:
Boolean or ArrayLight-weight participant for Cellular Gadgets (true by default) (true, false, [“low”], [“medium”], [“high”], [“very high”] or [“ultra”])
Be aware: Kast is all the time responsive design, however MobileCare is totally different, you set it by choosing a grade from low to extremely (modes), and If you wish to customise the max-width * when mobileCare get triggered * set [“medium”, “800px”]. The default max-width is 599px
- false: What you see in Desktop, is what you see in Cellular
- low: (true equal low) Autoplay and offlineCheck might be disabled, Kast will all the time begin minimized and lite auto replace
- medium: Medium high quality art work, Server stats replace within the standing bar might be disabled, Dymanic theme and colours might be dropped to mounted theme/colours and lite auto replace degree 2
- excessive: Art work and performed listing might be disabled
- very excessive: Auto replace and reduce/maximize might be disabled
- extremely: Only a play/pause button. Takes solely 3MB of RAM
- language:
ObjectSet textual content * for Multi-language * ({offlineText: “Quickly Offline”, playedText: “Performed”, unknownTrackText: “Unknown Monitor”, unknownArtistText: “Unknown Artist”} by default) - irrelevantWords:
Boolean or ArrayLet Kast pay attention to some irrelavent phrases inside the present track title to assist Kast get the appropriate art work from lastFM API ([“feat.”, “ft.”, “Feat.”, “Ft.”] by default) (false, [“blah”, “blah.com”, “mumbo jumbo”], and so on..) - skipInfo:
Boolean or Array of objectsSkip data based mostly on observe names or artist names. i.e. skip advert titles (false by default) (false, [{track: ‘track name to skip’, artist: ‘Artist name to skip’}, {track: ‘another track to skip’}], and so on..) - defaultArtwork:
Boolean or ArraySet default album art work, It reveals when art work not discovered. (false by default) (false, [“https://my-website-or-some-cors-website.com/my-default-artwork.jpg”])
Be aware about default picture: It’s really helpful so as to add 64×64 (small) picture with default picture array. i.e [“images/my-default-artwork.jpg’, ‘images/my-default-artwork-optional-64×64.jpg”] - customCheckerInterval:
Boolean or IntegerSet customized stats checker interval in ms (false by default) (false, 7000, 10000, and so on..) - popup:
BooleanAllow Kast popup participant (false by default) (false, true) - popupCSSLink:
StringKast CSS hyperlink for Kast popup participant (’’ by default) (‘http://to-kast-css-link-file.css’) - popupWidth:
IntegerSet popup participant width (380 by default) - popupHeight:
IntegerSet popup participant peak (570 by default) - overHTTPS:
BooleanStream secured SHOUTcast audio for secured HTTPS web sites (experimental) (false by default) (true or false)
Be aware: Presently SHOUTcast serve audio solely via an HTTP protocol. And HTTPS web page ought to solely have HTTPS content material, with overHTTPS, you serve your internet guests a secured stream through the use of a secured HTTPS proxy. - direct:
BooleanFetch SHOUTcast metadata direclty from the servers (false by default) (true or false)
Be aware: Supported from >=2.2 DNAS through JSONP. - betaProxies:
BooleanUse beta proxies to fetch SHOUTcast metadata (false by default) (true or false) - steady:
BooleanAllow steady play (Play/Pause radio) (true by default) (true or false)
API
Kast Developer API
- $.kast(); Begin with default choices
- $.kast(“play”); Play audio
- $.kast(“play”, true); Reload audio and play it
- $.kast(“pause”); Pause audio
- $.kast(“cease”); Cease audio
- $.kast(“mute”); Mute audio
- $.kast(“unmute”); Unmute audio
- $.kast(“reduce”); Reduce participant
- $.kast(“maximize”); Maximize participant
- $.kast(“stats”); Replace the present enjoying data
- $.kast(“stats”, callback); Entry to the present enjoying data
- $.kast(“performed”); Replace the present performed data
- $.kast(“performed”, callback); Entry to the present performed data
- $.kast(“autoUpdate”, “all”); Allow auto replace together with server stats
- $.kast(“autoUpdate”, true); Allow auto replace
- $.kast(“autoUpdate”, false); Disable auto replace
- $.kast(“destroy”); Destroy plugin occasion
Occasions
Kast Developer Occasions, Utilization:
$.kast({
host: "...",
port: ...,
eventName: callback
})
Audio Codecs Assist
- MP3 (audio/mpeg): Chrome (Sure), Firefox (Sure), Safari (Sure), Opera (Sure), IE9+ (Sure), Edge (Sure), Android Browser (Sure), iOS Safari (Sure)
- OGG (audio/ogg): Chrome (Sure), Firefox (Sure), Safari (No), Opera (Sure), IE (No), Edge (No), Android Browser (Sure), iOS Safari (No)
- AAC (audio/aac): Chrome (Sure), Firefox (Sure), Safari (Sure), Opera (Sure), IE9+ (Sure), Edge (Sure), Android Browser (Sure), iOS Safari (Sure)
- AAC+ (audio/aacp): Desktop Chrome Solely (Sure)
Earlier than You Purchase *IMPORTANT
- Not a Music Participant: It’s SHOUTcast Radio Participant, it’s not designed for Music/MP3 playlists
- SHOUTcast Solely: Icecast and different streaming media servers will not be supported
- A number of Servers will not be supported but
- About Steady Play: Steady Play is for Play/Pause or Play/Cease, It’s not for Gapless Radio Playback, so once you navigate from one web page to a different, Kast reloads itself. If you’d like Gapless Radio Playback then you need to use AJAX/Dynamic navigation system
- Autoplay on iOS isn’t supported
- Direct: In case your SHOUTcast server is V2+ and assist direct connection, allow direct.
- SHOUTcast V1 Streams unplayable on Chrome 55.x / Safari 10: SHOUTcast V1 servers are over 10 years previous, they’re operating on deprecated HTTP 0.9. These trendy browsers are breaking the power for the outdated SHOUTcast V1.x servers to be performed with HTML5. Non-Port 80 V1 streams are now not playable. Upgrading to the most recent SHOUTcast V2 ought to resolve your downside.
Learn extra: https://bugs.chromium.org/p/chromium/issues/detail?id=669800
https://www.internet-radio.com/community/threads/latest-chrome-browser-update-v55-breaks-shoutcast-v1-x-html5-players.27560/ - <
![https://my-website-or-some-cors-website.com/my-custom-artwork.jpg”]](https://my-website-or-some-cors-website.com/my-custom-artwork.jpg”]){kind=link}
![https://my-website-or-some-cors-website.com/my-default-artwork.jpg”]](https://my-website-or-some-cors-website.com/my-default-artwork.jpg”]){kind=link}