How to install the AudioNow WebPlayer™ in Joomla:

Requirements - You must be logged into the Administrator page as a Super Administrator. (www.yourpage.com/administrator/index.php)

1. Adjusting Editor Settings
There may be several editors on your site depending on what plug-ins you have installed. These instructions will cover the standard editor, TinyMCE and JCE. For others, please consult the user instructions or contact us.

Joomla Standard Editor

  1. Once logged in to the Administator page, select the 'Content' menu along the top bar and click on the 'Article Manager.'
  2. Along the top-right, click on the 'Parameters' button. (Note: This button will not be visible if you are not a Super Administrator)
  3. A pop-up will appear; this is the 'Global Configuration' menu. Scroll down to 'Filtering Options' which will look like this:


  4. Highlight all of the options except '- Super Administrator'.
  5. Select 'Filter Type' -> 'Blacklist (Default)'.
  6. Scroll to the top and click save.
This will remove the default editor settings for Super Administrators, allowing them to add <script> and <style> code to articles.
Check this article for more details.
Depending on your version of Joomla, some of these options may have different names. See this article for details about Joomla 2.5
If you have no plug-ins that affect the article editor, you are done. If you have TinyMCE or JCE, please continue. You can see what plug-ins you have by selecting 'Extensions' from the top menu bar and clicking 'Plug-in Manager'.

TinyMCE Editor

  1. Click the 'Extensions' tab along the top menu and select 'Plugin Manager.'
  2. Use the Filter bar to search for 'TinyMCE'
  3. Select 'Editor - TinyMCE 2.0' to open the Plugin Manager
  4. In the 'Parameters' menu on the far right, set the following values:
    • Code Cleanup on Startup -> OFF
    • Code Cleanup on Save -> ALWAYS
    • Entity Encoding -> RAW (Maybe Do Not Clean HTML Entities -> YES on older versions)
  5. Save or Apply the settings (upper right).
Check this article for more details.

JCE

  1. Click the 'Components' tab along the top menu and select 'JCE Administration -> Global Configuration.'
  2. Set the following values:
      3. Cleanup & Output
    • Cleanup HTML -> NO
      • Formatting & Display
    • Container Element -> Disabled
  3. Along the top, select 'Editor Profiles.'
  4. Select the Profile Name that applies to you. If unsure, select 'Default.'
  5. Select the 'Editor Parameters' tab.
  6. Select the 'Options' tab (left).
  7. Set the following values:
    • Allow Javascript -> YES
    • Allow CSS -> YES
  8. Save or Apply the settings
If you complete the rest of these instructions without success, please check to make sure that no other plugins are affecting the article editor.

2. Adding Code

  1. To test this code, you can create an article going to the Control Panel (/administrator/index.php) and clicking 'Add New Article.'
  2. Once in the Article Editor, change to HTML mode by clicking the button with '<>' (hovering over it should display the text 'Toggle Source Code').
  3. Insert the following code:
  4. <div class="an-player"></div>
    <link href="http://stream.audionow.com/webplayer/skin/an.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://stream.audionow.com/webplayer/js/jquery.jplayer.an.js"></script>
    <script type="text/javascript" src="http://stream.audionow.com/webplayer/js/jplayer.playlist.an.js"></script>
    <script type="text/javascript" class="an-script" src="http://stream.audionow.com/webplayer/js/an.js" data-station-id="" data-autoplay="0" data-open-playlist="0"></script>
    IMPORTANT: The line "<div class="an-player"></div>" must come before the rest. Otherwise the code will not work.
  5. Apply the changes.
  6. Preview the article. It should look like this.