Hoje eu tenho uma lista onde eu clico o ícone do player muda, mas precisava que tanto o ícone do player como o da lista troca-se. Quando a musica está tocando para Pause e quando Pausada para player, alguém consegue me ajudar?
Hoje ele até troca porem apenas na primeira linha.
Index.html
<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>
Player de teste
</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="range">
<!--<div id="barradeprogresso">
<span id="progresso" class="pro"></span>
<span id="handle"></span>
</div>-->
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
tempo rs
</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>
<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">
<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">
<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>
Main.js
$('#play').click(function(){
audio.play();
$('#play').hide();
$('#pause').show();
$('#botoes-li').hide();
$('#botoes-Pa').show();
$('#duration').fadeIn(400);
showDuration();
});
$('#pause').click(function(){
audio.pause();
$('#pause').hide();
$('#play').show();
$('#botoes-li').hide();
$('#botoes-Pa').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();
$('#botoes-li').hide();
$('#botoes-Pa').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();
$('#botoes-li').hide();
$('#botoes-Pa').show();
}
initAudio(prev);
audio.play();
showDuration();
});
$('#playlist li').dblclick(function () {
audio.pause();
initAudio($(this));
$('#play').hide();
$('#pause').show();
$('#botoes-li').hide();
$('#botoes-Pa').show();
$('#duration').fadeIn(400);
audio.play();
showDuration();
});
//Playlist song click
$('#playlist li').click(function() {
audio.pause();
$('#pause').hide();
$('#play').show();
$('#botoes-li').show();
$('#botoes-Pa').hide();
});