Everything You Need To Know About JF MP3

Installing JF MP3 Player Installing JF MP3

Installing JF MP3 player is simple and quick. It should take no more than 2 minutes to get installed on your site. It should then take anywhere from 1 to 10 minutes to set-up your playlist, and player settings, depending on how prepared you are, and how many songs you want in your playlist. Don't worry though, this guide will be with you every step of the way!


Download JF MP3

Your first step is to download JF MP3 from the download page. You then have the choice between 2 different compression formats. It is up to you which one you want. Either one you choose is fine, it will only affect your download speed a bit.

Once your download finishes, you'll want to unpack/unzip the file you just downloaded to any directory you wish on your computer. You should have a directory structure like this:

Directory Structure

Pick and Choose What You Want

You can choose either the Uncompressed folder or the Compressed folder. Both contain the required files for JF MP3 however; the Uncompressed folder is more useful if you are trying to learn how JF MP3 works at its core, or if you are trying to create skins/themes, mods etc... We recommend that for live, public use, you select the files in the Compressed folder.


Copy, Paste

Whatever folder you choose, the installation process is the same. Copy the JFMP3 folder to your websites root directory. It is important to NOT rename the jfmp3 folder, or else certain features like the PNG fix for Internet Explorer 6 users will not work.

Once all the files are copied over, you'll need to place the following code into the <head> of your webpage:

<link rel="stylesheet" href="jfmp3/jfmp3.css" type="text/css"/>
<!--[if lt IE 7]>
    <link rel="stylesheet" href="jfmp3/jfmp3_ie6.css" type="text/css"/>
    <script type="text/javascript" src="jfmp3/jfmp3_iefix.js"></script>
<![endif]-->
<script type="text/javascript" src="jfmp3/mootools.js"></script>
<script type="text/javascript" src="jfmp3/soundmanager2.js"></script>
<script type="text/javascript" src="jfmp3/jfmp3.js"></script>

Once that code is in place, all you need to do is put the empty element on your page, wherever you want JF MP3 to load.

<div id="jfmp3_player">Loading MP3 player...</div>

It is recommended to only style the 'jfmp3_player' DIV element, as modifying styles children elements may break the players functions. In other words: Do not play around too much unless you know what you are doing!

At this point, Jf MP3 Player is now installed on your website. Although you are missing the playlist. Go to the following section to learn how to setup your playlist properly.

Creating a Playlist Creating a Playlist

To create a playlist, follow the steps below, and you should be rolling within 5 to 10 minutes depending on how ready you are.


Create The Playlist Structure

Creating the playlist for JF MP3 is very easy, SEO friendly and degrades well. Follow the structure below and you'll be ready in no time!

<ul id="jfmp3_prePlaylist">
    <li>
        <a href="http://www.jfmp3.com/inYourFaces.mp3">
            <span class="title">In Your Faces</span> -
            <span class="artist">JF MP3</span> -
            <span class="album">Demo Album</span> -
            <span class="coverart">http://www.pezus.com/assets/pezus.png</span>
        </a>
    </li>
    <li>
        <a href="http://www.jfmp3.com/pezusTheme.mp3">
            <span class="title">Theme</span> -
            <span class="artist"></span> -
            <span class="album"></span> -
            <span class="coverart">http://www.kovo.ca/kts/assets/kticketsubmitlogo.png</span>
        </a>
    </li>
    <li>
        <a href="http://www.jfmp3.com/setInMotion.mp3">
            <span class="title">Set in Motion</span> -
            <span class="artist">Third Artist</span> -
            <span class="album">Another Album '09</span> -
            <span class="coverart"></span>
        </a>
    </li>
</ul>

Add a Playlist Item

Adding a song to your playlist is easy. The only required information is the songs URL. If you do not provide one, Jf MP3 will NOT load that item.

<li>
    <a href="RELATIVE OR ABSOLUTE LOCATION TO MP3 FILE">
        <span class="title">OPTIONAL TITLE VALUE</span> -
        <span class="artist">OPTIONAL ARTIST VALUE</span> -
        <span class="album">OPTIONAL ALBUM VALUE</span> -
        <span class="coverart">OPTIONAL COVER ART VALUE</span>
    </a>
</li>

As you can see, it is quite simple. We create an LI element, and inside, we create an ANCHOR element. The only property we need for that anchor is the HREF value. This value has to point to the relative or absolute location of the MP3 file you want loaded.

