jQuery “jPlayer”

Jplayer is a flexible and functional solution to play and control media files in your webpage. It supports HTML5 and outputs flash for browsers that yet do not support HTML 5. Among other advantages is the ability to customize its appearance using HTML and CSS. For more details visit the official website http://www.jplayer.org

JavaScript

We should include jQuery framework and jplayer.min.js by pointing src attribute in the script tag to those .js files.

<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/jplayer.min.js"></script>

Initialization script we place in the section. Define the list of songs in the array myPlayList (line 4-6) Notice, that that you should specify two audio files: mp3 and ogg. You can use any sound conversion tool for that (e.g. http://media.io)

$(document).ready(function(){
    var playItem = 0;
    var myPlayList = [
        {name:"Black Plant",mp3:"audio/black_plant.mp3",ogg:"audio/black_plant.ogg"},
        {name:"Hidden",mp3:"audio/hidden.mp3",ogg:"audio/hidden.ogg"},
        {name:"The Separation",mp3:"audio/separation.mp3",ogg:"audio/separation.ogg"}
    ];

    // Local copy of jQuery selectors, for performance.
    var jpPlayTime = $("#jplayer_play_time");
    var jpTotalTime = $("#jplayer_total_time");

    $("#jquery_jplayer").jPlayer({
        ready: function() {
            displayPlayList();
            playListInit(true); // Parameter is a boolean for autoplay.
        },
        oggSupport: true
    })
    .jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
        jpPlayTime.text($.jPlayer.convertTime(playedTime));
        jpTotalTime.text($.jPlayer.convertTime(totalTime));
    })
    .jPlayer("onSoundComplete", function() {
        playListNext();
    });

    $("#jplayer_previous").click( function() {
        playListPrev();
        $(this).blur();
        return false;
    });

    $("#jplayer_next").click( function() {
        playListNext();
        $(this).blur();
        return false;
    });

    function displayPlayList() {
        $("#jplayer_playlist ul").empty();
        for (i=0; i " : "

"; listItem += ""+ myPlayList[i].name +"

"; $("#jplayer_playlist ul").append(listItem); $("#jplayer_playlist_item_"+i).data( "index", i ).click( function() { var index = $(this).data("index"); if (playItem != index) { playListChange( index ); } else { $("#jquery_jplayer").jPlayer("play"); } $(this).blur(); return false; }); } } function playListInit(autoplay) { if(autoplay) { playListChange( playItem ); } else { playListConfig( playItem ); } } function playListConfig( index ) { $("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current").parent().removeClass("jplayer_playlist_current"); $("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current").parent().addClass("jplayer_playlist_current"); playItem = index; $("#jquery_jplayer").jPlayer("setFile", myPlayList[playItem].mp3, myPlayList[playItem].ogg); } function playListChange( index ) { playListConfig( index ); $("#jquery_jplayer").jPlayer("play"); } function playListNext() { var index = (playItem+1 = 0) ? playItem-1 : myPlayList.length-1; playListChange( index ); } });

HTML

Below you can see general HTML script representation:

  

    
play
      
pause
      
stop
      
min volume
      
max volume
    

      

        

      
    
    

      

    
    

    

  
  

    
Bubble
    

CSS

Include the default theme for the player by connecting the .css file in the section of the .html file

&tl;link href="path/to/file/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />