Last updated on July 31st, 2016 at 11:16 am
JPlayer is Jquery HTML5 Audio / Video library. Its help you to play your music direct on browser. JPlayer is free and open source library. With JPlayer you can play your Music and Video’s direct n your browser.
Official website of JPlayer: http://jplayer.org/
Platform Supported by JPlayer
- Windows: Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9
- OSX: Safari, Firefox, Chrome, Opera
- iOS: Mobile Safari: iPad, iPhone, iPod Touch
- Android: Android 2.3 Browser
Blackberry: OS 7 Phone Browser, PlayBook Browser
Media Support
- HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
- Flash: mp3, mp4 (AAC/H.264), rtmp, flv
Jplayer is very simple and easy to embed in your code it takes few minutes. Simply just download the JPlayer from its official site mention above and unzip the files and include file src to your code and use as shown below.
Include JPlayer Library
<script type="text/javascript" src="jquery/jquery.jplayer.min.js"></script>
And also include JQuery Library
<script type="text/javascript" src="jquery/jquery-1.7.1.js"></script>
That’s it now a small piece of Javascript code you need to add in your page.
<script type="text/javascript">
$(document).ready(function(){
$("#my_player").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "mdv.mp3", //Add your song src here so player can load and play it
nativeSupport: true
});
},
swfPath: "jquery/Jplayer.swf",
supplied: "m4a, oga"
});
});
</script>
Html Code with Music Player controls :
<div id="my_player" style="display:none;"><!-- load player--></div> <div class="pl-wrapper"> <section class="playerMain jp-audio" id="jp_container_1"> <div class="plTime"><i class="jp-current-time">00:00</i>/<i class="jp-duration">02:09</i></div> <div class="plTimer jp-progress"> <div class="jp-seek-bar" style="width: 100%;"> <div class="plyLen jp-play-bar" style="width: 0%;"></div> </div> </div> <div class="plNav"> <div class="Pl-prev">prev</div> <div class="Pl-pause pl-play jp-play" style="display: block;">play</div> <div class="Pl-pause jp-pause" style="display: none;">pause</div> <div class="Pl-next">next</div> <div class="pl-sound jp-volume-bar"><div class="pl-soundLevl jp-volume-bar-value" style="width: 80%;"></div></div> <div class="pl-fullsoundbt jp-volume-max"></div> <div class="pl-sound pl-soundBt"> <div class="pl-fullsound jp-mute"></div> <div class="pl-fullsound pl-mute jp-unmute" style="display: none;"></div> </div> <div class="clear"></div> </div> </section> </div>