Kast – Extraordinary SHOUTcast HTML5 Radio Player for jQuery – Material Design (Media)

Overview

Kast – Extraordinary SHOUTcast HTML5 Sticky Radio Player for your website (jQuery Plugin),
Allows you to stream your own live radio station to your web visitors on Desktop, Tablets and Mobile devices – Material Design

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: 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).
Cross-browser: Chrome, Firefox, Safari, Opera, Edge, IE
Touch-friendly and Retina-ready
Independent player, just jQuery
Continuous play
Multi Language Support
HTTPS (SSL) Support: Stream your radio station on your SSL secured website (HTTPS)
Offline Checker: Display message on SHOUTcast server offline or Internet connection loss.
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

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

Then include Kast files

<link href="path/to/kast.min.css" type="text/css" rel="stylesheet">
<script src="path/to/kast.min.js"></script>

Call it

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

Recommended: include Google’s Roboto font

<link href="https://fonts.googleapis.com/css?family=Roboto:400" type="text/css" rel="stylesheet">

Options

Customize Kast just the way you like it, Usage:

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

host – Server IP or domain name, @type string, *Required
port – Server port, @type integer, @default 80
version – SHOUTcast version @type integer, @default 2, @options 1 and 2
sid – SHOUTcast V2 server stream ID (If you have multiple stations), @type integer, @default 1
statsPath – SHOUTcast V2 path to stats, @type string, @default “stats”
playedPath – SHOUTcast V2 path to played, @type string, @default “played”
ui – User Interface, @type string, @default “colored”, @options “transparent” and “colored”
theme – Material Design theme (Fixed or dynamic), @type string, @default “light”, @options “dark”, “light” and “dynamic”
colors – Material Design colors (Fixed or dynamic), @type string and object, @default {primary: “cyan”, accent: “yellow”}, @options {primary: “color name”, accent: “color name”} and “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 – Starting template, @type string, @default “maximized”, @options “minimized” and “maximized”
position – Player sticky position, @type string, @default “right”, @options “right” and “left”
autoPlay – Autoplay radio, @type boolean, @default false, @options true and false
autoUpdate – Auto update info (Current playing info, played info, server stats), @type boolean and string, @default true, @options true, false and “all”

Note: “all” Auto updates all the information including server stats (current listeners, etc..)
artwork – Retrieve high quality album artwork (or artist artwork as a fallback) using Spotify API or set a custom fixed artwork image, @type string and boolean, @default true, @options true, false, “https://my-website-or-some-cors-website.com/my-custom-artwork.jpg”
statusBar – Show status bar at the top of the player, @type boolean, @default true, @options true and false
minimizeMaximize – Show minimize / maximize button in the status bar, @type boolean, @default true, @options true and false
muteUnmute – Show mute / unmute button in the status bar, @type boolean, @default true, @options true and false
startMuted – Start audio muted, @type boolean, @default false, @options true, false
serverInfo – Show server info / stats in the status bar, @type array and boolean, @default false, @options false and [“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 – Show SHOUTcast V2 played info (tracks / artists), @type boolean, @default true, @options true and false
currentTrack – Show current track title, @type boolean, @default true, @options true and false
currentArtist – Show current artist name, @type boolean, @default true, @options true and false
playedTracks – Show SHOUTcast V2 played track names, @type boolean, @default true, @options true and false
playedArtists – Show SHOUTcast V2 played artist names, @type boolean, @default true, @options true and false
offlineCheck – On offline, show offline message in the status bar, @type boolean, @default true, @options true and false
mobileCare – Lightweight player for Mobile Devices, @type boolean and array, @default true, @options true, false, [“low”], [“medium”], [“high”], [“very high”], [“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”], * default max-width is 599px *
1. false: What you see in Desktop, is what you see in Mobile
2. low: (true equal low) Auto play audio will be disabled, Kast will always start minimized, offlineCheck will be disabled and lite auto update
3. medium: Medium quality artwork images, Server stats updates in the status bar will be disabled, Dymanic theme and colors will be dropped to fixed theme/colors and lite auto update level 2
4. high: Artwork and played list will be disabled
5. very high: Auto update and minimize/maximize will be disabled
6. ultra: just a play/pause button
language – Set texts * for Multi-language *, @type object, @default {offlineText: “Temporarily Offline”, playedText: “Played”}, @options {offlineText: “Offline in some language”, playedText: “Played in some language”}
irrelevantWords – Let Kast be aware of some irrelavent words inside the current song title to help Kast get the right artwork from Spotify API, @type array and boolean, @default [“feat.”, “ft.”, “Feat.”, “Ft.”], @options false, [“My radio 2016 blah blah”, “feat.”, “ft.”, “some unrelated word here”, ”#mumbo_jumbo”]
overHTTPS – Stream secured SHOUTcast audio for secured HTTPS websites (experimental), @type boolean, @default false, @options true, 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.

API

Kast Developer API

$.kast() – Start with default options
$.kast("play") – Play audio
$.kast("pause") – Pause 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:

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

onKastStart – callback function when Kast is loaded

onAudioLoad – callback function when audio is loaded, @param HTMLAudioElement

onMobile – callback function when Kast is running on Mobile device

onPlay – callback function when audio is playing, @param HTMLAudioElement

onPause – callback function when audio is paused, @param HTMLAudioElement

onMute – callback function on audio mute, @param HTMLAudioElement

onUnmute – callback function on audio unmute, @param HTMLAudioElement

onMinimize – callback function on player minimize

onMaximize – callback function on player maximize

onUpdate – callback function on current / played info update, @param stats

onUpdateAll – callback function on server stats in the status bar update * every 8s/12s/16s *, @param stats

onCurrentArtwork – callback function on current artwork update, @param current (Album / Artist) artwork image

onPlayedArtworks – callback function on played artworks update, @param played (Album / Artist) artwork image. * will be called for each of one *

onCurrentInfo – callback function on current playing info change, @params currentTrack and currentArtist

onPlayedInfo – callback function on played info change, @params playedTrack and playedArtist. * will be called for each of one *

onDynamicColors – callback function on dynamic colors change, @params primaryColor and accentColor

onDynamicColorsContrast – callback function on dynamic colors contrast change, @params primaryColorContrast and accentColorContrast

onDynamicTheme – callback function on dynamic them change, @param 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): 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

v1.0.1: Improvements and a new feature (Read changelog.txt for more info)
v1.0.0: Initial release