The SPAN elements inside the ANCHOR tag always need to be present, but they do not need values inside them (so you dont have to have a song artist for example). Just make sure you include those elements with the proper class values for each.

Advanced Configuration Advanced Configuration

There are a bunch of configuration options for JF MP3. They can be set by modifying the initialization function found at the bottom of your jfmp3.js file. That line looks something like this:

new JFMP3({/* Any custom options can be set here like: targetEl: 'mainDiv_ID_ForPlayer' */});

You can modify any of the following options to change the way Jf MP3 behaves.

targetEl

This is the ID of the target element you want JF MP3 to load in. Default value is 'jfmp3_player'


playlistEl

This is the ID of the target playlist you want JF MP3 to load. We discuss this in this section. Default value is 'jfmp3_prePlaylist'


defaultMessage

The default message that will be displayed in the now playing section before the first song is loaded. Default value is 'Welcome to the JF MP3 Demo!!!'


defaultCoverArt

The default cover art image that will be displayed when the active song does not have one specified. 'jfmp3/defaultCoverArt.jpg'


trackBarWidth

The width of the trackbar in pixels. DO NOT edit this value unless you have made your own modifications to the theme or the theme you are trying to use specifies setting/changing this value. Default value is 235


trackBarKnobWidth

The width of the trackbar knob in pixels. DO NOT edit this value unless you have made your own modifications to the theme or the theme you are trying to use specifies setting/changing this value. Default value is 18


startVolume

The default volume when the player loads. This must be a number in the range of 0-100. Default value is 50

startMuted

Should JF MP3 start muted? Default value is false

toggleablePlaylist

Can the playlist be toggled? Default value is true

toggledByDefault

Should the playlist be visible by default? Default value is true

repeatablePlaylist

Should the playlist keep repeating itself everytime the last song has finished playing? Default value is true

repeatedByDefault

Should the playlist be repeated by default? Default value is true

shuffleablePlaylist

Can the playlist be shuffled? Default value is true

shuffledByDefault

Should the playlist start shuffled? Default value is false

volumeDirection

What direction should the volume bar scroll? This value should never be changed unless you have done modifications to the player, or the theme/mod you are trying to use specifies changing this value. Default value is 'vertical'

And here is an example of how you would change one or more of these values:

new JFMP3({ targetEl: 'newDiv', defaultMessage: 'A new message here!' });

Create Custom Skins/Themes Create Custom Skins/Themes

Creating a custom skin/theme for JF MP3 is as simple as downloading the default skin PSd file, modify the colors or anything else you wish, save it then modify your CSS file to point over to the image file you just created. However, if you keep reading, we will outline how to do it properly, and what rules you must follow when skinning for JF MP3.


Ground Rules

There are a few rules you must follow to make sure your skin works:

Do not move things around. It is important to not move objects around like the play/pause buttons, volume bar etc... If you do, you must make sure you properly modify the 'background-position' values in the JF MP3 css file.

The width of the trackbar and knob is important. This rule is related to the one above; if you decide to modify the length (width) of the trackbar or the trackbar knob, you must reflect your new widths in the jfmp3.js file. To learn more, go to the Advanced Configuration section of JF MP3's documentation and look at the trackbar and trackbar knob options.


Create A Basic Skin

To create a basic skin, you'll need Photoshop to be able to edit the PSD file. Once you open it up, you should be able to see all the layers properly filed in folders, so you don't have to go around figuring out what every layer is. Once you make the changes you want, save the image as a PNG file. Remember to keep the first, background, layer hidden when exporting the file. This will allow transparency to work right. You may name the file whatever you want, but this is not the last step.

Next you will have to open up jfmp3.css and change all the instances of the image file name to reflect the one you just created. If you are creating this skin for distribution, then you should take another approach. In this case, we recommend you create a separate css file and only place required css code there. As a solid example, open up one of the skin css files that come with JF MP3 to see how they work, and mimic their structure.

Please keep in mind that although almost all visual aspects of JF MP3 are CSS controlled, you do need a good level of experience with CSS to make advanced themes.

Create Mods Create Mods

Creating mods or the JF MP3 player is simple since a lot of the Javascript code is easy to understand and well documented. We cannot give any direct guides to creating mods, as this endeavor is for skilled Javascript programmers and their imaginations. You would also need good knowledge of Classes with Mootools. Although, if you have a mod and would like us to distribute it for you on our download page, please submit it using the form on the downloads page.