Kast - Extraordinary SHOUTcast HTML5 Radio Player For JQuery

Kast – Extraordinary SHOUTcast HTML5 Radio Player for jQuery – Material Design

JaguarScript Trusted By Envato

Kast jQuery reviews

Overview

Kast – Extraordinary SHOUTcast HTML5 Sticky Radio Player for your web site

(jQuery and Zepto Plugin).

Allows you to stream your stay radio station to your net guests on Desktops, Tablets and Mobile gadgets.

SHOUTcast unique, Colorful, Responsive design, Fully-customizable, Production-ready, Mobile-compatible, Touch-friendly, Retina-ready and extra.

Following Google’s Material Design pointers.

Update: Spotify API has been changed with lastFM API to repair photographs difficulty.

Features

Pure HTML5: HTML5 solely audio participant
All SHOUTcast Versions: Plays any SHOUTcast station
SID: Supports a number of streams from a single server
Multi-format Audio Player: MP3, OGG, AAC, AAC+ (aacPlus)
SHOUTcast Exclusive: for SHOUTcast servers solely, made with love
Sticky Player: Runs peacefully at your net browser nook.
Popup Player
Current and Played Information: Displays varied data and stats a couple of SHOUTcast server (server title, present listeners, style, monitor title, artist identify and extra)
Album and Artist Artworks: Smart album art work retrieving from the most important music database (utilizing lastFM API), or Artist art work as a fallback
Mobile-compatible with MobileCare: Kast is reminiscence-environment friendly, runs completely on Mobile gadgets (Premium characteristic)
Responsive Design: Ultra Responsive Design with Mobile-first method
Material Design: Kast UI Following Google’s Material Design pointers
Colorful: All Material Design Colors (Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Grey, Blue Grey, Carolina, Black, White)
Light and Dark Themes: Material Light Theme and Material Dark Theme
Dynamic Theme, Colors and Contrast: Dynamically adjustments 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 (gentle or darkish).
Anywhere: You can insert it wherever into your net web page (Non-sticky).
Cross-browser: Chrome, Firefox, Safari, Opera, Edge, IE
Touch-friendly and Retina-ready
Independent participant, simply jQuery
Continuous and LiveStream play
SHOUTcast Direct Metadata through DNAS JSONP Support
Multi Language Support
HTTPS (SSL) Support: Stream your radio station in your SSL secured web site (HTTPS)
Offline Detection: Display message on SHOUTcast server offline or Internet connection loss.
Performance-focused: Completely written in plain JavaScript.
Easy-to-use: Meant for everybody
Highly customizable: Easy to customise and absolutely customizable
Developer API: Rich API and occasions for Developers
Extra: Volume controls (Mute / Unmute), reduce and maximize the participant and extra

More Screenshots?

Click on the Screenshots button to view the gallery.

Live Preview

Click on the Live Preview button to view the demo.

Usage

First make sure that 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>

Call it

<script>
    $.kast({
       host: "myshoutcastserver.com",
       port: 8080,
       model: 2
    })
</script>

Recommended: embrace Google’s Roboto font

<hyperlink href="https://fonts.googleapis.com/css?family=Roboto:400" kind="textual content/css" rel="stylesheet">

Options

Customize Kast simply the best way you prefer it, Usage:

$.kast({
   host: "...",
   port: ...,
   choiceName: ...    
})

host: String Server IP or area identify Required
port: Integer Server port (80 by default)
protocol: String Server protocol (“http” by default)
model: Integer SHOUTcast model (2 by default) (1 or 2)
sid: Integer SHOUTcast V2 server stream ID * If you may have a number of stations * (1 by default)
statsPath: String SHOUTcast V2 path to statistical data (“stats” by default)
performedPath: String Path to performed listing (“performed” by default)
directStreamURL: Boolean or String Add direct audio stream URL (false by default)
ui: String User Interface (“coloured” by default) (“clear” or “coloured”)
theme: String Material Design theme (“gentle” by default) (“darkish”, “gentle” or “dynamic”)
colours: String or Object Material Design colours ({major: “cyan”, accent: “yellow”} by default) ({major: “shade identify”, accent: “shade identify”} or “dynamic”)

Color names: crimson, pink, purple, deep purple, indigo, blue, gentle blue, cyan, teal, inexperienced, gentle inexperienced, lime, yellow, amber, orange, deep orange, brown, gray, blue Grey, carolina, black, white

Note: Carolina shade it’s an additional shade
startTemplate: String Starting template (“maximized” by default) (“minimized” or “maximized”)
place: String Player sticky place (“proper” by default) (“proper” or “left”)
container: String Player container aspect, class or ID. (“physique” by default)
autoPlay: Boolean Autoplay radio (false by default) (true or false)
autoUpdate: Boolean or String Auto replace information * Current enjoying information, performed listing, server stats * (true by default) (true, false or “all”)

Note: “all” Auto updates all the data together with server stats (present listeners, and so on..)
art work: Boolean or Array Retrieve 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”])

