{"id":6675,"date":"2011-03-17T03:21:54","date_gmt":"2011-03-17T07:21:54","guid":{"rendered":"http:\/\/info.template-help.com\/?p=6675"},"modified":"2015-09-11T05:17:10","modified_gmt":"2015-09-11T09:17:10","slug":"jquery-jplayer","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/jquery-jplayer.html","title":{"rendered":"jQuery “jPlayer”"},"content":{"rendered":"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\r\n\r\n

JavaScript<\/h3>\r\nWe should include jQuery framework and jplayer.min.js by pointing src attribute in the script tag to those .js files.\r\n\r\n
\r\n<script type=\"text\/javascript\" src=\"js\/jquery-1.4.2.min.js\" ><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/jplayer.min.js\"><\/script>\r\n<\/pre>\r\n\r\nInitialization 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)\r\n\r\n
\r\n$(document).ready(function(){\r\n    var playItem = 0;\r\n    var myPlayList = [\r\n        {name:\"Black Plant\",mp3:\"audio\/black_plant.mp3\",ogg:\"audio\/black_plant.ogg\"},\r\n        {name:\"Hidden\",mp3:\"audio\/hidden.mp3\",ogg:\"audio\/hidden.ogg\"},\r\n        {name:\"The Separation\",mp3:\"audio\/separation.mp3\",ogg:\"audio\/separation.ogg\"}\r\n    ];\r\n\r\n    \/\/ Local copy of jQuery selectors, for performance.\r\n    var jpPlayTime = $(\"#jplayer_play_time\");\r\n    var jpTotalTime = $(\"#jplayer_total_time\");\r\n\r\n    $(\"#jquery_jplayer\").jPlayer({\r\n        ready: function() {\r\n            displayPlayList();\r\n            playListInit(true); \/\/ Parameter is a boolean for autoplay.\r\n        },\r\n        oggSupport: true\r\n    })\r\n    .jPlayer(\"onProgressChange\", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {\r\n        jpPlayTime.text($.jPlayer.convertTime(playedTime));\r\n        jpTotalTime.text($.jPlayer.convertTime(totalTime));\r\n    })\r\n    .jPlayer(\"onSoundComplete\", function() {\r\n        playListNext();\r\n    });\r\n\r\n    $(\"#jplayer_previous\").click( function() {\r\n        playListPrev();\r\n        $(this).blur();\r\n        return false;\r\n    });\r\n\r\n    $(\"#jplayer_next\").click( function() {\r\n        playListNext();\r\n        $(this).blur();\r\n        return false;\r\n    });\r\n\r\n    function displayPlayList() {\r\n        $(\"#jplayer_playlist ul\").empty();\r\n        for (i=0; i < myPlayList.length; i++) {\r\n            var listItem = (i == myPlayList.length-1) ? \"
  • \" : \"
  • \";\r\n            listItem += \"\"+ myPlayList[i].name +\"<\/a><\/li>\";\r\n            $(\"#jplayer_playlist ul\").append(listItem);\r\n            $(\"#jplayer_playlist_item_\"+i).data( \"index\", i ).click( function() {\r\n                var index = $(this).data(\"index\");\r\n                if (playItem != index) {\r\n                    playListChange( index );\r\n                } else {\r\n                    $(\"#jquery_jplayer\").jPlayer(\"play\");\r\n                }\r\n                $(this).blur();\r\n                return false;\r\n            });\r\n        }\r\n    }\r\n\r\n    function playListInit(autoplay) {\r\n        if(autoplay) {\r\n            playListChange( playItem );\r\n        } else {\r\n            playListConfig( playItem );\r\n        }\r\n    }\r\n\r\n    function playListConfig( index ) {\r\n        $(\"#jplayer_playlist_item_\"+playItem).removeClass(\"jplayer_playlist_current\").parent().removeClass(\"jplayer_playlist_current\");\r\n        $(\"#jplayer_playlist_item_\"+index).addClass(\"jplayer_playlist_current\").parent().addClass(\"jplayer_playlist_current\");\r\n        playItem = index;\r\n        $(\"#jquery_jplayer\").jPlayer(\"setFile\", myPlayList[playItem].mp3, myPlayList[playItem].ogg);\r\n    }\r\n\r\n    function playListChange( index ) {\r\n        playListConfig( index );\r\n        $(\"#jquery_jplayer\").jPlayer(\"play\");\r\n    }\r\n\r\n    function playListNext() {\r\n        var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;\r\n        playListChange( index );\r\n    }\r\n\r\n    function playListPrev() {\r\n        var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;\r\n        playListChange( index );\r\n    }\r\n\r\n});\r\n<\/pre>\r\n\r\n
    HTML<\/h3>\r\nBelow you can see general HTML script representation:\r\n\r\n
    \r\n
    <\/div>\r\n
    \r\n  
    \r\n