DOWNLOADS EXAMPLES SKINS DOCS SUPPORT
 
 

Inserting the JavaScript code

Only Wimpy Button Maker can generate the code required to use this option. Wimpy Button Maker Tool generates the following:

1. An external JavaScript file.
2. A snippet of HTML that loads the external JavaScript file and renders the button.

Before including the code in your page, you'll have to make sure that the external JavaScript file (wimpy_button.js) has been uploaded to the same place as the Wimpy Button SWF file (wimpy_button.swf).

Example:

If the Wimpy Button SWF file is located here:

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

... then upload the external JavaScript file (wimpy_button.js) to the same folder as:

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

 

To include the code in your page, copy and paste the all the code anywhere between the opening <body> and closing </body> tags of your page.

Example:

<html>
<head>
<title>My Wimpy Button</title>
<head>



<body>

<p>Hello World</p>

<!-- START WIMPY BUTTON: JavaScript -->
<script ... etc ... </script>
<script ... etc ...
</script>
<!-- END WIMPY BUTTON: JavaScript -->


</body>


</html>

 

Code Explained

<!-- START WIMPY BUTTON: JavaScript -->
<script src="http://www.yoursite.com/wimpy/wimpy_button.js" type="text/javascript"></script>
<!-- NOTE: The line above can also go into the <head> of your page -->
<script language="JavaScript" type="text/JavaScript">
writeWimpyButton("http://www.yoursite.com/wimpy/example.mp3", "35", "35", "&autoplay=yes&arrowColor=00FF00", "FFFFFF" );
</script>
<!-- END WIMPY BUTTON: JavaScript -->

Loads the external JavaScript file
This line can also be moved to the <head> of your page, which. This line only needs to be referred to one time. Duplicating this line should be avoided.

Script Opener/Closer
These lines open up the HTML to allow a JavaScript "call" to be made.

Comments
The lines that begin with <!-- are comments, which help you to identify the the button when reading the source HTML code -- and provide a means for a programmer to annotate the code with "human readable" information.

JavaScript "call" to render the button
This line calls a function that is located in the external JavaScript file and renders the player in the page. The call consists of 5 arguments:

writeWimpyButton("URL to MP3 file", "width", "height", "options", "background color");

The only required argument is "URL to MP3 file" -- if the other arguments are not included when making the call, then default values will be used.

Example:

writeWimpyButton("URL to MP3 file");

HINT: You can define the default values by editing the external Javascript file. See the "Using Default Values" section below.

 

Using more than one button

If you plan on including more than one button into your page, move the reference to the external JavaScript file (wimpy_button.js) into the <head> tag

Example:

<html>
<head>
<title>My Wimpy Button</title>

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

</head>

<body>

<p>Button 1</p>

<script language="JavaScript" type="text/JavaScript">
writeWimpyButton("http://www.yoursite.com/wimpy/example1.mp3", "35", "35", "&autoplay=yes&loopMe=yes", "FFFFFF");
</script>


<p>Button 2 </p>

<script language="JavaScript" type="text/JavaScript">
writeWimpyButton("http://www.yoursite.com/wimpy/example2.mp3", "35", "35", "&autoplay=yes&loopMe=yes", "FFFFFF");
</script>


</body>
</html>

 

About the external JavaScript File

The external Javascript file contains a single function that renders the player onto a web page. The "writeWimpyButton" function contains a few "default" values (variables), which can be edited to help minimize the amount of code required to render a button on your page. The variables that you can edit are:

wimpySwf

A string that is a URL to where the Wimpy Button SWF file (wimpy_button.swf) is located on your server.

NOTE: This option is automatically configured when using Wimpy Button Maker.

Example:

var wimpySwf = "http://www.yoursite.com/wimpy/wimpy_button.swf";

NOTE: If the URL is a relative URL (e.g. ../../path) the button will not work on every page. We recommend using a full URL. See "Relative and Absolute".

 

defaultWidth

A number representing the width of the button

Example:

var defaultWidth = 35;

defaultHeight

A number representing the height of the button

Example:

var defaultHeight = 35;

 

defaultConfigs

A string that contains option value-pairs. You can use Wimpy Button Maker to generate this string, which looks similar to:

"&autoplay=yes&loopMe=yes&playingColor=362A45&arrowColor=00FF00"

Example:

var defaultConfigs = "&autoplay=yes&loopMe=yes&playingColor=362A45&arrowColor=00FF00;

 

baseURL

A string that refers to the folder where you're MP3 files are stored.

NOTE: Trailing slash required.

This option allows you to only have to enter the file name of the MP3 when calling "writeWimpyButton"

Example:

var baseURL = "http://www.yoursite.com/media/mp3/";

... If this option is set, then you will only have to enter the MP3 file name when rendering the player on your page:

<script>
writeWimpyButton("my_file.mp3");
</script>

 

 

 

 

 

 

  ©Copyright Plaino LLC. All rights reserved.