Note about customized picture: It’s beneficial 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: Boolean Show standing bar on the high of the participant (true by default) (true or false)
reduceMaximize: Boolean Show reduce / maximize button within the standing bar (true by default) (true or false)
muteUnmute: Boolean Show mute / unmute button within the standing bar (true by default) (true or false)
beginMuted: Boolean Start audio muted (false by default) (true or false)
serverInfo: Boolean, String or Array Show server information / stats within the standing bar or set a customized textual content (false by default) (false, “My Custom textual content”, [“servertitle”, “servergenre”, etc..])

SHOUTcast V1 server information: “currentlisteners”, “streamstatus”, “peaklisteners”, “maxlisteners”, “uniquelisteners”, “bitrate”, “songtitle”

SHOUTcast V2 server information: “averagetime”, “backupstatus”, “bitrate”, “content material”, “currentlisteners”, “maxlisteners”, “peaklisteners”, “servergenre”, “servertitle”, “serverurl”, “songtitle”, “streamhits”, “streamlisted”, “streamlistederror”, “streampath”, “streamstatus”, “streamuptime”, “uniquelisteners”, “model”
performed: Boolean Show performed listing (true by default) (true or false)
presentTrack: Boolean or String Show present monitor title or set a customized textual content (true by default) (true, false, “My Track Title”, and so on..)
presentArtist: Boolean or String Show present artist identify or set a customized textual content (true by default) (true, false, “My Artist Name”, and so on..)
performedTracks: Boolean Show SHOUTcast V2 performed monitor titles (true by default) (true or false)
performedArtists: Boolean Show SHOUTcast V2 performed artist names (true by default) (true or false)
offlineCheck: Boolean Show message on SHOUTcast server offline or Internet connection loss within the standing bar (true by default) (true or false)
mobileCare: Boolean or Array Lightweight participant for Mobile Devices (true by default) (true, false, [“low”], [“medium”], [“high”], [“very high”] or [“ultra”])

Note: Kast is all the time responsive design, however MobileCare is completely different, you set it by choosing a grade from low to extremely (modes), and If you need to customise the max-width * when mobileCare get triggered * set [“medium”, “800px”]. The default max-width is 599px
1. false: What you see in Desktop, is what you see in Mobile
2. low: (true equal low) Autoplay and offlineCheck will likely be disabled, Kast will all the time begin minimized and lite auto replace
3. medium: Medium high quality art work, Server stats replace within the standing bar will likely be disabled, Dymanic theme and colours will likely be dropped to mounted theme/colours and lite auto replace degree 2
4. excessive: Artwork and performed listing will likely be disabled
5. very excessive: Auto replace and reduce/maximize will likely be disabled
6. extremely: Just a play/pause button. Takes solely 3MB of RAM
language: Object Set textual content * for Multi-language * ({offlineText: “Temporarily Offline”, playedText: “Played”, unknownTrackTextual content: “Unknown Track”, unknownArtistTextual content: “Unknown Artist”} by default)
irrelevantWords: Boolean or Array Let Kast concentrate on some irrelavent phrases inside the present music 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 objects Skip information based mostly on monitor 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 Array Set 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”])

