HTML5 Radio Station Player - Documentation

Contents
Player is based on JPLayer which is open source HTML5 player with Flash fall back meaning you don't have to worry about multi-browser support. This player also allows your visitors to customize their experience, they can choose between different streams, enable or disable auto start feature, enable or disable flash as primary player and change player background. It is easy to set-up and add to any existing website. I suggest using new folder E.g. "/player/" to deploy it and than just add popup or iframe to your existing website.

Requirements
  • Shoutcast or Icecast MP3/OGG Stream
  • PHP 5+
  • PHP CURL extension or granted permission to access remote URLs using file_get_contents() (check with host)
  • LastFM Developer API key (Optional)
  • Shoutcast/Icecast Admin access
  • Some space to cache artist images (If LastFM API key is provided) (optional)
Features
  • Easy to Configure and Deploy (V1.02 includes setup script!)
  • Based on JPlayer (HTML5 & Flash Fall back)
  • LastFM API for showing Artists Images
  • Includes 12$ worth PHP Class Multi-server Shoutcast & Icecast Stats PHP Class
  • Includes amazing PHP caching class that works with memcache, memcached, APC (user cache) and HDD cache (default)
  • Allows your listeners to customize experience (Turn Flash on/off, Auto Play on/off, Change Background, Change Stream Quality (if you have multiple streams))
  • Creates Play-list files on the fly from configured streams
  • Best Deployed as POPUP or IFRAME so your listeners can keep browsing your site while listening
Platforms and Browsers
  • Windows: Firefox, Chrome, Opera, Safari, IE9, IE10+
  • OSX: Safari, Firefox, Chrome, Opera
  • iOS: Mobile Safari: iPad, iPhone, iPod Touch
  • Android 2.3+: Chrome, Firefox, Opera and most other mobile browsers
  • Blackberry: OS 7 Phone Browser, PlayBook Browser
Setup & Configuration
Using setup file (generator)
The easiest way to configure your player is to visit URL to your player and adding setup.php on the end. So for example: http://your-website.com/player/setup.php. This way you can use Graphical interface to configure your player with ease. Its also dangerous to leave this file on the site after the player has been configured. So please after you are done, delete the setup file.
Manual Way
Configuration file is located in "/inc/" folder and file you need to modify is "config.php".
It is very simple to configure the player. Config file is commented so you understand what goes where.
Source of config file is bellow for example.

<?php
	// Your LASTFM API key, get it at http://www.last.fm/api (click on "Get an API account" to get yours)
	$conf['lastfm-api-key']		=	'API KEY HERE';

	// Set title and other defaults
	$radio['title'] 		=	'HTML5 Radio Station Player';  						// Player Title
	$radio['facebook']		=	'https://www.facebook.com/ILHM.RADIO?fref=ts'; 		// Link to your facebook page
	$radio['twitter']		=	'Your custom Twitter Message ';						// Twitter message

	// Radio streams for HTML5 Radio Station Player & playlist files (array)
	$radio['streams'] = array(

		// Example of streams configuration
		'Best Quality (320K)' => array(
			oga	=> 'http://radio.ilhm.eu:8005/ilhm.ogg',
			mp3	=> 'http://radio.ilhm.eu:8000/ilhm.mp3'
		),

		'High Quality (192K)' => array(
			oga	=> 'http://radio.ilhm.eu:8005/ilhm_192.ogg',
			mp3	=> 'http://radio.ilhm.eu:8000/ilhm_192.mp3'
		),

		'Low Quality (128K)' => array(
			oga	=> 'http://radio.ilhm.eu:8005/ilhm_128.ogg',
			mp3	=> 'http://radio.ilhm.eu:8000/ilhm_128.mp3',
			aac => 'http://radio.ilhm.eu:8000/ilhm.acc'
		),

		// Must be included for current playing track
		stats => array (
			type => 'shoutcast',
			ip => 'radio.ilhm.eu',
			port => '8000',
			pw => 'password',
			sid => 1
		)

	);


	// Available backgrounds (Array of Backgrounds, unlimited number supported ;))
	$background = array(
		'Neat Blue'  		=> 'images/player/background.jpg',
		'Dark Noise'		=> 'images/player/dark-noise.jpg',
		'Mixed Colors'		=> 'images/player/dark-blue.jpg'
	);


	// Default Player Settings (PHP Array)
	$defaults = array(
		'quality' 		=> 'High Quality (192K)',		// Default Stream (name must match names set at streams array)
		'useflash'		=> 'false',       				// Use Adobe Flash Player (false/true)
		'autoplay'		=> 'false',						// Start Autoplaying (false/true)
		'background'	=> 'Neat Blue' 					// Default Player Background (name must match background set in array above)
	);

	// END CONFIG
?>
Translating Player into multiple languages
Since version 1.07 this player supports multiple languages. The system detects browsers accepted language in ISO 639-1 standard. Than it searches for language file in "/inc/lang/{language}.php" if its found, it uses that file to change player language. I included English and Slovenian translation so you understand how it works. To learn how to name the php file for language see this website: http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes. English translation file contents: 
<?php

	/* 	This file is part of HTML5 Radio Player
	*	It allows easy translation of the player
	======================================================================================================*/
	$lang = array(

		'init-loading'	=>	'Loading player, please wait...',
		'loading' 		=>	'Loading...',

		// No support section
		'nosupport' => 'We are sorry but your browser doesn\'t support neither Flash or HTML version of player. <br />
		Please upgrade your browser or install',

		// Navigation section
		'twitter'	=>	'Twitter',
		'like'		=>	'Like',
		'settings'	=>	'Settings',
		'close'		=>	'Close',

		// Settings
		'quality' 			=>	'Stream Quality',
		'flash'				=>	'Use Adobe Flash Player',
		'autostart'			=>	'Start playing automatically',
		'background'		=>	'Player Background',

		// Misc
		'onair'				=>	'On Air',
		'playtime'			=>	'Play time (hour:min:sec)',
		'status'			=>	'You are listening to a live stream...',
		'playlists'			=>	'Listen in your favourite player',

		'js' => array( // Javascript texts
			'likeus'		=>	'Like us on Facebook',
			'loading'		=>	'Loading, please wait...',
			'stopped'		=>	'Player stopped...',
			'volume' 		=>	'Volume'
		)
	);
Deploying player
To use the player, deploy it or how would you call that, simply upload files in the zip file to your web hosting provider.
If web hosting is Linux based you will have to give chmod 755 to following folders:
  • /images/artists/ (LastFM image files save here)
  • /cache/ (10s cache so your server doesn't require connecting to shoutcast/icecast for every listener)
Other than that you just need to add iframe or a link with javascript popup, see bellow examples for iframe: 
<!-- Set SRC value to your folder where player is located -->
<iframe src="/projects/radio-player/player/" scrolling="no" border="0" width="730" height="350"></iframe>
Example:


A link with Window POPUP deployment: 
<!-- Change "/projects/radio-player/player/" to URL where you uploaded player -->
<a class="btn" href="#" onclick="window.open('/projects/radio-player/player/','web-radio','width=730,height=350,left=40,top=40,resizable=yes,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=yes,toolbar=no'); return false;">Open Player as popup</a>
Example:
Open Player as popup

Credits

By using Prahec Website(s),
you agree to our Cookie Policy.

Accept