Listen - A Media Player Section For PageLines Five

[chrisayers+ 105]

I do a lot of work for internet radio stations. I needed a custom section for  Shoutcast codes and html 5 player. I created this section to use.

http://worldwebscapes.com/listen-a-media-player-section-for-pagelines-five/

Enjoy.

Overview

The Listen section is a collection of multiple layouts built into one, providing a simple and intuitive interface for managing audio sections.

 

 

Installation & Activation

Listen can easily be downloaded from World Webscapes.

Download the plugin and install. It will now appear in your 'Plugins' tab.

Click 'Plugins', and find your Listen plugin (titled PageLines Section Listen).

Click 'Activate' to be able to use the plugin inside your editor.

Go to your PageLines Builder where you will now find Listen in the 'Components' section.

Settings

As with all section, the Listen section includes the Standard Section Options such as padding/margin, background options and etc.

Listen Format

Controls the layout of the section based on the option selected. There are three formats to choose from, all three can be used in reverse layout.

Listen Title.

Put the name of your audio file here. <h1>...</h1> tag.

Audio File Location

Place any HTML5 audio file location or Flash Player Code Here. Please visit http://shoutcastwidgets.com/flash_player_generator.php to generate this code for Shoutcast or Icecast streaming. <h3>...</h3> tag.

 

Logo Or Media Image

Add an image to Listen by either using the Upload option or selecting an image from the WordPress Media library.

Listen Links

Listen supports two optional buttons that appear beneath the Subheader option.

Button URL: Enter the URL for the address you wish the button to navigate to.

Button Text: Input text to label the button.

Button Color: Select from several color schemes.

Button Size: Select from four sizes such as Standard, Large, Small and Mini.

Open New Tab? Choose whether the button upon click opens in a new window/tab.

For button style examples, see the Button sections documentation.

Footer Area Text

Put any additional information about your audio file. This will be placed below content.

Bold, Italic, Underline

Select text alignment left, center or right

Control the tag that wrap the subheader, select between header tags <h1> to <h4> or <p> tag.

Toggle Raw Text, allows you to disable the built-in WYSIWYG and use raw text only.

Shoutcast And Other Scripts Area

Use CentroCast or other hosting scripts here to display your stream information

Test This

 

<audio controls="controls"><source src="http://199.189.111.150:8020/;stream.mp3" type="audio/mp3" /></audio>

Paste This In Scripts Section

Current song: <a href="http://st3.webradioworld.net:2199/tunein/twister.pls" id="cc_strinfo_song_twister" class="cc_streaminfo">Loading ...</a><br />

Stream title: <span id="cc_strinfo_title_twister" class="cc_streaminfo"></span><br />

Bit rate: <span id="cc_strinfo_bitrate_twister" class="cc_streaminfo"></span><br />

Maximum listeners: <span id="cc_strinfo_maxlisteners_twister" class="cc_streaminfo"></span><br />

Server status: <span id="cc_strinfo_server_twister" class="cc_streaminfo"></span><br />

Station time: <span id="cc_strinfo_date_twister" class="cc_streaminfo"></span> <span id="cc_strinfo_time_twister" class="cc_streaminfo"></span><br />

Album image:<br /><img id="cc_strinfo_trackimageurl_twister" class="cc_streaminfo" /><br /><a href="#" id="cc_strinfo_trackbuyurl_twister" class="cc_streaminfo">Buy this album</a><br />

<script language="javascript" type="text/javascript" src="http://st3.webradioworld.net:2199/system/streaminfo.js"></script>

<div id="cc_recenttracks_twister" class="cc_recenttracks_list">Loading ...</div>

<script language="javascript" type="text/javascript" src="http://st3.webradioworld.net:2199/system/recenttracks.js"></script>