AIO Radio Station Player

Documentation & 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 many 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 the 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 the 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 scripts and make a new one which will fix all that and more. The new player is re-coded from the ground up.

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

Extensive list of features

  • Responsive Design
  • Multi-language based on browser language setting
  • Compatible with OpenGraph crawlers (Like Facebook)
  • 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 multichannel(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 a control panel (long cache))
    • Radionomy Method (Uses Radionomy public API with your key/radio ID which is cached using callback method)
    • Custom (External URL using plain text format e.g.: "Artist - Title") - since v1.07
  • Advanced Methods from API(s) like ability to read artwork from Centovacast or Radionomy
  • HTML5 Audio API with Flash fallback support based on jPlayer jQuery plugin
  • Written in HTML5 and CSS3 using SCSS framework allowing easy (also within the control panel) compilation of various color schemes
  • Ability to use multiple templates on top of various color schemes (advanced templates, like old HTML5 Player design)
  • Player uses either LastFM, iTunes, EchoNext or Custom 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.
  • External API integration (show playing information on your website, including artworks!)
  • Easy installing of the updates through the player's Control Panel
  • Continuous updates, 42 updates since release date until today
  • And much more which you will discover on your own :)

How to install and setup the script

After purchasing the script you will be able to download the 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. The player comes with pre-defined folders and a few general options. But it does not include any channels or artist images. You will have to set that up by yourself.

First step

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

After extracting all the files on your web server, please change chmod of the 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 644 (if you cannot save settings, try 755). I included the first configuration to make your life easier, but that may cause an 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 the following details into the form:

Username: admin
Password: password

Once you sign into the panel, my advice 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 an 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, the player may not work properly. Once you are done, click Save button. If everything is OK you will be redirected to the 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 a 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. The same principle applies to the different Qualities setting.

Debugging player's issues and problems

Most shared web hosting providers block required ports to which the player has to connect to. The ports are used by the streaming servers, not the player itself. For example, Shoutcast uses port 8000 by default on which listeners can listen to music. The 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 a file called php.log.
Problems with API(s) will be logged into a file called player.api.log. These errors are usually the reason why the radio information is not displayed.

Understanding issues

Issues like Invalid Configuration you can fix yourself. But if you see an issue like Connection to X server failed you will have to check if your provider is blocking the 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 the example bellow.

Toggle CURL Debug example

Issues like CURL extension is not loaded! are self-explanatory. This specific issue means that the PHP CURL extension is not available for the script to use. The fix is simple: contact the 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 players and the services. This is not done intentionally. Firewalls can ensure a certain level of security against hackers so providers are obligated to use them. But yes, this issue is a very common problem among 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.

The 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 the 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. It's simple, most other scripts are based on the 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, the computer doesn't block ports for such purposes. My player however works differently. To ensure the best possible performance/information accuracy the same task is done on the server. The server does all instead of your computer and if the 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 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 a 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 on 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 a panel you do lose some features like Updates and Embeded generator.

Custom Color Scheme(s)

The script's Control Panel comes with a built-in function to compile custom color schemes. It's 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:



@import 'reset-browsers.scss';


$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);



/* ================================================================================================== */

After you uncomment variable $bg-color you can proceed with the 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 the "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 the previous player, 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 unnecessary. You can simply enter the normal artist name into the input field, select an 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 the 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 the browser uses. If it does it will display player language based on browser preference otherwise it will use the default language set in the options menu.

Player Updates

The update system requires a valid License Key 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 the 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, it's very much recommended to create a script backup before initiating the update process.

Note: Script comes with free updates for life. This means as long as the script is being sold 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 a very essential option for people who would like to speed up a player's information. By reducing the timer the information will be more "live" so refreshed more often. But the higher the refresh rate the more requests per second player will make. This can lead to account termination if you use a shared web hosting provider or the provider limits requests per second. I recommend higher refresh time for shared hosts because, with a lot of listeners, this can quickly lead to problems. The stats are always cached for a minimum of 6 seconds. That means that if you have 1000 listeners, only one of them will do the long request for getting stats & artist image from LastFM. Other 999 will receive a cached response.

The second option is Artist/Title Regex. This option is for developers and people who know POSIX Regex well. Anyway, so what does this do... The regex is used to match the 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 an advanced option, but I have to explain that it's there :)! All my scripts supported this option before, but now the option is very different. You are not forced to use different qualities but it's 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 those who can add more qualities than 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 a very slow Internet connection and with this option, they can enjoy a stable connection by just changing a setting.

Using player API on your website or script (since v1.08)

