ProRadio
Internet Radio 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.
Its 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 with enabled remote access (check with host)
- LastFM Developer API key (optional)
- Shoutcast/Icecast Admin access or MySQL access to SAM Broadcaster
- Some space to cache artist images
Main features
- Easy to customize and deploy (Setup script included)
- Based on JPlayer (HTML5 & Flash Fall back)
- Last FM and iTunes APIs for 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 users to customize experience (Turn Flash on/off, Auto Play on/off, Change Color Scheme, Change Stream Quality (if you have multiple streams))
- Uses CSS3 Transitions where possible
- Uses fontAwesome to deliver scalable graphics for no quality loss on larger DPI displays
- Responsive design which adapts player down to maximum of 360px width
- 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
With setup script the player is extremely easy to configure and deploy.
- Upload contents of purchased ZIP file to your web server
- Apply chmod 0755 to following folders (including subfolders): '/cache/' and '/setup/'
- Navigate your browser to http://website.com/player-folder/setup/ to start setup process
- If every thing is okay, click "Continue..." to configure the player.
- Configure every thing on the "Configure Player" page. Every thing is required except defaults, once done click "Save & Continue..."
- On this page now you will be able to test the configuration and see debug information if there is issue connecting to your shoutcast/icecast/sam servers
If every thing is okay, click "Finish Setup". - On this page now, your configuration should be saved into "inc/config.php" file, if that fails please manually copy the code from the page into the "inc/config.php" file and apply chmod 644 on it.
- This is it, you're done! Now just remove setup folder and you're good to go!
Example of generated config file:
<?php
$config = array(
'title' => 'ProRadio - Internet Radio Player',
'lastfm-api-key' => '******************************',
'facebook' => 'https://www.facebook.com/ILHM.RADIO',
'twitter' => 'Your custom Twitter message',
'streams' =>
array(
'High Quality 320K' =>
array(
'oga' => 'http://radio.ilhm.eu:8005/ilhm.ogg',
'mp3' => 'http://radio.ilhm.eu:8000/ilhm.mp3',
),
'Medium 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',
),
),
'stats' =>
array(
'type' => 'SAM',
'host' => 'localhost',
'user' => 'username',
'pass' => '********',
'db' => 'sam',
),
'colorschemes' =>
array(
'Dark Light' => 'assets/css/dark.css',
'Loomie' => 'assets/css/loomie.css',
),
'defaults' =>
array(
'quality' => 'High Quality 320K',
'useflash' => 'true',
'autoplay' => 'true',
'colorscheme' => 'default',
),
);
?>Advanced Usage & Notes
Bellow there is set of features you can customize without setup script.
See example code bellow (this should be placed in bottom of config.php file inside inc folder.
<?php
$player = array(
'info_timer' => 15,
'ajaxtimeout' => 10000,
'artist_maxlen' => 20,
'title_maxlen' => 30,
'showTime' => true,
'moreinfo_url' => 'http://www.last.fm/music/',
'showtimeout' => '0'
);
?>Issues
If your player is not showing current artist & title of playing track, first check error.log inside your player folder. In case you can not understand what is wrong, contact me through my codecanyon contact page so I can see you have purchased the player.
Updates check
This product comes with a update script which allows you to check for updates from time to time. Simply run "update.php" inside root folder of the player. You will have to provide purchase code which is explained how to optain on the screenshot in the update script. Now before you click "Check & Download" make sure you have backed up your current player. The update script will replace all files inside folder (except additional ones like config.php)!
Custom Artist Images
You can also use your own artist images and iTunes & LastFM API all at once.
Its pretty easy, just put your image into "assets/artists/" folder.
Note: File name for the images must be something like this: 'David Guetta & Akon' = 'david_guetta_&_akon.jpg', otherwise it won't get detected by the script!
Supported file formats are: JPEG, GIF, JPG and PNG.
Change Default Player Logo
To change the default LOGO of the player, go to folder "assets/img/" and replace "logo.png" or "logo.svg".
If you replace it with PNG file you will also have to change extension in "index.php" file.
Credits
- jQuery: http://jquery.com
- jPlayer: http://jplayer.org/
- FontAwesome: http://fortawesome.github.io/Font-Awesome/
- ILHM Radio: http://www.ilhm.eu/
- Artists Images Copyrights are retained by their owners.