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;
});Discussão (0)
Carregando comentários...