Eai, galera!
Estou tentando criar um player de música com playlist, porém não estou tendo muito sucesso, pois quando clico em alguma música o player de música abre em outra página e não na página principal onde quero que fique o player e onde quero que toque (como padrão).
Vocês podem me dar uma ajuda nisso?
Tenho esse código:
//* PLAYER DE MÚSICA.
inicio();
function inicio(){
var corrente = 0;
var audio = $("#musica");
var playlist = $("#playlist");
var tracks = playlist.find("li a");
var len = tracks.length -1;
musica[0].play();
playlist.find("a").click(function(e){
e.preventDefault();
link = $(this);
corrente = link.parent().index();
run(link, musica[0]);
});
musica[0].addEventListener("ended", function(e){
corrente++;
if(corrente == len){
corrente = 0;
link = playlist.find("a")[0];
}else{
link = playlist.find("a")[corrente];
}
run($(link), musica[0]);
});
}
function run(link, player) {
player.src = link.attr("href");
par = link.parent();
par.addClass("active").siblings().removeClass("active");
player.load();
player.play();
}
ul{list-style: none; padding: 0px}
a{text-decoration: none; color: #444; font-family: arial}
li:hover{background: #eee; border-bottom: solid 1px #f60;}
li{width: 20%; padding: 5px; border-bottom: solid 1px #ccc;}
.active a{color:#f60; padding-left: 1px; font-style: italic;}
<audio id="musica" preload="auto" tabindex="0" controls="controls">
<source src="Blackbear-doremi.mp3" type="audio/mpeg"/>
Desculpaaa, o áudio não é suportado pelo seu navegador :(
</audio>
<ul id="playlist">
<li class="active"><a href="Blackbear-doremi.mp3"> BlackBear - Do Re Mi</a></li>
<li><a href="BMTH-Medicine.mp3"> Bring Me The Horizon - Medicine</a></li>
<li><a href="Hozier-TakeMeToChurch.mp3"> Hozier - Take Me To Church</a></li>
</ul>