DOWNLOADS EXAMPLES SKINS DOCS SUPPORT
 
 

Javascript Audio Button

Leveraging the functionality built into Wimpy Button, we've created a simple Javascript audio button solution.

- Use basic text links and graphics to play tracks
- Only one track plays at a time
- Small, simple code to load, play and pause tracks
- Supports MP3, AAC, M4A audio file formats
- Integrates nicely with Web 2.0, DHTML, AJAX, Javascript and standard HTML

To set up the Javascript Audio Button:

1. Download and unzip the Wimpy Button Bridge package.

Click here to download the Wimpy Button Bridge package.

2. Upload the Wimpy Button Bridge files.

Create a new folder on your website called "wimpy" (or whatever you want) and upload all of the files to the newly created folder.

Example:

http://www.yoursite.com/wimpy/

Click here for examples

 

3. Adjust the URLs to files within the Javascript.

There are a few lines of code need to be configured to target certain files on your server, including images, the file the audio playback engine (wimpy_button.swf), and registration code.

Open the "wimpy_button_bridge.js" file on your local PC with a text editor.

NOTE: We recommend using Notepad (or an HTML editor) because other programs such as Microsoft Word will mess up the code.

The first few lines of code are:

var wimpyButtonSwf        = "wimpy_button.swf";
var wimpyButtonImagePlay  = "b_play.png";
var wimpyButtonImagePause = "b_pause.png";
var wimpyButtonReg        = "WIMPY_BUTTON_REGISTRATION_CODE";

Edit the file names so that a full URL is used. If you do not specify a full URL, nothing will work.

var wimpyButtonSwf        = "http://www.yousite.com/wimpy/wimpy_button.swf";
var wimpyButtonImagePlay  = "http://www.yousite.com/wimpy/b_play.png";
var wimpyButtonImagePause = "http://www.yousite.com/wimpy/b_pause.png";
var wimpyButtonReg        = "WIMPY_BUTTON_REGISTRATION_CODE";

Save the file and re-upload it to your server where the rest of the Wimpy Button Bridge files are located.

NOTE: If you don't have a Registration Code, leave the registration code "as is," the player will still work for 15 days. After 15 days, the player will no longer work, and you'll have to purchase a license for Wimpy Button. After purchasing a license, enter the Registration code into the "wimpyButtonReg" area of the javascript file.

4. Include the Javascript in your page.

This line calls in the "wimpy_button_bridge.js" Javascript file that you've uploaded to your website, which must be included in each page you wish to playback audio files.:

<script src="http://www.yousite.com/wimpy/wimpy_button_bridge.js" type="text/javascript"></script>

You can place the line of code anywhere in your HTML page. See source code in the "EXAMPLE.html" file for clues as to how to incorporate this line of code.

5. Include the play button image in a page

<img src="http://www.yousite.com/wimpy/b_play.png"
onClick="wimpyButtonPlayPause('http://www.yousite.com/wimpy/track.mp3')">

See source code in the "EXAMPLE.html" file for clues as to how to use a text link.

If you would like to hide the URL to your audio tracks, you can use the URLencryptor program to create encrypted URLs to files.

An encrypted URL looks similar to:

<img src="http://www.yousite.com/wimpy/b_play.png"
onClick="wimpyButtonPlayPause('__2Mmp2dnIlM0MxMXl5eTB5a29yJTdCcm5jJTdCZ3QwZXFvMWd6Y29ybmd1MXlkMXVjb3JuZ3UxUGtpanYwb3I1')">

 

HINT:

You may want to use an "absolute path" rather than a full URL to reference files. Doing so will prevent Wimpy from not working if a person does not use the "www" in the address to the page.

For example, rather that using:

var wimpyButtonSwf        = "http://www.yousite.com/wimpy/wimpy_button.swf";
var wimpyButtonImagePlay  = "http://www.yousite.com/wimpy/b_play.png";
var wimpyButtonImagePause = "http://www.yousite.com/wimpy/b_pause.png";
var wimpyButtonReg        = "WIMPY_BUTTON_REGISTRATION_CODE";

Use:

var wimpyButtonSwf        = "/wimpy/wimpy_button.swf";
var wimpyButtonImagePlay  = "/wimpy/b_play.png";
var wimpyButtonImagePause = "/wimpy/b_pause.png";
var wimpyButtonReg        = "WIMPY_BUTTON_REGISTRATION_CODE";

... Where the "/" at the beginning of the path to the file causes the browser to start at the "root" of your site to get the file. This method will still allow you to use the player throught your site.

 

 

 

 

 

 

 

 

 

 

 

  ©Copyright Plaino LLC. All rights reserved.