Player List - Controle e tempo

[mktjuliet 0]

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;
});