Download Now
Live Preview
Overview
Kast – Extraordinary SHOUTcast HTML5 Sticky Radio Player for your website
(jQuery and Zepto Plugin).
Allows you to stream your live radio station to your web visitors on Desktops, Tablets and Mobile devices.
SHOUTcast exclusive, Colorful, Responsive design, Fully-customizable, Production-ready, Mobile-compatible, Touch-friendly, Retina-ready and more.
Following Google’s Material Design guidelines.
NEW Kast v1.2 update: new features and improvements.
Features
Pure HTML5: HTML5 only audio player
All SHOUTcast Versions: Plays any SHOUTcast station
Multiple Streams: Supports multiple streams from a single server (SID)
Multi-format Audio Player: MP3, OGG, AAC, AAC+ (aacPlus)
SHOUTcast Exclusive: for SHOUTcast servers only, made with love
Sticky Player: Runs peacefully at your web browser corner.
Current and Played Information: Displays various information and stats about a SHOUTcast server (server title, current listeners, genre, track title, artist name and more)
Album and Artist Artworks: Smart album artwork retrieving from the biggest music database (using Spotify API), or Artist artwork as a fallback
Mobile-compatible with MobileCare: Kast is memory-efficient, runs perfectly on Mobile devices (Premium feature)
Responsive Design: Ultra Responsive Design with Mobile-first approach
Material Design: Kast UI Following Google’s Material Design guidelines
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 changes colors and theme based on the dominated colors (color palette) from the artwork image with also color contrast check for text colors (light or dark).
Anywhere: You can insert it anywhere into your web page (Non-sticky).
Cross-browser: Chrome, Firefox, Safari, Opera, Edge, IE
Touch-friendly and Retina-ready
Independent player, just jQuery
Continuous and LiveStream play
SHOUTcast Direct Metadata via DNAS JSONP Support
Multi Language Support
HTTPS (SSL) Support: Stream your radio station on your SSL secured website (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 everyone
Highly customizable: Easy to customize and fully customizable
Developer API: Rich API and events for Developers
Extra: Volume controls (Mute / Unmute), minimize and maximize the player and more
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 jQuery is included, If not, include it
Then include Kast files
Call it
Recommended: include Google’s Roboto font
Options
Customize Kast just the way you like it, Usage:
host: String Server IP or domain name Required
port: Integer Server port (80 by default)
protocol: String Server protocol (“http” by default)
version: Integer SHOUTcast version (2 by default) (1 or 2)
sid: Integer SHOUTcast V2 server stream ID * If you have multiple stations * (1 by default)
statsPath: String SHOUTcast V2 path to stats (“stats” by default)
playedPath: String Path to played list (“played” by default)
directStreamURL: Boolean or String Add direct audio stream URL (false by default)
ui: String User Interface (“colored” by default) (“transparent” or “colored”)
theme: String Material Design theme (“light” by default) (“dark”, “light” or “dynamic”)
colors: String or Object Material Design colors ({primary: “cyan”, accent: “yellow”} by default) ({primary: “color name”, accent: “color name”} or “dynamic”)
Color names: 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
Note: Carolina color it’s an extra color
startTemplate: String Starting template (“maximized” by default) (“minimized” or “maximized”)
position: String Player sticky position (“right” by default) (“right” or “left”)
container: String Player container element, class or ID. (“body” by default)
autoPlay: Boolean Autoplay radio (false by default) (true or false)
autoUpdate: Boolean or String Auto update info * Current playing info, played list, server stats * (true by default) (true, false or “all”)
Note: “all” Auto updates all the information including server stats (current listeners, etc..)
artwork: Boolean or Array Retrieve album artwork (or artist artwork as a fallback) using Spotify API or set a custom image (true by default) (true, false or [“https://my-website-or-some-cors-website.com/my-custom-artwork.jpg”])
Note about custom image: It’s recommended to add 64×64 (small) image with custom image array. i.e [“images/video-games-music.jpg’, ‘images/video-games-music-optional-64×64.jpg”]
statusBar: Boolean Show status bar at the top of the player (true by default) (true or false)
minimizeMaximize: Boolean Show minimize / maximize button in the status bar (true by default) (true or false)
muteUnmute: Boolean Show mute / unmute button in the status bar (true by default) (true or false)
startMuted: Boolean Start audio muted (false by default) (true or false)
serverInfo: Boolean, String or Array Show server info / stats in the status bar or set a custom text (false by default) (false, “My Custom text”, [“servertitle”, “servergenre”, etc..])
SHOUTcast V1 server info: “currentlisteners”, “streamstatus”, “peaklisteners”, “maxlisteners”, “uniquelisteners”, “bitrate”, “songtitle”
SHOUTcast V2 server info: “averagetime”, “backupstatus”, “bitrate”, “content”, “currentlisteners”, “maxlisteners”, “peaklisteners”, “servergenre”, “servertitle”, “serverurl”, “songtitle”, “streamhits”, “streamlisted”, “streamlistederror”, “streampath”, “streamstatus”, “streamuptime”, “uniquelisteners”, “version”
played: Boolean Show played list (true by default) (true or false)
currentTrack: Boolean or String Show current track title or set a custom text (true by default) (true, false, “My Track Title”, etc..)
currentArtist: Boolean or String Show current artist name or set a custom text (true by default) (true, false, “My Artist Name”, etc..)
playedTracks: Boolean Show SHOUTcast V2 played track titles (true by default) (true or false)
playedArtists: Boolean Show SHOUTcast V2 played artist names (true by default) (true or false)
offlineCheck: Boolean Show message on SHOUTcast server offline or Internet connection loss in the status bar (true by default) (true or false)
mobileCare: Boolean or Array Lightweight player for Mobile Devices (true by default) (true, false, [“low”], [“medium”], [“high”], [“very high”] or [“ultra”])
Note: Kast is always responsive design, but MobileCare is different, you set it by selecting a grade from low to ultra (modes), and If you want to customize 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 Mobile
low: (true equal low) Autoplay and offlineCheck will be disabled, Kast will always start minimized and lite auto update
medium: Medium quality artwork, Server stats update in the status bar will be disabled, Dymanic theme and colors will be dropped to fixed theme/colors and lite auto update level 2
high: Artwork and played list will be disabled
very high: Auto update and minimize/maximize will be disabled
ultra: Just a play/pause button. Takes only 3MB of RAM
language: Object Set text * for Multi-language * ({offlineText: “Temporarily Offline”, playedText: “Played”, unknownTrackText: “Unknown Track”, unknownArtistText: “Unknown Artist”} by default)
irrelevantWords: Boolean or Array Let Kast be aware of some irrelavent words inside the current song title to help Kast get the right artwork from Spotify API ([“feat.”, “ft.”, “Feat.”, “Ft.”] by default) (false, [“blah”, “blah.com”, “mumbo jumbo”], etc..)
overHTTPS: Boolean Stream secured SHOUTcast audio for secured HTTPS websites (experimental) (false by default) (true or false)
Note: Currently SHOUTcast serve audio only through an HTTP protocol. And HTTPS page should only have HTTPS content, with overHTTPS, you serve your web visitors a secured stream by using 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 via JSONP.
betaProxies: Boolean Use beta proxies to fetch SHOUTcast metadata (false by default) (true or false)
continuous: Boolean Enable continuous play (Play/Pause radio) (true by default) (true or false)
API
Kast Developer API
$.kast(); Start with default options
$.kast(“play”); Play audio
$.kast(“play”, true); Reload audio and play it
$.kast(“pause”); Pause audio
$.kast(“stop”); Stop audio
$.kast(“mute”); Mute audio
$.kast(“unmute”); Unmute audio
$.kast(“minimize”); Minimize player
$.kast(“maximize”); Maximize player
$.kast(“stats”); Update the current playing info
$.kast(“stats”, callback); Access to the current playing info
$.kast(“played”); Update the current played info
$.kast(“played”, callback); Access to the current played info
$.kast(“autoUpdate”, “all”); Enable auto update including server stats
$.kast(“autoUpdate”, true); Enable auto update
$.kast(“autoUpdate”, false); Disable auto update
$.kast(“destroy”); Destroy plugin instance
Events
Kast Developer Events, Usage:
onReady: callback function when Kast is ready
onAudioLoad: callback function when audio is loaded. @return HTMLAudioElement
onMobile: callback function when Kast is running on Mobile device
onPlay: callback function when audio is playing. @return HTMLAudioElement
onPause: callback function when audio is paused. @return HTMLAudioElement
onStop: callback function when audio is stopped. @return HTMLAudioElement
onMute: callback function on audio mute. @return HTMLAudioElement
onUnmute: callback function on audio unmute. @return HTMLAudioElement
onMinimize: callback function on player minimize
onMaximize: callback function on player maximize
onUpdate: callback function on current / played info update. @return stats
onUpdateAll: callback function on server stats in the status bar update * every 8s/12s/16s *. @return stats
onOffline: callback function on offline. @return stats
onOnline: callback function on back online. @return stats
onCurrentArtwork: callback function on current artwork update. @return current (Album / Artist) artwork image
onPlayedArtworks: callback function on played artworks update. @return played (Album / Artist) artwork image. * will be called for each of one *
onCurrentInfo: callback function on current playing info change. @return currentTrack and currentArtist
onPlayedInfo: callback function on played info change. @return playedTrack and playedArtist. * will be called for each of one *
onDynamicColors: callback function on dynamic colors change. @return primaryColor and accentColor
onDynamicColorsContrast: callback function on dynamic colors contrast change. @return primaryColorContrast and accentColorContrast
onDynamicTheme: callback function on dynamic them change. @return current 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)
Browser Compatibility
Google Chrome, Mozilla Firefox, Apple Safari, Opera, Microsoft Edge, Internet Explorer 9 and above (Basically any HTML5 web browser)
Changelog
© Kast – Made with love. Don’t forget to rate <3
Created
12 January 16
Last Update
15 June 16
High Resolution
Yes
Compatible Browsers
IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge
Files Included
JavaScript JS, HTML, CSS
Software Version
jQuery
Tags
kast, live stream, material design, mobile radio, radio, shoutcast, shoutcast album artist artwork, shoutcast html5 player, shoutcast jquery plugin, shoutcast played, shoutcast radio player, shoutcast radio station player, shoutcast stats, spotify api, sticky player
$18
Live Preview
DOWNLOAD NOW
The post Kast – Extraordinary SHOUTcast HTML5 Radio Player for jQuery – Material Design appeared first on Wptit.