Anc Music Player

Code Copied!

HTML

CSS

.dark .aplayer{background:#292929;}
  
.aplayer { background:#fdfdfd; margin-top: -20px; margin:0px; box-shadow:0 2px 2px 0 rgba(0,0,0,.07),0 1px 5px 0 rgba(0,0,0,.1); border-radius:2px; overflow:hidden; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;
user-select:none; line-height:normal; position:relative } .aplayer * { box-sizing:content-box } .aplayer svg { width:100%; height:100% } .aplayer svg circle,.aplayer svg path { fill:#fff } .aplayer.aplayer-withlist .aplayer-info {
border-bottom:1px solid #e9e9e9 } .aplayer.aplayer-withlist .aplayer-list { display:block } .aplayer.aplayer-withlist .aplayer-icon-order,.aplayer.aplayer-withlist .aplayer-info .aplayer-controller .aplayer-time
.aplayer-icon.aplayer-icon-menu { display:inline } .aplayer.aplayer-withlrc .aplayer-pic { height:100px; width:100px } .aplayer.aplayer-withlrc .aplayer-info { margin-left:90px; height:90px; padding:10px 10px 0 } .aplayer.aplayer-withlrc
.aplayer-lrc { display:block } .aplayer.aplayer-narrow { width:66px } .aplayer.aplayer-narrow .aplayer-info,.aplayer.aplayer-narrow .aplayer-list { display:none } .aplayer.aplayer-narrow .aplayer-body,.aplayer.aplayer-narrow .aplayer-pic {
height:66px; width:66px } .aplayer.aplayer-fixed { position:fixed; bottom:0; left:0; right:0; margin:0; z-index:99; overflow:visible; max-width:400px; box-shadow:none } .aplayer.aplayer-fixed .aplayer-list { margin-bottom:65px; border:1px
solid #eee; border-bottom:none } .aplayer.aplayer-fixed .aplayer-body { position:fixed; bottom:0; left:0; right:0; margin:0; z-index:99; background:#fff; padding-right:18px; transition:all .3s ease; max-width:400px } .aplayer.aplayer-fixed
.aplayer-lrc { display:block; position:fixed; bottom:10px; left:0; right:0; margin:0; z-index:98; pointer-events:none; text-shadow:0 0 1px #fff,0 0 10px #fff } .aplayer.aplayer-fixed .aplayer-lrc:after,.aplayer.aplayer-fixed
.aplayer-lrc:before { display:none } .aplayer.aplayer-fixed .aplayer-info { -webkit-transform:scaleX(1); transform:scaleX(1); -webkit-transform-origin:0 0; transform-origin:0 0; transition:all .3s ease; border-bottom:none; border-top:1px
solid #e9e9e9 } .aplayer.aplayer-fixed .aplayer-info .aplayer-music { width:calc(100% - 105px) } .aplayer.aplayer-fixed .aplayer-miniswitcher { display:block } .aplayer.aplayer-fixed.aplayer-narrow .aplayer-info { display:block;
-webkit-transform:scaleX(0); transform:scaleX(0) } .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body { width:66px!important } .aplayer.aplayer-fixed.aplayer-narrow .aplayer-miniswitcher .aplayer-icon { -webkit-transform:rotateY(0);
transform:rotateY(0) } .aplayer.aplayer-fixed .aplayer-icon-back,.aplayer.aplayer-fixed .aplayer-icon-forward,.aplayer.aplayer-fixed .aplayer-icon-lrc,.aplayer.aplayer-fixed .aplayer-icon-play { display:inline-block } .aplayer.aplayer-fixed
.aplayer-icon-back,.aplayer.aplayer-fixed .aplayer-icon-forward,.aplayer.aplayer-fixed .aplayer-icon-menu,.aplayer.aplayer-fixed .aplayer-icon-play { position:absolute; bottom:27px; width:20px; height:20px } .aplayer.aplayer-fixed
.aplayer-icon-back { right:75px } .aplayer.aplayer-fixed .aplayer-icon-play { right:50px } .aplayer.aplayer-fixed .aplayer-icon-forward { right:25px } .aplayer.aplayer-fixed .aplayer-icon-menu { right:0 } .aplayer.aplayer-arrow
.aplayer-icon-loop,.aplayer.aplayer-arrow .aplayer-icon-order,.aplayer.aplayer-mobile .aplayer-icon-volume-down { display:none } .aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-loading-icon { display:block }
.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb { -webkit-transform:scale(1); transform:scale(1) } .aplayer .aplayer-body { height:100%; width:100%; position:relative
} .aplayer .aplayer-icon { width:15px; height:15px; border:none; background-color:transparent; outline:none; cursor:pointer; opacity:.8; vertical-align:middle; padding:0; font-size:12px; margin:0; display:inline-block } .aplayer
.aplayer-icon path { transition:all .2s ease-in-out } .aplayer .aplayer-icon-back,.aplayer .aplayer-icon-forward,.aplayer .aplayer-icon-lrc,.aplayer .aplayer-icon-order,.aplayer .aplayer-icon-play { display:none } .aplayer
.aplayer-icon-lrc-inactivity svg { opacity:.4 } .aplayer .aplayer-icon-forward { -webkit-transform:rotate(180deg); transform:rotate(180deg) } .aplayer .aplayer-lrc-content { display:none } .aplayer .aplayer-pic { position:relative;
float:left; height:66px; width:66px; background-size:cover; background-position:50%; transition:all .3s ease; cursor:pointer } .aplayer .aplayer-pic:hover .aplayer-button { opacity:1 } .aplayer .aplayer-pic .aplayer-button {
position:absolute; border-radius:50%; opacity:.8; text-shadow:0 1px 1px rgba(0,0,0,.2); box-shadow:0 1px 1px rgba(0,0,0,.2); background:rgba(0,0,0,.2); transition:all .1s ease } .aplayer .aplayer-pic .aplayer-button path { fill:#fff }
.aplayer .aplayer-pic .aplayer-hide { display:none } .aplayer .aplayer-pic .aplayer-play { width:26px; height:26px; border:2px solid #fff; bottom:50%; right:50%; margin:0 -15px -15px 0 } .aplayer .aplayer-pic .aplayer-play svg {
position:absolute; top:3px; left:4px; height:20px; width:20px } .aplayer .aplayer-pic .aplayer-pause { width:16px; height:16px; border:2px solid #fff; bottom:4px; right:4px } .aplayer .aplayer-pic .aplayer-pause svg { position:absolute;
top:2px; left:2px; height:12px; width:12px } .aplayer .aplayer-info { margin-left:66px; padding:14px 7px 0 10px; height:66px; box-sizing:border-box } .aplayer .aplayer-info .aplayer-music { overflow:hidden; white-space:nowrap;
text-overflow:ellipsis; margin:0 0 13px 5px; -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; cursor:default; padding-bottom:2px } .aplayer .aplayer-info .aplayer-music .aplayer-title {
font-size:14px; color:#666 } .aplayer .aplayer-info .aplayer-music .aplayer-author { font-size:12px; color:#666 } .aplayer .aplayer-info .aplayer-controller { position:relative; display:flex } .aplayer .aplayer-info .aplayer-controller
.aplayer-bar-wrap { margin:0 0 0 5px; padding:4px 0; cursor:pointer!important; flex:1 } .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap:hover .aplayer-bar .aplayer-played .aplayer-thumb { -webkit-transform:scale(1);
transform:scale(1) } .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar { position:relative; height:2px; width:100%; background:#cdcdcd } .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar
.aplayer-loaded { position:absolute; left:0; top:0; bottom:0; background:#aaa; height:2px; transition:all .5s ease } .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played { position:absolute; left:0;
top:0; bottom:0; height:2px } .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb { position:absolute; top:0; right:5px; margin-top:-4px; margin-right:-10px; height:10px; width:10px;
border-radius:50%; cursor:pointer; transition:all .3s ease-in-out; -webkit-transform:scale(0); transform:scale(0) } .aplayer .aplayer-info .aplayer-controller .aplayer-time { position:relative; right:0; bottom:4px; height:17px; color:#999;
font-size:11px; padding-left:7px } .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner { vertical-align:middle } .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon { cursor:pointer;
transition:all .2s ease } .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path { fill:#666 } .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-loop { margin-right:2px } .aplayer
.aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path { fill:#000 } .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu,.aplayer .aplayer-info .aplayer-controller
.aplayer-time.aplayer-time-narrow .aplayer-icon-menu,.aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-mode { display:none } .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap {
position:relative; display:inline-block; margin-left:3px; cursor:pointer!important } .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap { height:40px } .aplayer .aplayer-info .aplayer-controller
.aplayer-volume-wrap .aplayer-volume-bar-wrap { position:absolute; bottom:15px; right:-3px; width:25px; height:0; z-index:99; overflow:hidden; transition:all .2s ease-in-out } .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap
.aplayer-volume-bar-wrap.aplayer-volume-bar-wrap-active { height:40px } .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar { position:absolute; bottom:0; right:10px; width:5px;
height:35px; background:#aaa; border-radius:2.5px; overflow:hidden } .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume { position:absolute; bottom:0; right:0;
width:5px; transition:all .1s ease } .aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon { display:none } .aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon svg { position:absolute; -webkit-animation:rotate 1s
linear infinite; animation:rotate 1s linear infinite } .aplayer .aplayer-lrc { display:none; position:relative; height:30px; text-align:center; overflow:hidden; margin:-10px 0 7px } .aplayer .aplayer-lrc:before { top:0; height:10%;
background:linear-gradient(180deg,#fff 0,hsla(0,0%,100%,0)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#00ffffff",GradientType=0) } .aplayer .aplayer-lrc:after,.aplayer
.aplayer-lrc:before { position:absolute; z-index:1; display:block; overflow:hidden; width:100%; content:" " } .aplayer .aplayer-lrc:after { bottom:0; height:33%; background:linear-gradient(180deg,hsla(0,0%,100%,0)
0,hsla(0,0%,100%,.8)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff",endColorstr="#ccffffff",GradientType=0) } .aplayer .aplayer-lrc p { font-size:22px; font-family: 'BenSen', Arial,
sans-serif !important; color:#666; line-height:px!important; height:16px!important; padding:0!important; margin:0!important; transition:all .5s ease-out; opacity:.4; overflow:hidden } .aplayer .aplayer-lrc p.aplayer-lrc-current { opacity:1;
overflow:visible; height:auto!important; min-height:16px } .aplayer .aplayer-lrc.aplayer-lrc-hide { display:none } .aplayer .aplayer-lrc .aplayer-lrc-contents { width:100%; transition:all .5s ease-out; -webkit-user-select:text;
-moz-user-select:text; -ms-user-select:text; user-select:text; cursor:default } .aplayer .aplayer-list { overflow:auto; transition:all .5s ease; will-change:height; display:none; overflow:hidden } .aplayer .aplayer-list.aplayer-list-hide {
max-height:0!important } .aplayer .aplayer-list ol { list-style-type:none; margin:0; padding:0; overflow-y:auto } .aplayer .aplayer-list ol::-webkit-scrollbar { width:5px } .aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
border-radius:3px; background-color:#eee } .aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover { background-color:#ccc } .aplayer .aplayer-list ol li { position:relative; height:32px; line-height:32px; padding:0 15px; font-size:12px;
border-top:1px solid #e9e9e9; cursor:pointer; transition:all .2s ease; overflow:hidden; margin:0 } .aplayer .aplayer-list ol li:first-child { border-top:none } .aplayer .aplayer-list ol li:hover { background:#efefef } .aplayer .aplayer-list
ol li.aplayer-list-light { background:#e9e9e9 } .aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur { display:inline-block } .aplayer .aplayer-list ol li .aplayer-list-cur { display:none; width:3px; height:22px;
position:absolute; left:0; top:5px; cursor:pointer } .aplayer .aplayer-list ol li .aplayer-list-index { color:#666; margin-right:12px; cursor:pointer } .aplayer .aplayer-list ol li .aplayer-list-author { color:#666; float:right;
cursor:pointer } .aplayer .aplayer-notice { opacity:0; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); font-size:12px; border-radius:4px; padding:5px 10px; transition:all .3s
ease-in-out; overflow:hidden; color:#fff; pointer-events:none; background-color:#f4f4f5; color:#909399 } .aplayer .aplayer-miniswitcher { display:none; position:absolute; top:0; right:0; bottom:0; height:100%; background:#e6e6e6;
width:18px; border-radius:0 2px 2px 0 } .aplayer .aplayer-miniswitcher .aplayer-icon { height:100%; width:100%; -webkit-transform:rotateY(180deg); transform:rotateY(180deg); transition:all .3s ease } .aplayer .aplayer-miniswitcher
.aplayer-icon path { fill:#666 } .aplayer .aplayer-miniswitcher .aplayer-icon:hover path { fill:#000 } @-webkit-keyframes aplayer-roll { 0% { left:0 } to { left:-100% } } @keyframes aplayer-roll { 0% { left:0 } to { left:-100% } }
@-webkit-keyframes rotate { 0% { -webkit-transform:rotate(0); transform:rotate(0) } to { -webkit-transform:rotate(1turn); transform:rotate(1turn) } } @keyframes rotate { 0% { -webkit-transform:rotate(0); transform:rotate(0) } to {
-webkit-transform:rotate(1turn); transform:rotate(1turn) } }
 /* mp3 lyrics  */
.tbn_css_frame_wrap_inner2 { position: relative; padding-bottom: 0; height: 100px; background-color: #000 !important; border: 15px solid #CACACA; } .tbn_css_frame_wrap_inner2 iframe, .tbn_css_frame_wrap_inner2 object,
.tbn_css_frame_wrap_inner2 embed { position:absolute; top:0; width:100%; height:100%; } .bottomshadows { position: relative; } .bottomshadows:before, .bottomshadows:after { z-index: -1; position: absolute; content: ""; bottom:
0px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-4deg); -moz-transform:
rotate(-4deg); -o-transform: rotate(-4deg); -ms-transform: rotate(-4deg); transform: rotate(-4deg); } .bottomshadows:after { -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); -ms-transform:
rotate(4deg); transform: rotate(4deg); right: 10px; left: auto; } @media all and (max-width: 400px) { .tbn_css_frame_wrap_inner2 { border: 7px solid #CACACA !important; } .bottomshadows:before, .bottomshadows:after { bottom: 9px !important;
} }
/* lrc play  */
.bottomshadows3{border:1px solid rgba(255,255,255,.03);border-top-color:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.01);box-shadow:0 5px 12px rgba(0,0,0,.7);-moz-box-shadow:0 5px 12px rgba(0,0,0,.7);-webkit-box-shadow:0 5px 12px rgba(0,0,0,.7);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;display:block;border:2px solid fff}  
/* plyr  */ 
 .tbn{position:relative;height:10px;background-color:#000!important;border:15px solid #cacaca}.tbn,.tbn0 embed,.tbn0 object{position:absolute;top:0;width:100%;height:100%}.bottomshadows{position:relative}.bottomshadows:after,.bottomshadows:before{z-index:-1;position:absolute;content:"left:10px;width:50%;top:80%;max-width:300px;background:#777;-webkit-box-shadow:0 15px 10px #777;-moz-box-shadow:0 15px 10px #777;box-shadow:0 15px 10px #777;-webkit-transform:rotate(-4deg);-moz-transform:rotate(-4deg);-o-transform:rotate(-4deg);-ms-transform:rotate(-4deg);transform:rotate(-4deg)}.bottomshadows:after{-webkit-transform:rotate(4deg);-moz-transform:rotate(4deg);-o-transform:rotate(4deg);-ms-transform:rotate(4deg);transform:rotate(4deg);right:10px;left:auto}@media all and (max-width:400px){.tbn_css_frame_wrap_inner2{border:7px solid #cacaca!important}.bottomshadows:after,.bottomshadows:before{bottom:9px!important}}.bz_css_frame_wrap_inner{position:relative;padding-bottom:15%;height:300px;background-color:#000!important;border:15px solid #cacaca}.bz_css_frame_wrap_inner embed,.bz_css_frame_wrap_inner iframe,.bz_css_frame_wrap_inner object{position:absolute;top:0;width:100%;height:100%}.bbottomshadows{position:relative}.bbottomshadows:before,.bottomshadows:after{z-index:-1;position:absolute;content:"left:10px;width:50%;top:80%;max-width:300px;background:#777;-webkit-box-shadow:0 15px 10px #777;-moz-box-shadow:0 15px 10px #777;box-shadow:0 15px 10px #777;-webkit-transform:rotate(-4deg);-moz-transform:rotate(-4deg);-o-transform:rotate(-4deg);-ms-transform:rotate(-4deg);transform:rotate(-4deg)}.bbottomshadows:after{-webkit-transform:rotate(4deg);-moz-transform:rotate(4deg);-o-transform:rotate(4deg);-ms-transform:rotate(4deg);transform:rotate(4deg);right:10px;left:auto}@media all and (max-width:400px){.bz_css_frame_wrap_inner{border:7px solid #cacaca!important}.bbottomshadows:before,.bottomshadows:after{bottom:9px!important}} 
.plyr--full-ui input[type=range]{color:#2cc58d!important}.plyr--video .plyr__controls .plyr__control[aria-expanded=true]{background:#2cc58d}.plyr__control--overlaid:hover{background:#2cc58d}.plyr__control--overlaid{background:#2cc58d}.plyr__control:hover{background:#2cc58d!important}.plyr__control--overlaid{padding:15px}
.bottomshadows3 .plyr__video-embed iframe{top:-50%;height:200%}
m{font-size:0px;display:none;width:0;height:0;}
</style>

<div id='Blog1'>
<div id='anc_pl'></div>
[m]lrc.lr/data-name="Tamak Pata" data-artist="Ashes" data-url="https://c2lo.reverbnation.com/audio_player/download_song_direct/26048979/bea494b56fe5076b3ce4036daea9b0df"  data-lrc="[/m]
</div>

<script type='text/javascript'>
//<![CDATA[   
var $_=function(i){if(document.getElementById)return document.getElementById(i)},M=new ANCMusic;function ANCMusic(){m_w=this.width,i_1=this.id1,i_2=this.id2,au=this.auto,this.r=function(){var i=(i=(i=$_(i_1).innerHTML).replace(/\[m\]/gi,"<span id='anc_ms' style='display: none!important;'>")).replace(/\[\/m\]/gi,"</span>");return $_(i_1).innerHTML=i,z=$_("anc_ms").innerHTML},this.p=function(i){$_(i_2).innerHTML=M.l(i)},this.l=function(i){var n="";return 1!=i.indexOf(".mp3")&&-1==i.indexOf("priolyric")&&(n=o(i)[0]),-1!=i.indexOf("ply")&&-1==i.indexOf("priolyric")&&(n=o(i)[1]),-1!=i.indexOf("lrc.lr")&&-1==i.indexOf("priolyric")&&(n=o(i)[2]),-1!=i.indexOf("lrc.pl")&&-1==i.indexOf("priolyric")&&(n=o(i)[3]),n},this.css=function(i){css="<style>",css+="#music_pl{margin:-"+i+"px 0;}",css+="</style>",document.write(css)}}
var o = function (a) {
    _mode = 'quality="high" wmode="transparent" type="application/x-shockwave-flash" allowscriptaccess="always" ';
  return data = [
//0 mp3
'<div id="player3" class="aplayer"><iframe allowfullscreen="" scrolling="no" frameborder="0" height="280" src="https://lrcplayer.blogspot.com/p/player-url-lrc.html?sv='+a+' " width="100%"></iframe></div>',
//1 plyr 
'<div class="bottomshadows3"><link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css"><div id="player" '+a+'  data-plyr-provider="youtube" height="220px"></div>',
//2 aplayer mod 
'<div class="bottomshadows3"><div class="aplayer" '+a+' data-cover="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhufZVTt8VkZtMiaol46krjNIPcfO-PV0SUe8rf9oHTCahTPek9s_GaABQ3s3yvTh0PmmdHVlDAFe01lPM4UXXzwZJaPyOqqgU4cEgg6H4I0H8k-J9WtBZdOd2tbSN91CngRdVFRGUGpEJw/s1600/player.jpg" ></div></div>',
//3 aplyer playlist 7
'<div class="bottomshadows3"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css"/><div class="aplayer" '+a+' ></div></div>'
]};
//]]></script>
<script type='text/javascript'>
//<![CDATA[
var z={width:"100%",id1:"Blog1",id2:"anc_pl",auto:"true"};ANCMusic.call(z),M.p(M.r());
 //]]>
</script>

Output

Exit Full Screen