Player List - Controle e tempo

Estou montando uma player list, hoje o play em sí já funciona mais precisava que quando clica-se na lista a musica pare e o icone de player mude para o de pause, controlando a parte de cima e a lista.

E que ao mudar de musica e voltar ele continue da onde parou, alguém consegue me ajudar?

index.html

document.getElementById('idDoElemento').id = 'novoid'

$( "#musicas" ).hasClass( "active" );

if($('#playlist li.active')){

 $('#botoes-li').hide();
 $('#botoes-Pa').show();
	}

<div id="audio-player">
<div class="cor-fundo">
 <div class="container">
 <!-- Topo Player -->
 <div class="row">
 <!-- informação da midia -->
 <div class="col-lg-12 text-center">
 <h1>
 Titulo player
 </h1>
 <div id="audio-info">
 <span class="titulo"></span>
 </div>
 </div>
 </div>
 <!-- end informação da midia -->

 <div class="row">
 <div class="col-lg-12">
 <div id="tracker">
 <div id="barradeprogresso">
 <span id="progresso" class="pro"></span>
 <span id="handle"></span>
 </div>
 </div>
 </div>
 </div>

 <div class="clearfix"></div>

 <div class="row controleBotoes">
 <div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
 <button id="prev"></button>
 </div>
 <div class="col-xs-4 col-sm-8 col-md-8 col-lg-8" >
 <button id="play"></button>
 <button id="pause"></button>
 </div>
 <div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
 <button id="next"></button>
 </div>
 </div>
 </div>
</div>

<div class="container lista">
	<div class="row botoes-menu">
 <div class="col-xs-9 col-sm-11 col-md-11 col-lg-11">
 <ul id="playlist">
 <li song="musica01.mp3" titulo="teste 01" id="musicas">
 <div class="linha-player">
 <div class="botoes-lista">
 <div class="botoes-li" id="botoes-li"></div>
 <div class="botoes-Pa" id="botoes-Pa"></div>
 </div>
 <div class="bloco-direito">
 <div class="linha-descricao linha-informacao">
 <h3 class="descricao-titulo">Introdução</h3>
 </div>
 <div class="linha-descricao">
 <p class="texto_unidade">Informações Editorais</p>
 </div>
 </div>
 </div>
 </li>

 <li song="musica03.mp3" titulo="teste 02" id="musicas02">
 <div class="linha-player">
 <div class="botoes-lista">
 <div class="botoes-li" id="botoes-li"></div>
 <div class="botoes-Pa" id="botoes-Pa"></div>
 </div>
 <div class="bloco-direito">
 <div class="linha-descricao linha-informacao">
 <h3 class="descricao-titulo">Introdução</h3>
 </div>
 <div class="linha-descricao">
 <p class="texto_unidade">Informações Editorais</p>
 </div>
 </div>
 </div>
 </li>

 <li song="musica02.mp3" titulo="teste 02" id="musicas">
 <div class="linha-player">
 <div class="botoes-lista">
 <div class="botoes-li" id="botoes-li"></div>
 <div class="botoes-Pa" id="botoes-Pa"></div>
 </div>
 <div class="bloco-direito">
 <div class="linha-descricao linha-informacao">
 <h3 class="descricao-titulo">Introdução</h3>
 </div>
 <div class="linha-descricao">
 <p class="texto_unidade">Informações Editorais</p>
 </div>
 </div>
 </div>
 </li>
 </ul>

 </div>
	</div>
</div>

</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/main.js"></script>

	 

	 

	 

	main.js

var audio;

$('#pause').hide();
$('#botoes-Pa').hide();
initAudio($('#playlist li:first-child'));

function initAudio(element){
	var song = element.attr('song');
 var titulo = element.text();
 var descricao = element.attr('descricao');

	audio = new Audio('media/' + song);

	if(!audio.currentTime){
 $('#duracao').html('0.00');
	}

	$('#audio-player .titulo').text(titulo);
 $('#audio-player .descricao').text(descricao);

	$('#playlist li').removeClass('active');
 element.addClass('active');

}

$('#play').click(function(){
	audio.play();
	$('#play').hide();
	$('#pause').show();
	$('#botoes-li').hide();
	$('#botoes-Pa').show();
	$('#duracao').fadeIn(400);
	showDuration();
});

$('#pause').click(function(){
	audio.pause();
	$('#pause').hide();
	$('#play').show();
});

$('#next').click(function(){
 audio.pause();
 var next = $('#playlist li.active').next();
 if (next.length == 0) {
 next = $('#playlist li:first-child');
 }

	if($('#play').is(':visible')){
 $('#play').hide();
 $('#pause').show();
 }

 initAudio(next);

	audio.play();
	showDuration();
});

$('#prev').click(function(){
 audio.pause();
 var prev = $('#playlist li.active').prev();
 if (prev.length == 0) {
 prev = $('#playlist li:last-child');
 }
	if($('#play').is(':visible')){
 $('#play').hide();
 $('#pause').show();
 }
 initAudio(prev);
	audio.play();
	showDuration();
});

$('#playlist li').click(function () {

	if(document.getElementById('playlist').id = 'pauselist'){
	audio.pause();
 initAudio($(this));
	$('#play').hide();
	$('#pause').show();
	$('#botoes-li').hide();
	$('#botoes-Pa').show();
	$('#duracao').fadeIn(400);
	audio.play();
	showDuration();
	}

	if(document.getElementById('pauselist').id = 'playlist'){
 audio.pause();
 $('#play').hide();
 $('#pause').show();
 $('#duracao').fadeIn(400);

 showDuration();
	}
});

function showDuration(){
	$(audio).bind('timeupdate', function(){
 var s = parseInt(audio.currentTime % 60);
 var m = parseInt((audio.currentTime / 60) % 60);
 if (s < 10) {
 s = '0' + s;
 }
 $('#duracao').html(m + '.' + s);
 var value = 0;
 if (audio.currentTime > 0) {
 value = ((100 / audio.duration) * audio.currentTime);
 }
 $('#progresso').css('width',value+'%');
 $('#handle').text();

 if( audio.currentTime >= audio.duration) $('#next').trigger('click');

	});
}

$("#barradeprogresso").mouseup(function(e){
 var leftOffset = e.pageX - $(this).offset().left;
 var songPercents = leftOffset / $('#barradeprogresso').width();
 audio.currentTime = songPercents * audio.duration;
});