Below is the Demo link checkout the demo link how it is working. This audio player controller is totally different form the normal html5 audio controller.I hope this post is very useful. you can addyour own audio files Here so you can play your coustomized audio in your website by changing the below audio url.
m4a: “http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a”,
oga: “http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg”
Code for Customize the HTML5 Audio controller using Jquery
<html>
<head>
<meta charset=”utf-8″ />
<title>Customize the HTML5 Audio controller using Jquery</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” href=”skin/circle.player.css”>
<script type=”text/javascript” src=”jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.jplayer.min.js”></script>
<script type=”text/javascript” src=”jquery.transform2d.js”></script>
<script type=”text/javascript” src=”jquery.grab.js”></script>
<script type=”text/javascript” src=”mod.csstransforms.min.js”></script>
<script type=”text/javascript” src=”circle.player.js”></script>
<script type=”text/javascript”>
//<![CDATA[
$(document).ready(function(){
var myCirclePlayer = new CirclePlayer(“#jquery_jplayer_1”,
{
m4a: “http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a”,
oga: “http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg”
}, {
cssSelectorAncestor: “#cp_container_1”,
swfPath: “../../dist/jplayer”,
wmode: “window”,
keyEnabled: true
});
});
//]]>
</script>
</head>
<body>
<div id=”jquery_jplayer_1″ class=”cp-jplayer”></div>
<div id=”cp_container_1″ class=”cp-container”>
<div class=”cp-buffer-holder”>
<div class=”cp-buffer-1″></div>
<div class=”cp-buffer-2″></div>
</div>
<div class=”cp-progress-holder”>
<div class=”cp-progress-1″></div>
<div class=”cp-progress-2″></div>
</div>
<div class=”cp-circle-control”></div>
<ul class=”cp-controls”>
<li><a class=”cp-play” tabindex=”1″>play</a></li>
<li><a class=”cp-pause” style=”display:none;” tabindex=”1″>pause</a></li>
</ul>
</div>
</body>
</html>
