Line-R Radio (JS): Documentation

«Line-R» Sticky Radio Player

http://stormybyte.com/linerradio/

  1. What is Liner Radio Player
  2. Features
  3. Supported Formats
  4. Installing Player on Your Site
  5. Settings
  6. Continuous Playback
  7. Notes 

What is Liner Radio Player

Liner Radio Player it's a simple beautiful tiny radio player for your site (fig.1). Find the best sizes and colors for yourself and embed it in your page right now. It works on tablets and personal computers, you can even embed it to your mobile HTML 5 app. If you enjoy it, please rate us 5 stars at http://codecanyon.net/downloads. By doing this, you help us to delight you with good updates. Thanks so much! 🙂
Radio_Player_mini

Fig.1

Features

The plugin is designed for playback of Shoutcast and Icecast radio streams. It is very simple and elegant in appearance but very functional and flexible, so you definitely will be able to customize it to fit your needs and match your site.

For example, you can change its size, position, elements color and so on.

Thanks to the Nowplaying feature the artist and the name of the song playing are displayed above the waveform (fig.2) and in the history of playing (fig.3) that can be opened by clicking the burger-button next to the play button.

Radio_Player_display_the_current_song

Fig.2

Radio_Player_history of playing

Fig.3

History of playing can be used not only for informational purposes but for selling songs from your store - just set a link for search in your catalogue to the corresponding parameter.

Read more in the "Settings" section of this document.

 

Supported Formats

Liner Radio Player supports all HTML5 audio formats. In addition, it uses Flash callback to display the waveform.
Shoutcast & Icecast AAC+ broadcasting is supports now in Chrome, Safari, Opera 13+, Webkit browsers.
Icecast AAC+ is supports in Firefox and IE (Edge), if your Icecast server can convert flow to FLV format.
new The player supports unlimited number of radio stations.

 

Installing Player on Your Site

Step 1.

Upload all files from the script folder to the root of your site. By default, this folder is named /linerRadio/. If you upload it to your server, you'll get a working example accessible at http://example.com/linerRadio/index.html

Step 2. 

In order to install the player not on a separate page of your site but on the entire site, you need to add the style files and scripts first. To do this, insert the following code before the closing </head> tag in file that is used on each page of your site (for example, header.php or footer.php).

Important: Do not forget to specify the correct name of the folder Line-R Radio was installed in, if you changed the default folder.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="/linerRadio/js/iscroll.min.js"></script>
<script type="text/javascript" src="/linerRadio/js/soundmanager2.js"></script>
<script type="text/javascript" src="/linerRadio/js/jquery.linerRadio.js"></script>
<link href="/linerRadio/css/stormy-plugin.css" rel="stylesheet">

Also you can find this code in plugin folder in file /linerRadio/index.html.

Step 3.

Insert one more code before the closing </head> tag:

<script>
jQuery(function($) {
       $('body').linerRadio({
                 autoplay: true,
                 veryThin: false,
                 roundedCorners: false,
                 accentColor:"#008DDE",
                 playlist: [{
                  stream: "http://80.86.106.136:80/;", // URL of your stream
                  icecastORshoutcast: "shoutcast", // Type of your radio stream - enter either "icecast" OR "shoutcast"
                  isAACplus: false,
                  streamName: "Stream Name",
                  defaultCover: false,
                  nologo: 0,
                  buyUrl: false
                 }]
       });
});
</script>

The only line you have to change is the link to your radio stream:

Instead

stream: "http://80.86.106.136:80/;",

Enter

stream:"http://YOUR_STREAM_URL/;",

Important: If you use Shoutcast server - be sure that /; (slash and semicolon characters) are present at the end of the link as they are mandatory

Step 4.

Settings

autoplay                 -Enable or disable the autoplay mode [true, false]
accentColor           - Set the accent color for the whole player ["#cc181e","#008DDE", any html hex colour]
veryThin                 - Enable or disable the tiny skin style of the player [true,false]
roundedCorners     - Set the style of player corners. Enable this setting to make player corners rounded [true, false]

The explanations of each line of code are shown below:

autoplay: true,                      // If enabled, the player will automatically start playing when the page is loaded.
Otherwise, press Play button to start the playback
veryThin: false,                    // Set true for more compact appearance of the player
roundedCorners: false,       // Set true if you want to enable rounded style of player corners
accentColor:"#008DDE",    // Specify HEX-code of the accent color of player controls

 

stream: "http://80.86.106.136:80/;",                     // URL of your stream
icecastORshoutcast: "shoutcast",                            // Streaming type:  "icecast" OR  "shoutcast"
isAACplus: false,                            // Be sure to set this flag value to true if your stream is broadcast AAC+
streamName: "Stream Name",                               // Name of your station
defaultCover: “URL”,                   // URL of the default cover. Used when a cover could not be determined
nologo: 0,                                                                    // Display or not a developer logo
buyUrl: "http://stormybyte.com/?buySong=" // Link for search in your catalog  (if it exists)

 

You may change the settings as you want.

 

Important: If you use Shoutcast server - /; (slash and semicolon) are mandatory characters and always need to be present at the end of the URL specified in the Stream parameter.

 

To configure accent color of player controls set the “accentColor” setting to one of the values provided below or any other color in hex:

color of player

 

accentColor:"#fff",     //white
accentColor:"#008dde",   //blue
accentColor:"#cc181e",   //red
accentColor:"#ffdb4c",   //yellow
accentColor:"#45E427", //green
accentColor:"#ff6600", //orange

 

 

Continuous Playback

It is possible that playback can be stopped when the page is being loaded while you are navigating a site. This issue can be avoided only if your site is using AJAX technology. If you are user of WordPress CMS then installing free AjaxifyWordPressSite(AWS) plugin should solve the issue and, in most cases, provide a continuous playback. In case if site navigation is not implemented via AJAX, the player is not guaranteed to work continuously.

 

Notes

Volume slider may not work on mobile devices, so it will be hidden when viewing from phone or tablet. In addition, an auto play feature isn’t available on mobile devices, please press a Play button to start playing.
Note: Cookies may used for saving radio volume value.

AAC is supports (no basic support for AAC+/HE-AAC, eAAC+/AAC+ v2/HE-AAC v2)

But! AAC+ can be supported too (only for IceCast)!
It’s possible only for configured IceCast servers which can convert stream to flv. Just add ” ?type=.flv ” to your stream URL and music will play.

Example URL, http://ruhit.imgradio.pro:80/RusHit48 >> change to: http://ruhit.imgradio.pro:80/RusHit48?type=.flv
If you like Line-R Radio Player please leave us a ★★★★★ rating. A huge thank you from StormyByte in advance!

Download Line-R Radio (JS): Documentation