Como Fazer para destacar a música atual que está tocando em uma playlist de audio html5 usando javascript?
Estou tentando criar uma playlist de audio e a unica coisa que está faltando é destacar a música que está sendo tocada no momento, alguém pode me ajudar?
<!doctype html>
<html>
<meta lang="pt-br" />
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/53BA83D0-410E-4F48-AE10-5961019FA9FF/main.js" charset="UTF-8"></script>
<head>
</head>
<style type="text/css">
#playlist,audio {
background:url("1.jpg");
width:400px;
padding:20px;
list-style: none;
color:#ffffff;
font-weight: bold;
}li a{
color:#c7c7c7;
background:#333;
padding:5px;
display:block;
border-color: #fff;
}
.main{
background:url("2.jpg");
}
</style>
<body>
<center>
<audio 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>
<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>
<button onclick="anterior()" >Anterior</button>
<button onclick="proximo()" >Proximo</button>
</center>
</body>
</html>Discussão (0)
Carregando comentários...