The player has always been using PHP to handle 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 addition but it extends functionality and options of the player much further ahead. Also, a note that this has already been working since the 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).

Below 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 simple code with it. Note: The examples below are based on the bootstrap framework, all although the style on this website 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 then show them as a 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>'); 
				channelRow.on('click', function() { 

					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;

				});

				
				$('.channels-list').append(channelRow);

			});

		});

	});
</script>

<!-- Insert anywhere on the page -->
<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 the currently playing track and the artist's image anywhere. The example also uses interval so the data is fetched every 10 seconds.
Note: This only works if you specify the name of the channel, e.g.: http://playerdomain.com/player/?c=Demo%20Channel

On Air:

Source Code:

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

		
		function getPlayingInformation() {

			
			$.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 + '">');
					

			});

		}

		
		getPlayingInformation();

		
		setInterval(getPlayingInformation, 10000);

	});
</script>

<!-- Insert anywhere on the page -->
<span class="trackinfo"></span>
Get all channels and their status

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

Source Code:

<script type="text/javascript">
	
	function get_channels_status() {

		
		$.getJSON( 'https://prahec.com/projects/aio-radio/demo/?c=all&callback=?', function( response ) {

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

			
			if ( response == null ) {
			    html_container.html( 'Unable to get list of channels...' );
			}

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

				
				$.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>

<!-- Insert anywhere on the page -->
<div class="all-channels-status"></div>

Product Updates

Updates are available exclusively through the item update system. The reason for that is to prevent sharing of unlicensed versions of the player. I cannot express how much time and effort has gone into updates for this radio player, and so I would really appreciate if my continuous work is appreciated and not freely shared.

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 myself to use this documentation to answer all the questions at the same time. Yes including other items FAQ's.

Network error occurred!

Since Chrome version release 80 (February 2020) websites can no longer mix content (https/http). That may cause AIO to show up "ERROR: Network error occurred!". That means that the URL to stream was automatically changed from HTTP to HTTPS because you access a web page (AIO Radio Station Player) e.g. https://player.com/ while Shoutcast streaming server (for example) only supports "http" content. Since this is "mixed" content, Chrome 80+ will automatically try to use "HTTPS" instead. Read more here.

Autoplay in Chrome 66 does not work?

Chrome version 66 and above have got an update which supposed to save bandwidth and go 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. It's worth taking 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 the template you wish to build upon inside folder /templates and name it the way you wish to name your new template. The newly created theme will stay safe from future updates. Note: The new template will not show up on the selection until you clear the 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 the password, you will have to reset the configuration file to the original state. To do so simply download the player source files and replace file /inc/conf/general.php with the original file from the zip. After doing so you can log in to the player panel with the default user "admin" and password "password".

Note: If you do not wish to reset the config, you can also just replace the variable admin_pass from the original file.
Note: Since release 1.48, you should simply remove the key "admin_pass" from the configuration file, and you will be able to log in with the default password.

Track information is not displayed

First please read the 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 applications. While themes (meant as Color Schemes) can be used differently regarding 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...

Custom "Track Info Method

In version 1.34 (23th August 2019) I have introduced a new method "custom". This method allows you to link the player to an external website/api that returns the artist name, track title and artist image. If an image is missing, the player will attempt to read it from various sources like it would in other methods.

Example of the expected response (response code 200):


{
   "image":"https://some-full-url-to-image.com/imagename.jpg",
   "artist":"David Guetta",
   "title":"Memories"
}
Update 1.49, player no longer works and/or pages are blank

In the update 1.49 released on 26th March 2023, we have changed the configuration format. The update system should automatically convert your configuration files but it would seem that due to some server configurations, this does not work. If you are experiencing issues with the player after the update, please try to manually convert the configuration files:

  • inc/conf/general.php
  • inc/conf/channels.php
  • inc/lang/en.php
  • inc/lang/sl.php
  • and other language files inside inc/lang/ folder.

To convert the files, simply open them in a text editor and replace all instances of $settings =, $channels =, $lang = with return.
If you are not sure how to do this, please contact your hosting provider.


<?php
§settings = array(
  'site_title' => 'AIO Radio',
  'title' => 'AIO - Radio Station Player',
  'description' => 'Looking for All-in-one radio station player solution?',
...
);
                            

Here is an example of how the configuration file should look like after the update:


<?php
return array (
  'site_title' => 'AIO Radio',
  'title' => 'AIO - Radio Station Player',
  'description' => 'Looking for All-in-one radio station player',
...
);

Credits & Copyright(s)

This player is based on a few open-source projects for which I have to give credit 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 with a free stream for the demos.