Music player with playlist

Question

Eai, you guys!

I’m trying to create a music player with playlist, but I’m not having much success, because when I click on some music the music player opens on another page and not on the main page where I want the player and where I want it to play (by default).

You can give me a hand with that?

I have that code:

//* 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>

Answer 1

Try removing the tags <a> and puts a <span>, just don’t forget to change in js tbm !! Or tbm can try to use the property target=_self.