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

Titulo player

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

Titulo player

Introdução

Introdução

Introdução

mktjuliet

Player List - Controle e tempo