Note about default picture: It’s beneficial 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 Integer Set customized stats checker interval in ms (false by default) (false, 7000, 10000, and so on..)
popup: Boolean Enable Kast popup participant (false by default) (false, true)
popupCSSLink: String Kast CSS hyperlink for Kast popup participant (’’ by default) (‘http://to-kast-css-link-file.css’)
popupWidth: Integer Set popup participant width (380 by default)
popupHeight: Integer Set popup participant peak (570 by default)
overHTTPS: Boolean Stream secured SHOUTcast audio for secured HTTPS web sites (experimental) (false by default) (true or false)

Note: Currently SHOUTcast serve audio solely by an HTTP protocol. And HTTPS web page ought to solely have HTTPS content material, with overHTTPS, you serve your net guests a secured stream by utilizing a secured HTTPS proxy.
direct: Boolean Fetch SHOUTcast metadata direclty from the servers (false by default) (true or false)

Note: Supported from >=2.2 DNAS through JSONP.
betaProxies: Boolean Use beta proxies to fetch SHOUTcast metadata (false by default) (true or false)
steady: Boolean Enable steady play (Play/Pause radio) (true by default) (true or false)

API

Kast Developer API

$.kast(); Start with default choices
$.kast(“play”); Play audio
$.kast(“play”, true); Reload audio and play it
$.kast(“pause”); Pause audio
$.kast(“cease”); Stop audio
$.kast(“mute”); Mute audio
$.kast(“unmute”); Unmute audio
$.kast(“reduce”); Minimize participant
$.kast(“maximize”); Maximize participant
$.kast(“stats”); Update the present enjoying information
$.kast(“stats”, callback); Access to the present enjoying information
$.kast(“performed”); Update the present performed information
$.kast(“performed”, callback); Access to the present performed information
$.kast(“autoUpdate”, “all”); Enable auto replace together with server stats
$.kast(“autoUpdate”, true); Enable auto replace
$.kast(“autoUpdate”, false); Disable auto replace
$.kast(“destroy”); Destroy plugin occasion

Events

Kast Developer Events, Usage:

$.kast({
   host: "...",
   port: ...,
   occasionName: callback    
})

onReady: callback perform when Kast is prepared

onAudioLoad: callback perform when audio is loaded. @return HTMLAudioAspect

onMobile: callback perform when Kast is working on Mobile machine

onPlay: callback perform when audio is enjoying. @return HTMLAudioAspect

onPause: callback perform when audio is paused. @return HTMLAudioAspect

onStop: callback perform when audio is stopped. @return HTMLAudioAspect

onMute: callback perform on audio mute. @return HTMLAudioAspect

onUnmute: callback perform on audio unmute. @return HTMLAudioAspect

onMinimize: callback perform on participant reduce

onMaximize: callback perform on participant maximize

onUpdate: callback perform on present / performed information replace. @return stats

onUpdateAll: callback perform on server stats within the standing bar replace * each 8s/12s/16s . @return stats

onOffline: callback perform on offline. @return stats

onOnline: callback perform on again on-line. @return stats

onCurrentArtwork: callback perform on present art work replace. @return present (Album / Artist) art work picture

onPlayedArtworks: callback perform on performed artworks replace. @return performed (Album / Artist) art work picture. * will likely be known as for every of 1 *

onCurrentInformation: callback perform on present enjoying information change. @return presentTrack and presentArtist

onPlayedInformation: callback perform on performed information change. @return performedTrack and performedArtist. * will likely be known as for every of 1 *

onDynamicColors: callback perform on dynamic colours change. @return majorColor and accentColor

onDynamicColorsContrast: callback perform on dynamic colours distinction change. @return majorColorContrast and accentColorContrast

onDynamicTheme: callback perform on dynamic them change. @return present theme

Audio Formats Support

MP3 (audio/mpeg): Chrome (Yes), Firefox (Yes), Safari (Yes), Opera (Yes), IE9+ (Yes), Edge (Yes), Android Browser (Yes), iOS Safari (Yes)
OGG (audio/ogg): Chrome (Yes), Firefox (Yes), Safari (No), Opera (Yes), IE (No), Edge (No), Android Browser (Yes), iOS Safari (No)
AAC (audio/aac): Chrome (Yes), Firefox (Yes), Safari (Yes), Opera (Yes), IE9+ (Yes), Edge (Yes), Android Browser (Yes), iOS Safari (Yes)
AAC+ (audio/aacp): Desktop Chrome Only (Yes)

Before You Buy *IMPORTANT

Not a Music Player: It’s SHOUTcast Radio Player, it’s not designed for Music/MP3 playlists
SHOUTcast Only: Icecast and different streaming media servers should not supported
Multiple Servers should not supported but
About Continuous Play: Continuous Play is for Play/Pause or Play/Stop, It’s not for Gapless Radio Playback, so once you navigate from one web page to a different, Kast reloads itself. If you need Gapless Radio Playback then it is best to use AJAX/Dynamic navigation system
Autoplay on iOS isn’t supported
Direct: If 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 outdated, they’re working on deprecated HTTP 0.9. These trendy browsers are breaking the flexibility for the outdated SHOUTcast V1.x servers to be performed with HTML5. Non-Port 80 V1 streams are not playable. Upgrading to the newest SHOUTcast V2 ought to resolve your downside.

Read 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/
<![CDAT.. Bug: If Kast is exhibiting these texts, then swap to beta proxies to repair this downside for now.

Update: Fixed within the new Kast 1.3

Before You Ask IMPORTANT

Please present your SHOUTcast server deal with.
We don’t do customized tasks.
You can use/set up it like every jQuery/WordPress plugin: If that is your first time, then please examine fundamental YouTube movies on how one can use/set up jQuery/WordPress plugins.
No ETA for the following variations.
English solely.

Browser Compatibility

Google Chrome, Mozilla Firefox, Apple Safari, Opera, Microsoft Edge, Internet Explorer 9 and above (Basically any HTML5 net browser)

Changelog

v1.3.1 - Spotify API has been changed with lastFM API
v1.3 - New options, new choices and bug fixes (Read changelog.txt for extra information)
v1.2 - New options, new choices and enhancements (Read changelog.txt for extra information)
v1.1.2 - Bug fixes and a brand new characteristic (Read changelog.txt for extra information)
v1.1.1 - SHOUTcast V1 performed listing are actually supported and Minor bug fixes
v1.1.0 - The greatest replace but (Read UPGRADE.txt !Important)
v1.0.2 - Build 10250: Bug fixes and enhancements
v1.0.2: Improvements and a brand new characteristic (Read changelog.txt for extra information)
v1.0.1 - Build 10150: Fixed cross-browser assist
v1.0.1: Improvements and a brand new characteristic (Read changelog.txt for extra information)
v1.0.0: Initial launch

LIVE PREVIEW BUY FOR $39