Coding with JMP3

JMP3 is the best candidate to play mp3 audio files on the page. Here we go the files for JMP3.

1. JMP3 plugin (jquery.jmp3.js)
2. JQuery (jquery-1.7.2.min.js)
3. Flash player (singlemp3player.swf)

Configuration

1. Copy jquery.jmp3.js, juqery.*.js, singlemp3player.swf to scripts folder or some other folder you like.
2. Set the initial values for JMP3 in jquery.jmp3.js

Let’s take scripts folder as example. After the aforementioned files are copied to scripts folder, you would like to open the jquery.mp3.js to set the initial values.

jQuery.fn.jmp3 = function(passedOptions){
    // hard-wired options
    var playerpath = "/Scripts/";                    // SET THIS FIRST: path to singlemp3player.swf

    // passable options
    var options = {
        "filepath": "/Media/",                                        // path to MP3 file (default: current directory)
        "backcolor": "",                                    // background color
        "forecolor": "ffffff",                                // foreground color (buttons)
        "width": "25",                                        // width of player
        "repeat": "no",                                        // repeat mp3?
        "volume": "50",                                        // mp3 volume (0-100)
        "autoplay": "false",                                // play immediately on page load?
        "showdownload": "true",                                // show download button in player
        "showfilename": "true"                                // show .mp3 filename after player
    };

The comments shipped with jquery.mp3.js states very clearly for the variable and fields. Since the singlemp3play.swf is located in the scripts folder, the palyerpath is set with “/Scripts/”.

 

Another value worthy of pointing out is filepath in options object. The filepath in the options object combining with filename in jmp3 in the front page becomes the complete url path for the mp3 file. So you can leave filepath in the options object empty only if you specify the complete url path for the mp3 file in the front page. In the aforementioned code, I set filepath with “/Media/” since I place the mp3 files in the Media folder.

 

Use JMP3 in the Front Page

In the front page, please add the following code in the *.ascx or *.aspx.

<script type="text/javascript" src="../Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.jmp3.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        //jMP3 init
        $(".mp3player").jmp3({
            showfilename: "false",
            backcolor: "000000",
            forecolor: "00ff00",
            width: 30,
            showdownload: "true"
        });
    });
</script>

<!—code snippet in a repeater—>

<span id="mp3player" class="mp3player">
                    <%#Eval("RelativeMp3Url")%></span>

In the aforementioned code, the mp3 url (filename) is put in a <span>. The mp3 audio player will display in the spans that have “mp3player” class.

Is It A Bug?

I found a strange issue in the repeater that contains multiple mp3 playing url. If the first occurrence of the mp3 url is not valid, the successive mp3 urls will not be represented with jmp3 player even if they have correct mp3 urls. I will appreciate if some jquery experts give the answer here.

 

supported by Nova Umbraco