If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

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 < myPlayList.length; i++) {
            var listItem = (i == myPlayList.length-1) ? "
  • " : "
  • "; 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 < myPlayList.length) ? playItem+1 : 0; playListChange( index ); } function playListPrev() { var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1; playListChange( index ); } });

    HTML

    Below you can see general HTML script representation:

    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" />