AIO - Radio Station Player

Script Documentation and Setup guide

Introduction, Features and Description

Thank you for purchasing AIO - Radio Station Player script. This is my most complete and extensive script ever created. I have taken all complaints, requests and questions into consideration when writing it. I eliminated as much bugs and issues as I could and made a perfect script for all radio station owners.

Why another player?

This is not my first player. If you purchased one of previous players you are probably wondering why the heck another one... Let me explain.
I have received a lot of reports about issues and problems with various platforms and stream configurations. While this would normally mean that I have to repair my script in this case that would be impossible. Most of the problems were happening due to basic principle of code I used. The way I designed the code to work it simply could not work with so many different configurations. So after a while I decided to stop repairing broken script and make a new one which will fix all that and more. The new player is actually re-coded from ground up.

I can ensure you, you will not find the same code in new player. I did copy few general functions from previous player of course, but the stylesheet, api, PHP and every thing else is written from scratch. It took about a month to fully code and test it (and more than year of bugs and issue reports to release over 32 updates).

Extensive list of features

  • Responsive Design
  • Multi-language based on browser language setting
  • Extensive Control Panel which allows easy installation and management
  • Included caching script which will ensure that stream information is displayed as fast as possible
  • Supports multi-channel(s) configuration with various settings which change per channel
  • Various API(s) support

    • Direct Stream Method (Uses stream information directly from the audio stream (like Winamp, Windows Media Player, QuickTime and others))
    • Shoutcast Method (Uses Shoutcast's XML information from server)
    • Icecast Method (Uses Icecast's XML status page from server)
    • SAM Broadcaster method (Uses SAM's history table from MySQL)
    • Centovacast Method (Uses Centovacast API directly from control panel (long cache))
    • Radionomy Method (Uses Radionomy public API with your key/radio ID which is cached using callmeback method)
    • Custom (External URL using plain text format e.g.: "Artist - Title") - since v1.07
  • HTML5 Audio API with Flash fallback support based on jPlayer jQuery plugin
  • Written in HTML5 and CSS3 using SCSS framework allowing easy (also within control panel) compilation of various color schemes
  • Player uses either LastFM, iTunes or EchoNext API to get as many artist images as possible allowing you to cache them or provide only URL to the images
  • Custom Artist images (Allows Importing from FTP server)
  • Playlist generation on the fly using PHP.
  • Easy installing of the updates through player's Control Panel
  • And more which you will discover on your own :)

How to install and setup the script

After purchasing the script on Codecanyon you will be able to download zip file with player files. This player is a standalone script meaning it can work without any other framework or CMS. The zip file includes all you need to make the player work. Player comes with pre-defined folders and few general options. But it does not include any channels or artist images. You will have to set that up by your self.

First step

Download and extract the zip file from codecanyon to any folder on your web server (E.g.: /player/). When you are done, you will have to set permissions for few folders so the player has the permission to access, edit and delete files. The reason for permissions requirements is that this player does not use database but pure PHP files.

After extracting all the files on your web server, please change chmod of following folders to 755:
  • templates/{template_name}/ - Required for compiling custom color schemes (since 1.3x replace template_name by template name you wish to use)
  • inc/conf/ - Required for changing player and channel(s) settings
  • tmp/cache/ - Required for player cache and Artwork images
  • tmp/images/ - Required for custom artist images and channel logo(s)
  • tmp/logs/ - Required for logging player errors and invalid responses from API's
  • tmp/update/ - Required for player updates (Control Panel - Updates tab)

Note: You may also need to change chmod of inc/conf/general.php to 755. I included first configuration to make your life easier but that may cause invalid permissions error when attempting to change settings.

Second Step

Now the script is ready for use! To access player control panel simply navigate your browser window to http://yourwebsite.com/player-folder/panel/ (Replace "yourwebsite.com/player-folder/" with your domain name and path to the player). When you first time access the panel, enter following details into form:

Username: admin
Password: password

Once you sign into panel, my advise is to change the username and password for the control panel immediately. You can do that by accessing tab Settings.
Note that your password will not be saved in plain text but it will be hashed with SHA512 encryption which means it will become unrecoverable!
In this control panel you can set up your player, change all the settings, and more!

Third Step - First Channel

Creating channels has never been easier. With AIO - Radio Station Player you can configure unlimited number of channels easily. Okay enough talk. Once in control panel navigate to tab Channels and click Add Channel. Control Panel already has self-explanation(s) in place so it should be easy to fill in information. Please make sure that you do not leave out any fields because if you do, player may not work properly. Once you are done, click Save button. If every thing is OK you will be redirected to channel(s) list page. The new channel may not appear immediately that is because of PHP's internal file cache. If you click F5 or refresh few times the new channel should appear. Now that's it. If you click Home tab you should be able to listen to the station with your preferences.

Note: When you set up a single channel on the player, it will hide the channel's list icon. Same principle applies to the different Qualities setting.

Debugging player's issues and problems

Most shared web hosting providers block required ports which player has to connect to. The ports are used by the streaming servers not the player it self. For example Shoutcast uses port 8000 by default on which listeners can listen to music. Player uses the same ports to get radio information which means if they are blocked information is not displayed and the error is logged to a file.

The AIO Radio Station Player will log all errors and issues into tmp/logs/ folder.

The PHP errors (script issues) will be logged into file called php.log.
Problems with API(s) will be logged into file called player.api.log. These errors are usually reason why the radio information is not displayed.

Understanding issues

Issues like Invalid Configuration you can fix your self. But if you see an issue like Connection to X server failed you will have to check if your provider is blocking script's connection to the streaming server. The player includes a tool to do that. In the Control Panel navigate to tab Tools and on top click Start Test. The script will attempt to connect to 3 different API's and if the connection is successful you will see message success!. If the connection fails, you will have to contact your web hosting provider to open the specified ports or check connectivity between their servers and your streaming servers (Icecast/Shoutcast and others). You can also enable Debug mode under settings and the debugging tool on Tools page will show very detailed information about the connectivity problem you are facing, see example bellow.

Toggle CURL Debug example

Issues like CURL extension is not loaded! are self explanatory. This specific issue means that PHP CURL extension is not available for the script to use. The fix is simple: contact provider to enable PHP CURL extension.

Connectivity & Live Information issues

Shared web hosting companies and even private hosting companies have certain firewall setups which very often disturb connectivity between player and the services. This is not done intentionally. Firewall can ensure certain level of security against hackers so providers are obligated to use them. But yes, this issue is very common problem amongst my clients. If you encounter issues like no artist / title displayed, artist image showing loading for very very long time or player not loading at all this is probably the problem.

Solution to this problem is rather simple. First you need to find out which port is the problem and then you need to contact your web hosting provider to unblock the specific port. In some cases web hosting providers did not fulfill client's requests but in most cases they do. To find out which port is your streaming service using you can simply look at the link. E.g.: http://defikon.com:8000/ is using port 8000. So basically http://URL:PORT/ format is what you need to be focused on.

Note: There are also other reasons why live information may not be shown. Please check the log file (/tmp/logs/player.api.log) before attempting to contact your web hosting provider.

So why other players don't need this or suffer same issue?

This question has been asked and answered hundreds of times. But I will answer it again so those who did not find the answer can find it here. Its simple, most other scripts are based on client side which means they're using your computer to get the same information so the ports on your computer also must be opened. In most cases computer doesn't block ports for such purposes. My player however works differently. To ensure best possible performance / information accuracy the same task is done on the server. The server does all instead of your computer and if server doesn't have access to the stream, it fails and can't show the information. So that is the reason why your web hosting must have access to the specific host/port in order to show live track information (artist / title).

Advanced configuration and options

In this section I will cover advanced configuration and options. This script comes with a lot of pre-defined settings which are there to make the setup as easy as possible. But for advanced users that is usually not enough. Since the control panel is very self explanatory I will only cover the advanced part of the settings, which means explaining how some options work.

Control Panel Removal

AIO Radio Station Player comes with very extensive control panel which allows you to change all the options easily, but is it required? NO! It is not! If you are sure that you can manage the player on your own, you can simply delete folder panel and be done with it for good! I do not offer support as in instructions how to configure the player without the control panel, since that is why I wrote it, but you will still receive player support. But note that without panel you do lose some features like Updates and Embeded generator.

Custom Color Scheme(s)

The script's Control Panel comes with built in function to compile custom color schemes. Its easy as changing a single color value to another and clicking Compile. You will find this option under Tools tab. If you wonder how to compile the SCSS on your own, open up file /templates/{template_name}/scss/basic.style.scss and uncomment color variable on top of the file. It will look something like this:


// Imports (other required SCSS files)
@import 'reset-browsers.scss';

// Configure SASS options (Colors, Animations, Fonts etc...)
$font-family: 'Roboto', sans-serif;
$ease-out 	: cubic-bezier(0.25, 0.8, 0.25, 1);
$ease-in  	: cubic-bezier(0.55, 0, 0.55, 0.2);

// Configure color (for AIO Radio Control Panel compiler, this must be commented out!)
// $bg-color: #2196f3;
/* ================================================================================================== */

After you uncomment variable $bg-color you can proceed with SCSS compile process and save the new file under templates/{template_name}/custom/. After the compilation is done, you will find your new color scheme under Color Scheme setting in channel edit/add mode.

Note: Since 1.3x release, the templates under Settings dictate which set of color schemes display's under the Color Scheme option. That means if you compile "Default" template theme, it won't be visible until that template is selected under Settings.

Managing Artist(s) Images

In Control Panel under Tools tab you have an option to manage artist images. This option will make management extremely easy. In previous player's there was an option to add custom images as well, but it required knowledge of Regex that replaces artist names. With the new system this is uneccessary. You can simply enter normal artist name into input field, select a image and Upload it. The image will be automatically re-sized to 280x280px (default image size) and it will also be compressed to optimal quality.

You can also upload your own images (without compression) to folder tmp/images/. The image name regex is something like this /[^a-zA-Z0-9\.-]/ which means that all characters except those that you see are replaced by a dot. So for example name David Guetta ft. Timber comes out like david.guetta.ft.timber.

Adding Translations

This player has an option to enable or disable multi-language support. It also allows you to set a custom language. Both options can be found in the control panel. Under the Language(s) tab you can add/edit or delete different languages which are named by the ISO 639-1 naming standard. This standard was used due to browser language preference. If you enable option Multi-language support the player will check if it has the same language that browser uses. If it does it will display player language based on browser preference otherwise it will use default language set in the options menu.

Player Updates

The update system requires Codecanyon purchase code to work. The update check function is simple and it uses JSONP (Javascript call) to check for newer versions. Once the new script version is available you will see an option to initiate update process. The process downloads an update zip file and extracts it into the player folder. In this process PHP CURL and PHP ZipArchive extensions are required. The update is always written the way it will not replace any user defined configs. But in any way its very much recommended to create script backup before initiating update process.

Note: Script comes with free updates for life. This means as long as script is being sold on Codecanyon (Part of Envato) you will receive free updates.

Stats Settings

There are various options for the stats. But I will only cover two in this section. The first option called Stats refresh speed is very essential option for people who would like to speed up player's information. By reducing timer the information will be more "live" so refreshe more often. But higher the refresh rate the more requests per second player will make. This can lead into account termination if you use shared web hosting provider or the provider limits requests per second. I actually recommend higher refresh time for shared hosts because with a lot of listeners this can quickly lead into problems. The stats are always cached for minimum 6 seconds. That means that if you have 1000 listeners only one of them will do the long request getting stats & artist image from LastFM. Other 999 will receive cached response.

The second option is Artist/Title Regex. This option is for developers and people who really know POSIX Regex well. Anyway so what does this do... The regex is used to match currently playing artist and title from radio information. Most of the tracks use format Name of artist - Name of Track so the regex matches the first part Name of Artist as artist variable and Name of Track as title variable. If you require some special configuration that should match the artist/title differently, you can change it here. But I can not offer support for this option. I added it for really advanced users only.

Different Stream Qualities

This is not really an advanced option, but I have to explain that its there :)! All my scripts supported this option before, but now the option is very different. You are not forced to use different qualities but its totally optional. If you configure only single quality per channel, the setting button will be hidden. Most stations I encounter do not use this so I made it very optional. I do however recommend for those who can add more qualities that they do. It can be a useful tool to reduce bandwidth usage on the streaming server and also offer your listeners lower stream quality for smart mobiles and tablet devices. There are still people who have very slow Internet connection and with this option they can enjoy stable connection with just changing a setting.

Using player API on your own web site or script (since v1.08)

The player has always been using PHP to handle to back-end operations (connecting, reading, parsing and caching stats) and so after version 1.07 I decided to add JSONP support which is a simple add on but it extends functionality and options of the player much further ahead. Also have a note that this has already been working since first release, but only when accessed on the same domain name. This is why the new add on also brings an option to enable or disable Player API via external calls (JSONP is disabled by default).

Bellow I will demonstrate how powerful this API can be when coded properly. It does require JQuery or Javascript knowledge, but it should be rather easy to understand if you know what JQuery is and if you ever wrote a simple code with it. Note: The examples bellow are based on bootstrap framework, all though the style on this web site is custom designed

Add ability to open player with selected channel

Via simple JSONP request we can get the list of all available channels on the player and than show them as list so people can select which channel to open.
Note: The URL of JSONP call must be changed to your domain/player URL.


Source code:

<script type="text/javascript">
	$(document).ready(function() {

		$.getJSON('http://linktoplayer.com/player/?c=all&callback=?', function(response) {

			if ( response == null ) alert('Something went wrong!');

			$.each(response, function(key, channel) {

				var channelrow = $('<li><a href="#">' + channel.name + '</a></li>'); // HTML for channel
				channelrow.on('click', function() { // Bind window open
					window.open('https://prahec.com/projects/aio-radio/demo/#' + channel.name, 'aio_radio_player', 'width=720, height=355');
					$( this ).closest( '.channels-list.active' ).removeClass( 'active' ).hide();
					return false;
				});

				// Finnaly append the row to list
				$('.channels-list').append(channelrow);

			});

		});

	});
</script>

<div class="btn-group">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
	<ul class="dropdown-menu channels-list" role="menu"></ul>
</div>
Get currently playing track

This option allows you to show currently playing track and artist image any where. Example also uses interval so the data is fetched every 10 seconds.
Note: This only works if you specify name of the channel, e.g.: http://playerdomain.com/player/?c=Demo%20Channel

On Air:

Source Code:

<script type="text/javascript">
	$(document).ready(function() {

		// Simple function that uses JQuery getJSON and JSONP request
		function getstats() {

			// Attempt to get stats for "Demo Channel" channel	
			$.getJSON('http://linktoplayer.com/player/?c=Demo%20Channel&callback=?', function(response) {

				if ( response == null || response.artist == null ) alert('Something went wrong!');
				$('.trackinfo').html(response.artist + ' - ' + response.title + '<br>\
					<img width="140" height="140" class="thumbnail" src="http://linktoplayer.com/player/' + response.image + '">');
					// Note: If image caching is enabled the returned URL from the player is in this style: tmp/cache/meghan.trainor.png otherwise its a full URL to the image

			});

		}

		// Execute function and start interval
		getstats();

		// Execute this function every 10 seconds
		setInterval(getstats, 10000);

	});
</script>

<span class="trackinfo"></span>
Get all channels and their status

You can also get list of all channels via JSONP and then query each channel for their status. See example bellow and its source code to understand the idea.
Note: This feature will create massive amount of requests (depends on amount of channels you use) so please use it with great care!

Source Code:

<script type="text/javascript">
	// Called every 40sec
	function get_channels_status() {

		// Get list of channels and query channels for status
		$.getJSON( 'https://prahec.com/projects/aio-radio/demo/?c=all&callback=?', function( response ) {

			var html_container = $( '.all-channels-status' );
			html_container.html('<ul></ul>');

			// Problem?
			if ( response == null ) html_container.html( 'Unable to get list of channels...' );

			// Loop through channels
			$.each( response, function( key, channel ) {

				// Get this channel status
				$.getJSON( 'https://prahec.com/projects/aio-radio/demo/?c=' + encodeURIComponent( channel.name ) + '&callback=?', function( response ) {

					html_container.find( 'ul' ).append( '<li><b>' + channel.name + ' on air</b>: <img width="14" height="14" src="https://prahec.com/projects/aio-radio/demo/' + response.image + '"> \
					' + response.artist + ' - ' + response.title + ' (Data is ' + ( ( response.status == 'cached' ) ? 'cached' : 'not cached' ) + ')</li>' );

				} );

			} );

		} );

	}

	get_channels_status();
	setInterval(get_channels_status, 40000);
</script>

<div class="all-channels-status"></div>

Product Updates

This item is sold exclusively on Codecanyon and so in normal circumstances the updates should be available through item downloads pages but they're not. The explanation is rather simple. By making updates work only with real and working licenses I have control over licenses eligible for updates and so I have little more chances to stop the updates from being leaked out for free. For an author who is working very hard to keep his item in best working and at most updated condition as possible, knowing that people are sharing and hacking the item, it breaks my heart. This is not only about money but also about principle and respect to my work.

Product Changelog

Loading changelog, please wait...

Frequently asked questions and answers

There are many common questions people ask when using my players or scripts, so I've allowed my self to use this documentation to answer to all the questions at the same time. Yes including other items FAQ's.

Autoplay in Chrome 66 does not work?

Chrome version 66 and above has got update which supposed to save bandwidth and goes against ads. Now that I believe it does, but its also annoying for players like mine. For all the details about the update and the feature, check out this page: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes. Its worth taking a note, there is nothing we can do about some cases of triggering this new "update".

Creating custom template?

After version 1.30 you can customize player appearance as you wish and these changes can be "permanently" safe. To do so, you simply need to copy/paste template you wish to build upon inside folder /templates and name it the way you wish to name your new template. Newly created theme will stay safe from future updates. Note: The new template will not show up on the selection until you clear template cache which is stored in tmp/cache folder and is easiest cleared by going to "Channels" and clicking "Flush Cache".

I forgot my password or username, how do I recover the details?

If you forgot only the username, simply open file /inc/conf/general.php and look for variable admin_user. The default user is admin. If you forgot password, you will have to reset the configuration file to the original state. To do so simply download purchased player ZIP file from Codecanyon and replace file /inc/conf/general.php with original file from the zip. After doing so you can login to player panel with default user admin and password password.
Note: If you do not wish to reset config, you can also just replace variable admin_pass from the original file.

Track information is not displayed

First please read documentation provided above. This script will also create logs which will give information about what went wrong. You can find the log file in folder tmp/logs/. The filename is usually player.api.log.

Template compared to theme?

Since version 1.30 player comes with "Templates" and "Themes" which are limited to certain application. While themes (meant as Color Schemes) can be used differently regarding to the channel the templates can only be used globally through the player. Templates come with their own "HTML" tag set while "themes" are just basically CSS (stylesheet) files with custom elements, color schemes or just basic changes. The templates are generally bigger modification that includes different images, styles, schemes etc...

Credits & Copyright(s)

This player is based on few open source projects for which I have to give credits because without them, my work would be much harder and it would probably not be that good. I also have to thank StreamingPulse for providing me a free stream for the demos.