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

Overview

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

(jQuery and Zepto Plugin).

Permits you to stream your reside radio station to your internet guests on Desktops, Tablets and Cell units.

SHOUTcast unique, Colourful, Responsive design, Absolutely-customizable, Manufacturing-prepared, Cell-suitable, Contact-pleasant, Retina-prepared and extra.

Following Google’s Material Design tips.

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 Player: MP3, OGG, AAC, AAC+ (aacPlus)
• SHOUTcast Unique: for SHOUTcast servers solely, made with love
• Sticky Player: Runs peacefully at your internet browser nook.
• Popup Player
• Present and Performed Data: Shows varied info and stats a few SHOUTcast server (server title, present listeners, style, monitor title, artist identify and extra)
• Album and Artist Artworks: Sensible album paintings retrieving from the most important music database (utilizing lastFM API), or Artist paintings as a fallback
• Cell-suitable with MobileCare: Kast is reminiscence-environment friendly, runs completely on Cell units (Premium characteristic)
• Responsive Design: Extremely Responsive Design with Cell-first strategy
• Material Design: Kast UI Following Google’s Material Design tips
• Colourful: All Material 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: Material Mild Theme and Material Darkish Theme
• Dynamic Theme, Colours and Distinction: Dynamically modifications colours and theme based mostly on the dominated colours (colour palette) from the paintings picture with additionally colour distinction verify for textual content colours (gentle or darkish).
• Wherever: You’ll be able to insert it anyplace into your internet web page (Non-sticky).
• Cross-browser: Chrome, Firefox, Safari, Opera, Edge, IE
• Contact-pleasant and Retina-prepared
• Unbiased participant, simply jQuery
• Steady and LiveStream play
• SHOUTcast Direct Metadata by way of 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-targeted: Fully 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.

Dwell Preview

Click on on the Dwell Preview button to view the demo.

Utilization

First ensure that jQuery is included, If not, embody it

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Then embody 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>

Really useful: embody 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: 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 * You probably have a number of stations * (1 by default)
• statsPath: String SHOUTcast V2 path to statistical data (“stats” by default)
• playedPath: String Path to performed record (“performed” by default)
• directStreamURL: Boolean or String Add direct audio stream URL (false by default)
• ui: String Person 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: “colour identify”, accent: “colour identify”} or “dynamic”)
  
  Colour names: crimson, pink, purple, deep purple, indigo, blue, gentle blue, cyan, teal, inexperienced, gentle inexperienced, lime, yellow, amber, orange, deep orange, brown, gray, blue Gray, carolina, black, white
  
  Notice: Carolina colour it’s an additional colour
• startTemplate: String Beginning template (“maximized” by default) (“minimized” or “maximized”)
• place: String Player sticky place (“proper” by default) (“proper” or “left”)
• container: String Player container factor, class or ID. (“physique” by default)
• autoPlay: Boolean Autoplay radio (false by default) (true or false)
• autoUpdate: Boolean or String Auto replace information * Present enjoying information, performed record, server stats * (true by default) (true, false or “all”)
  
  Notice: “all” Auto updates all the data together with server stats (present listeners, and many others..)
• paintings: Boolean or Array Retrieve album paintings (or artist paintings 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”])
  
  Notice 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 Present standing bar on the high of the participant (true by default) (true or false)
