Custom Audio Player with Jquery

Css for audio player

*css for audio player*/
/* Absolute Center */
.abs-center{
  margin: auto;
  position: fixed;
  top:0; right:0; bottom:0; left:0;
}
/*Container for audio player*/
#audioplayer{
  height: 60px;
  margin: auto;
  margin-top: 50px;
}
/* Play/Pause Button */
#pButton{
  height:30px;
  width: 20px;
  border: none;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: center;
  float:left;
  outline:none;

}
/*Classes for play/pause button background*/
.play{background: url('../images/play-new.png') ;}
.pause{background: url('../images/pause-new.png') ;}

.timeline{
  background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
    border-radius: 0px;
    float: left;
    height: 1px;
    margin-top: 14px;
    width: 226px;
}

.section-70 .timeline{width: 168px;}

/*Grabable Playhead*/
.playhead{
  background: #ccc none repeat scroll 0 0;
    border-radius: 0;
    cursor: pointer;
    height: 12px;
    margin-top: -6px;
    width: 1px;
}

HTML part

<div id="wrapper">
  <div id="audioplayer" class="player-6">
    <button id="pButton" class="play"></button>
    <audio class="music" preload="true">
      <source src="mp3/challa.mp3">
    </audio>
    <div class="timeline">
      <div class="playhead"></div>
    </div>
  </div>
</div>

JQuery Part

/*document.addEventListener("DOMContentLoaded", function(event) {

var music = document.getElementById('music'); // id for audio element
var duration; // Duration of audio clip

var pButton = document.getElementById('pButton');

var playhead = document.getElementById('playhead'); // playhead
var timeline = document.getElementById('timeline'); // timeline

// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;

// play button event listenter
pButton.addEventListener("click", play);

// timeupdate event listener
music.addEventListener("timeupdate", timeUpdate, false);

// makes timeline clickable
timeline.addEventListener("click", function(event) {
    moveplayhead(event);
    //music.currentTime = parseFloat(duration * clickPercent(event));
    console.log(duration * clickPercent(event));
}, false);

// returns click as decimal (.77) of the total timelineWidth
function clickPercent(event) {
    return (event.clientX - getPosition(timeline)) / timelineWidth;

}

// makes playhead draggable
playhead.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);

// Boolean value so that audio position is updated only when the playhead is released
var onplayhead = false;

// mouseDown EventListener
function mouseDown() {
    onplayhead = true;
    window.addEventListener('mousemove', moveplayhead, true);
    music.removeEventListener('timeupdate', timeUpdate, false);
}

// mouseUp EventListener
// getting input from all mouse clicks
function mouseUp(event) {
    if (onplayhead == true) {
        moveplayhead(event);
        window.removeEventListener('mousemove', moveplayhead, true);
        // change current time
        music.currentTime = parseFloat(duration * clickPercent(event));
        music.addEventListener('timeupdate', timeUpdate, false);
    }
    onplayhead = false;
}
// mousemove EventListener
// Moves playhead as user drags
function moveplayhead(event) {
    var newMargLeft = event.clientX - getPosition(timeline);

    if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
        playhead.style.marginLeft = newMargLeft + "px";
    }
    if (newMargLeft < 0) {
        playhead.style.marginLeft = "0px";
    }
    if (newMargLeft > timelineWidth) {
        playhead.style.marginLeft = timelineWidth + "px";
    }
}




// Gets audio file duration
music.addEventListener("canplaythrough", function() {
    duration = music.duration;
}, false);




});*/


$(document).ready(function(){
    $('.play').bind('click', function() {
        play(this,$(this).next('audio'),$($(this)[0].parentElement).find('.timeline'));          
    });     

    //Play and Pause
    function play(button,music,timeline) {
        // makes timeline clickable
        $(timeline).bind('click', function() {
            moveplayhead(event,$(this).find('.playhead'),timeline);
            var timelineWidth = $(timeline).outerWidth() - $($(this).find('.playhead')).outerWidth();
            music.currentTime = parseFloat(music.duration * clickPercent(event,timeline,timelineWidth));            
        });

        music[0].addEventListener("timeupdate", timeUpdate, false);
        music[0].timelineWidth = 200;
        music[0].currentTime = music[0].currentTime;
        music[0].duration = music[0].duration;


        if (music[0].paused) {
            music[0].play();
            // remove play, add pause
            $(button).removeClass('play');
            $(button).addClass('pause');
        } else { // pause music
            music[0].pause();
            // remove pause, add play            
            $(button).removeClass('pause');
            $(button).addClass('play');
        }
    }


    function moveplayhead(event,playhead,timeline) { 
        var newMargLeft = event.clientX - getPosition(timeline);

        var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;

        if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
            playhead.style.marginLeft = newMargLeft + "px";
        }
        if (newMargLeft < 0) {
            playhead.style.marginLeft = "0px";
        }
        if (newMargLeft > timelineWidth) {
            playhead.style.marginLeft = timelineWidth + "px";
        }
    }


    function getPosition(el) {
        return $(el)[0].getBoundingClientRect();
    }

    function clickPercent(event,timeline,timelineWidth) {        
        return (event.clientX - getPosition(timeline)) / timelineWidth;
    }

    // timeUpdate
    // Synchronizes playhead position with current point in audio
    function timeUpdate(evt) {
        var playPercent = evt.target.timelineWidth * (evt.target.currentTime / evt.target.duration);
        $($($(this)[0].parentElement).find('.timeline')).find('.playhead').css("margin-left",playPercent + "px");
    }
 
});