资源来源网络，如果需要授权，请大家更换源码，模块仅供学习，下载后请2小时内删除，如需商用请购买正版授权
HTML代码
// Inspired By This Dribble post https://dribbble.com/shots/2321025-Music-Player-Freebie <3 <3 <3 .player img.cover(src="http://images.genius.com/2216a21a5494b153cb4c24005370d031.700x700x1.jpg", alt="Cover") .icons .fa.fa-heart .fa.fa-random .info p.title Leave Your Lover p.artist Artist - Echos p.album Album - Echos .line .playtime .played img.forward(src='data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4IiB2aWV3Qm94PSIwIDAgNDM5LjM1NyA0MzkuMzU3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MzkuMzU3IDQzOS4zNTc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMzYwLjQyNyw1LjgzM2MtMy42MTMtMy42MTctNy44OTgtNS40MjQtMTIuODQ3LTUuNDI0aC0zNi41NDVjLTQuOTQ1LDAtOS4yMzMsMS44MDctMTIuODQ3LDUuNDI0ICAgYy0zLjYxNCwzLjYyMS01LjQyOCw3LjkwMi01LjQyOCwxMi44NXYxOTMuNTc0Yy0wLjk0OC0yLjA5MS0yLjE5LTMuOTAxLTMuNzE3LTUuNDI0TDg2LjM0Myw0LjEyNSAgIGMtMy42MTctMy42MTctNi42NjMtNC44NTYtOS4xMzYtMy43MTNjLTIuNDc0LDEuMTQzLTMuNzExLDQuMTg5LTMuNzExLDkuMTM3djQyMC4yNjJjMCw0Ljk0OCwxLjIzNyw3Ljk5NCwzLjcxMSw5LjEzOCAgIGMyLjQ3MywxLjE0LDUuNTE5LTAuMSw5LjEzNi0zLjcyNEwyODkuMDQ4LDIzMi41MmMxLjUyOS0xLjcxMSwyLjc2NS0zLjUyMSwzLjcyLTUuNDI0VjQyMC42NmMwLDQuOTQ4LDEuODEsOS4yMzksNS40MjEsMTIuODQ3ICAgYzMuNjIsMy42Miw3LjkwNCw1LjQyOCwxMi44NDcsNS40MjhoMzYuNTUyYzQuOTQ4LDAsOS4yMzYtMS44MDgsMTIuODQ3LTUuNDI4YzMuNjE0LTMuNjA3LDUuNDI4LTcuODk4LDUuNDI4LTEyLjg0N1YxOC42ODMgICBDMzY1Ljg1NCwxMy43MywzNjQuMDM3LDkuNDUsMzYwLjQyNyw1LjgzM3oiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K') img.backward(src='data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4IiB2aWV3Qm94PSIwIDAgNDM5LjM2MiA0MzkuMzYyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MzkuMzYyIDQzOS4zNjI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMzYyLjE0NiwwLjQxMmMtMi40NzEtMS4xNDMtNS41MTcsMC4wOTQtOS4xMzgsMy43MDlMMTUwLjMwOCwyMDYuODI4Yy0xLjcxOCwxLjUyNC0yLjk1NSwzLjMzMy0zLjcxNSw1LjQyNFYxOC42NzkgICBjMC00Ljk1Mi0xLjgwOS05LjIzNC01LjQyNC0xMi44NWMtMy42MTctMy42MTctNy45LTUuNDI2LTEyLjg0Ny01LjQyNkg5MS43NzVjLTQuOTUyLDAtOS4yMzMsMS44MDktMTIuODUsNS40MjYgICBDNzUuMzA4LDkuNDQ4LDczLjUsMTMuNzMsNzMuNSwxOC42Nzl2NDAxLjk4NmMwLDQuOTQ4LDEuODA3LDkuMjM2LDUuNDI0LDEyLjg0N2MzLjYyMSwzLjYyLDcuOTAyLDUuNDI4LDEyLjg1LDUuNDI4aDM2LjU0MyAgIGM0Ljk0NywwLDkuMjI5LTEuODA4LDEyLjg0Ny01LjQyOGMzLjYxNS0zLjYxLDUuNDI0LTcuODk4LDUuNDI0LTEyLjg0N1YyMjcuMDk3YzAuNzYzLDEuOTAzLDIsMy43MTcsMy43MTUsNS40MjVsMjAyLjcwNSwyMDIuNzEyICAgYzMuNjIxLDMuNjE3LDYuNjY3LDQuODU5LDkuMTM4LDMuNzJjMi40NzgtMS4xNDQsMy43MTYtNC4xODksMy43MTYtOS4xMzhWOS41NDdDMzY1Ljg2Miw0LjU5OSwzNjQuNjI0LDEuNTUzLDM2Mi4xNDYsMC40MTJ6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==') .fa.fa-volume-up.fa-2x p.songtime 4:20 p.timeleft 1:44 svg#Capa_1(xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', version='1.1', x='0px', y='0px', viewbox='0 0 512 512', style='enable-background:new 0 0 512 512;', xml:space='preserve', width='512px', height='512px') path(d='M256,0C114.617,0,0,114.615,0,256s114.617,256,256,256s256-114.615,256-256S397.383,0,256,0z M344.48,269.57l-128,80 c-2.59,1.617-5.535,2.43-8.48,2.43c-2.668,0-5.34-0.664-7.758-2.008C195.156,347.172,192,341.82,192,336V176 c0-5.82,3.156-11.172,8.242-13.992c5.086-2.836,11.305-2.664,16.238,0.422l128,80c4.676,2.93,7.52,8.055,7.52,13.57 S349.156,266.641,344.48,269.57z', fill='#72e6cf') g g g g g g g g g g g g g g g