Reproductor de musica 1 canción.

<div class="playlist-b"><div class="partarrp"><i class="fas fa-volume-up"></i></div><div class="headerp"><img src="https://placehold.jp/200x200.png"/></div><div class="minirepro"><i class="fas fa-step-backward"></i><i class="fas fa-pause"></i><i class="fas fa-step-forward"></i></div><div class="bloquetit"><div class="subtitp">playlist</div><div class="mediotitp">Wake up</div></div><div class="bloqueicon"><i class="far fa-heart"></i><i class="fas fa-sync"><i class="fas fa-random"></i><i class="fas fa-ellipsis-h"></i></i></div><div class="cancionpl"><div class="subtitp">Dua Lipa</div><div class="titp">Levitating</div><div class="reprodp"><div class="cuadr"><div class="linprin"><div class="collin"></div><div class="circrp"></div></div></div></div></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css?family=Kanit:700,500|Open+Sans&display=swap" rel="stylesheet">
<style>.playlist-b{width:300px; height:480px; background:#fff; border:1px solid #eee; border-radius:0px; margin:10px auto; overflow:hidden;} .playlist-b .headerp{height:200px; background:#fafafa; margin:0px; align-items:center; justify-content:center; display:flex; padding:15px; border-bottom:1px solid #eee;} .minirepro{width:150px; height:35px; background:#fff; border:1px solid #eee; position:relative; border-radius:30px;margin: -18px auto; align-items:center; justify-content:center; display:flex; } .playlist-b .headerp img{width:200px; height:200px; border-radius:190px; padding:3px; border:1px solid #ddd;} .minirepro i{padding:12px; color:#ccc;} .minirepro .fa-pause{color:#F99B7E;} .partarrp{height:14px; padding:5
px 15px 3px; border-bottom:1px solid #eee;} .partarrp i{font-size:13px; color:#ccc; border-right:1px solid #eee; padding-right:15px;} .bloquetit{margin:30px; text-align:center;} .subtitp{font-size:10px; text-transform:uppercase;font-family: 'Open Sans', sans-serif; margin-bottom:-2px; color:#555;} .bloquetit .mediotitp{font-family: 'Kanit', sans-serif; font-size:20px; font-weight:500; color:#F99B7E} .bloqueicon{ margin:-10px 0px 0px; height:10px; align-items:center; justify-content:center; text-align:center; width:290px;padding:6px 0px 6px 10px} .bloqueicon i{padding:0px 20px; font-size:11px; color:#ccc; border:0px solid #eee} .bloqueicon .fa-random{padding:0px 18px 0px 34px;} .cancionpl{margin:20px; background:#fff;} .cancionpl .titp{font-family: 'Kanit', sans-serif; font-size:25px; text-transform:uppercase; padding-left:20px; color:#F99B7E;font-weight:700;} .reprodp{ background:#fff; width:240px; height:5px; margin:10px auto; padding:5px 0px;} .cuadr{height:5px; backg round:#000;} .linprin{height:2px; background:#ddd; position:relative; top:2px;} .collin{height:3px; background:#F99B7E; width:70%; float:left;} .circrp{width:10px; height:10px; background:#F99B7E; float:left; border-radius:10px; margin-top:-4px;} .cancionpl .subtitp{padding-left:20px;}.cred{margin:3px auto; width:280px; text-align:center;background:#fff;border:1px solid #eee;} .cred a{text-decoration:none; color:#888; text-transform:uppercase; font-size:8px; font-family:arial; letter-spacing:2px;}</style>