Jump to content


This topic is now archived and is closed to further replies.


Listen - A Media Player Section For PageLines Five

Recommended Posts


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.




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.


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=";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>


Share this post

Link to post
Share on other sites

  • Similar Content

    • yemoonyah
      By yemoonyah+
      Hi, even though I just got a SSL certificate, I can't get the green padlock to appear due to the following error:
      :A file with an insecure url of "http://yemoonyah.com/wp-content/plugins/pl-section-boxes/check.svg" was loaded via the javascript file: https://yemoonyah.com/wp-includes/js/jquery/jquery.js?ver=1.12.4 on line 3. The insecure URL may not be directly contained in the script file and may exist elsewhere."
      I figured if I delete and re-install the plugin it might fix the problem but will my boxes on the website still be there? Or do I have to redesign everything all over again if I delete the plugin and then re-install it?
    • cstudio
      By cstudio
      I need some help!  I am trying to add a Square booking script.  When I add it to a embed section it crashes the page editor and I am unable to save the page version.  I have tried using different browsers with the same result.
       I can add the script on the backend in the word press content area and get it to show and work, but it look terrible.  A page with in a page.  http://www.zoeanastacia.com/booking/.
      I need help getting the page editor to work properly or to make the wp content section to not look like an 90's iframe.
    • oseehys
      By oseehys+
      Hello There,
      So i want to use platform 5 and DMS sections on a single page, i am using a child theme with pinspro as my main theme and i activated platform 5, the only problem am having so far is the fixed option, my navbars are not aligning to their default size, and it will be great if platform 5 header and footer section will function, has anyone used this option, how can i make the best use of platform 5 and DMS on a site
    • yemoonyah
      By yemoonyah+
      I tried to make a simple change on my opt-in page today by reordering two sections.
      Now they won't save and whatever I do, the same 2 section will be stuck to the top.
      This is a huge problem since it is my opt-in page!
      (I'm on the latest WP & PL version)
    • Anthony King
      By Anthony King+
      I have to say that I like the Layout and the Template based sections. Some of them are really impressive.
      One of the things that I would like to request though is the possibility of being able to dynamically rearrange the layout.
      An example of what I am talking about is take the Agency Section. It's current layout starts with the
      Splash Module then the Portfolio Module then the Service Module and so on and so forth.
      What would be great is if we were able to move these modules around. I.e have the Service Module first
      then maybe the Splash, and then the portfolio.