Javascript Como Fazer para destacar a música atual que está tocando no playlist

gabreu2504 · 8 de novembro de 2017

Estou tentando fazer um player de áudio e não estou conseguindo destacar a música que está sendo tocada no momento, alguém tem alguma ideia de como fazer isso? sei que preciso usar aquele .active mais não sei como usar nesse código

<!doctype html>
<html>
<meta lang="pt-br" />
 <style type="text/css">
  ul {list-style: none;
  	padding: 8px ;
  	font-weight: bold;
  }
  li:hover {
  	background: #eee;
  	border-bottom: solid 1px #f60;
  }
  li {
  	width: 20%;
  	padding: 5px;
  	border-bottom: solid 1px #ccc;
  }

 </style>

<head>
 
</head>

<body>

<audio  class ="audio1"controls id="player">
   <source src="Black.mp3" type="audio/mp3" />
   <source src="LastKiss.mp3" type="audio/mp3" />
   <source src="SoldierofLove.mp3" type="audio/mp3" />
   <source src="Alive.mp3" type="audio/mp3" />
   <source src="EvenFlow.mp3" type="audio/mp3" />
</audio>
 
<button onclick="anterior()" >Anterior</button>
<button onclick="proximo()" >Proximo</button>
<br/>

<ul id="playlist">
  <li data-arq="Black.mp3">Pearl Jam - Black </li>
  <li data-arq="LastKiss.mp3">Pearl Jam - Last Kiss</li>
  <li data-arq="SoldierofLove.mp3">Pearl Jam - Soldier of Love</li>
  <li data-arq="Alive.mp3">Pearl Jam - Alive</li>
  <li data-arq="EvenFlow.mp3">Pearl Jam - Even Flow</li>
</ul>

<script>
  var atual=0;
  
  function proximo(){
    tocar(atual+1);
		
  }

  function anterior(){
    tocar(atual-1);
  }

  function tocar(x){
    console.log("tocar :" + x);
    var playlist = document.getElementById("playlist");
    if(x<0)
      x=playlist.children.length-1;
    if(x>playlist.children.length-1)
      x=0;

    atual=x;
    var limusica = playlist.children[x];
    
    var arquivo=limusica.getAttribute("data-arq");

    var player=document.getElementById("player");
    
    player.src=arquivo;
    player.play();
    
  }

</script>

</body>
</html>

iHollyZinhO · 9 de novembro de 2017

Como a música seguinte só é reproduzida após apertar um dos botões, você pode colocar no final da função tocar para mostrar em algum lugar o seguinte código:

player.getAttribute("src");

Como isso, você pode mostrar a música que irá tocar após clicar o botão.

DiF · 9 de novembro de 2017

@Gustavo.A.Barroso Pelo que eu entendi, você quer aplicar uma classe "active" para destacar na playlist a musica que está tocando no momento certo?

Bueno, com javascript puro fica bizonho demais fazer. Alias, eu aconselho você estudar o jQuery e transcrever ele para jQuery. Assim facilita o desenvolvimento!

Então, no jQuery existem N maneiras de aplicar e remover classes nos elementos. A premissa da lógica é que a classe active seja aplicada na <li> da música atual(variável " limusica") e removida das demais.

Veja este exemplo:

$(".next").on("click",function(){
  var $proxima = $('.active').next().length > 0 ? $('.active').next() : $('#playlist li').first();
  $('.active').removeClass('active');
  $proxima.addClass('active');
});

$(".prev").on("click",function(){
  var $anterior = $('.active').prev().length > 0 ? $('.active').prev() : $('#playlist li').last();
  $('.active').removeClass('active');
  $anterior.addClass('active');
});

A variável $proxima recebe um teste de IF ternário. Esta linha seria a mesma coisa que fazer assim:

if($('.active').next().length > 0 ){
   $('.active').next();
}else{
   $('#playlist li').first();
}

Veja o player funcionando como deveria: https://goo.gl/JoQM3G

PS: Como seu player não começa tocando automaticamente, adicione a classe active diretamente no primeiro elemento <li>, pois no momento que clicar em próximo, vai remover o active do primeiro e colocar no segundo.. e assim por diante.

gabreu2504 · 9 de novembro de 2017

4 horas atrás, DiF disse:
@Gustavo.A.Barroso Pelo que eu entendi, você quer aplicar uma classe "active" para destacar na playlist a musica que está tocando no momento certo?

Bueno, com javascript puro fica bizonho demais fazer. Alias, eu aconselho você estudar o jQuery e transcrever ele para jQuery. Assim facilita o desenvolvimento!

Então, no jQuery existem N maneiras de aplicar e remover classes nos elementos. A premissa da lógica é que a classe active seja aplicada na <li> da música atual(variável " limusica") e removida das demais.

Veja este exemplo:
$(".next").on("click",function(){
  var $proxima = $('.active').next().length > 0 ? $('.active').next() : $('#playlist li').first();
  $('.active').removeClass('active');
  $proxima.addClass('active');
});

$(".prev").on("click",function(){
  var $anterior = $('.active').prev().length > 0 ? $('.active').prev() : $('#playlist li').last();
  $('.active').removeClass('active');
  $anterior.addClass('active');
});
A variável $proxima recebe um teste de IF ternário. Esta linha seria a mesma coisa que fazer assim:
if($('.active').next().length > 0 ){
   $('.active').next();
}else{
   $('#playlist li').first();
}
Veja o player funcionando como deveria: https://goo.gl/JoQM3G

PS: Como seu player não começa tocando automaticamente, adicione a classe active diretamente no primeiro elemento <li>, pois no momento que clicar em próximo, vai remover o active do primeiro e colocar no segundo.. e assim por diante.

Deu certo @DiF muitíssimo obrigado, eu vou fazer o que aconselhou e passar isso pro jquery vi uma extensão bem bacana propria para playlist la, jplayer.