Reino Kawaii

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
var audio;var playlist;var tracks;var current;initaudio();function initaudio(){current=0;audio=$('audio');playlist=$('#playlist');tracks=playlist.find('li a');len=tracks.length-1;audio[0].volume=1;playlist.find('a').click(function(e){e.preventDefault();link=$(this);current=link.parent().index();runaudio(link,audio[0])});audio[0].addEventListener('ended',function(e){current++;if(current>len){current=0;link=playlist.find('a')[0]}else{link=playlist.find('a')[current]}runaudio($(link),audio[0])})}function runaudio(link,player){player.src=link.attr('href');par=link.parent();par.addClass('active').siblings().removeClass('active');audio[0].load();audio[0].play()}
//]]>
</script> 

 #musicgadget {
z-index: 9999;
position: fixed;
bottom: -610px;/* desce o player */
right: 10px;/*direita*/
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#musicgadget:hover {
bottom: 0px;
}
#musicgadgettitle {
width: 240px;
padding: 3px 5px 5px 5px;
}
#playlist, #player {
width: 240px; /* largura total */
padding: 20px;
margin: 0 auto;
display: block;
text-align: center;
}
#player {
/* background do player */
background: none;
padding: 10px 20px;
}
audio {
width:140px; /* player */
margin:0 auto;
margin-top: 40px;
display: inline-block;
border-radius: 30px;
opacity: .5;
filter:alpha(opacity=50);
}
#player:after {
/* hearts */
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvWc43PYY7G6LD9q1oQamTw00XvAaPmxbosAzmic8GLQkTmvbzFQ2G55kV-zZlEjCB7jTmmsR4a4__qIMprbRwnX7AyHKREEZd3RFC6qIOwusE7g7jSj6oVLWXMBb-KOzaC4CdjBcRdY/s1600/1424.gif);
padding-left: 10px;
}
#playlist {
margin: 0 auto 20px auto;
display: block;
width: 240px;
background: #fff; /* background da playlist */
text-align: left;
font-size: 12px; /* tamanho do texto */
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-weight: normal;
outline-offset: -3px;
outline: 1px dashed #ddd5f5;
}
#imagetop {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLPbppDV3f4jBMF10PZn_PcPBAQXcQnXBObRSm08eX2mSeBhXRF_Hn0wRI2cMSwOw_NtQIZVMBGcY8hW0FVfqcoifYN2msfJ9oBevMcG_XrUYFfNZCq_qzMmy-Fi4q-SFvyAd9G5jJ4Ng/s1600/3.gif) no-repeat top;
width: 100%;
height: 100px;
border: none;
display: block;
}
#image {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUtErOpYUROVgM6TUCTplyQVUmxpKvKszgiG7EBrncI2NI_9UQbfvGw4hjmigDoF_98jscRdv8cw8yTAsHrHxC_dWIOztjdorSq79MUP4Yb_e9lElmJu1cyK3yTo8_GvteN4SksSl6HhI/s1600/4.gif) no-repeat bottom;
width: 100%;
height: 100px;
border: none;
display: block;
}
#playlist li, #playlist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
#playlist li a {
color: #fcc; /* cor do texto */
background: #fff; /* background das músicas */
padding: 7px 5px;
display: block;
margim-left: 10px;
text-decoration: none;
outline-offset: -3px;
outline: 1px dashed #ddd5f5;
}
#playlist li a:hover{
background: #fee; /* background das músicas hover */
text-decoration: none;
}
#playlist .active a {
color: #faacca; /* cor da musica selecionada */
text-decoration: none;
outline-offset: -3px;
outline: 1px dashed #fff;
}
#playlist .active a:before {
content: "\25B6";
color: #faacca;
font-style: normal;
padding-right: 8px;
}
#playlist .active a:hover {
color: #ddd5f5; /* cor da musica seleciona em hover */
} 

 <div id="musicgadget">
<div id="musicgadgetinfo">
</div>
<div id="player">
<div id="musicgadgettitle"><audio controls="" id="audio" preload="auto" tabindex="0" type="audio/mpeg">
<source src="URL-DA-PRIMEIRA-MUSICA" type="audio/mp3"></source>
AVISO AO LEITOR PARA USAR CHROME OU FIREFOX.
</audio>
</div></div>
<ul id="playlist">
<div id="imagetop"></div>
<li class="active"><a href="URL-DA-PRIMEIRA-MUSICA">NOME DA MUSICA - CANTOR/BANDA</a></li>
<li><a href="URL-DA-SEGUNDA-MUSICA">NOME DA MUSICA - CANTOR/BANDA</a></li>
<li><a href="URL-DA-TERCEIRA-MUSICA">NOME DA MUSICA - CANTOR/BANDA</a></li>
<li><a href="URL-DA-QUARTA-MUSICA">NOME DA MUSICA - CANTOR/BANDA</a></li>
<li><a href="URL-DA-QUINTA-MUSICA">NOME DA MUSICA - CANTOR/BANDA</a></li>
<div id="image"></div>
</ul></div> 

Aquela mensagem de aviso só vai aparecer caso o leitor use um navegador como o Internet Explorer. E para adicionar mais de 5 músicas é só ir repetindo os últimos códigos. Salve e veja em seu blog como ficou. Só ouvir agora. Espero que gostem. Beijus.