• minimizeMaximize: Boolean Present reduce / maximize button within the standing bar (true by default) (true or false)
• muteUnmute: Boolean Present mute / unmute button within the standing bar (true by default) (true or false)
• startMuted: Boolean Begin audio muted (false by default) (true or false)
• serverInfo: Boolean, String or Array Present server information / 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 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 Present performed record (true by default) (true or false)
• currentTrack: Boolean or String Present present monitor title or set a customized textual content (true by default) (true, false, “My Observe Title”, and many others..)
• currentArtist: Boolean or String Present present artist identify or set a customized textual content (true by default) (true, false, “My Artist Title”, and many others..)
• playedTracks: Boolean Present SHOUTcast V2 performed monitor titles (true by default) (true or false)
• playedArtists: Boolean Present SHOUTcast V2 performed artist names (true by default) (true or false)
• offlineCheck: Boolean Present message on SHOUTcast server offline or Web connection loss within the standing bar (true by default) (true or false)
• mobileCare: Boolean or Array Light-weight participant for Cell Units (true by default) (true, false, [“low”], [“medium”], [“high”], [“very high”] or [“ultra”])
  
  Notice: Kast is all the time responsive design, however MobileCare is totally different, you set it by deciding on 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
  
  1. false: What you see in Desktop, is what you see in Cell
  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 paintings, Server stats replace within the standing bar will likely be disabled, Dymanic theme and colours will likely be dropped to fastened theme/colours and lite auto replace stage 2
  4. excessive: Paintings and performed record will likely be disabled
  5. very excessive: Auto replace and reduce/maximize will likely be disabled
  6. extremely: Only a play/pause button. Takes solely 3MB of RAM
• language: Object Set textual content * for Multi-language * ({offlineText: “Briefly Offline”, playedText: “Performed”, unknownTrackText: “Unknown Observe”, unknownArtistText: “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 correct paintings from lastFM API ([“feat.”, “ft.”, “Feat.”, “Ft.”] by default) (false, [“blah”, “blah.com”, “mumbo jumbo”], and many others..)
• 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 many others..)
• defaultArtwork: Boolean or Array Set default album paintings, It reveals when paintings not discovered. (false by default) (false, [“https://my-website-or-some-cors-website.com/my-default-artwork.jpg”])
  
  Notice 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 many others..)
• popup: Boolean Allow 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 top (570 by default)
• overHTTPS: Boolean Stream secured SHOUTcast audio for secured HTTPS web sites (experimental) (false by default) (true or false)
  
  Notice: 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: Boolean Fetch SHOUTcast metadata direclty from the servers (false by default) (true or false)
  
  Notice: Supported from >=2.2 DNAS by way of JSONP.
• betaProxies: Boolean Use beta proxies to fetch SHOUTcast metadata (false by default) (true or false)
• steady: Boolean Allow 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 information
• $.kast(“stats”, callback); Entry to the present enjoying information
• $.kast(“performed”); Replace the present performed information
• $.kast(“performed”, callback); Entry to the present performed information
• $.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 Player: It’s SHOUTcast Radio Player, it’s not designed for Music/MP3 playlists
• SHOUTcast Solely: Icecast and different streaming media servers should not supported
• A number of Servers should not 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. In order for you Gapless Radio Playback then it’s best 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 working 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 remedy your drawback.
  
  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/
• <![CDAT.. Bug: If Kast is showing these texts, then switch to beta proxies to fix this problem for now.
  
  Update: Fixed in the new Kast 1.3

Before You Ask IMPORTANT

• Please provide your SHOUTcast server address.
• We don’t do custom projects.
• You can use/install it like any jQuery/WordPress plugin: If this is your first time, then please check basic YouTube videos on how to use/install jQuery/WordPress plugins.
• No ETA for the next versions.
• English only.

Browser Compatibility

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

Changelog

v1.3.1 - Spotify API has been replaced with lastFM API
v1.3 - New features, new options and bug fixes (Read changelog.txt for more info)
v1.2 - New features, new options and improvements (Read changelog.txt for more info)
v1.1.2 - Bug fixes and a new feature (Read changelog.txt for more info)
v1.1.1 - SHOUTcast V1 played list are now supported and Minor bug fixes
v1.1.0 - The biggest update yet (Read UPGRADE.txt !Important)
v1.0.2 - Build 10250: Bug fixes and improvements
v1.0.2: Improvements and a new feature (Read changelog.txt for more info)
v1.0.1 - Build 10150: Fixed cross-browser support
v1.0.1: Improvements and a new feature (Read changelog.txt for more info)
v1.0.0: Initial release

© Kast – Made with love. Don’t forget to rate <3