Widget:Biliau-aplayer

<style> .aplayer { background:#fff; font-family:Arial,Helvetica,sans-serif; margin:5px; 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:90px; width:90px } .aplayer.aplayer-withlrc .aplayer-info { margin-left:90px; height:90px; padding:10px 7px 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:-1px -1px 0 #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 { 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; height:20px } .aplayer .aplayer-info .aplayer-music .aplayer-title { font-size:14px } .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:12px; color:#666; line-height:16px!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) } } /*# sourceMappingURL=APlayer.min.css.map*/ button.bilibili-icon-audio {

   width: 20;
   height: 20;
   border: none;
   background-color: #00b6ff;
   outline: none;
   /* color: #00b6ff; */
   cursor: pointer;
   opacity: .8;
   vertical-align: middle;
   padding: 0;
   font-size: 12px;
   margin-top: -9px;
   margin: 0px 0px 0px 0px;
   display: inline-block;

} </style>

<script src="https://wiki.biligame.com/seerwar/MediaWiki:APlayer.js?action=raw&ctype=text/javascript"></script> <script>

       RLQ.push(['jquery', () => {
       $.getJSON(`https://www.bilibili.com/audio/music-service-c/web/song/info?sid=`,function(result){
       $.getJSON(`https://www.bilibili.com/audio/music-service-c/web/url?sid=`,function(results){

var ap = new APlayer({

   container: document.getElementById('aplayer'),
   lrcType: 3,
   audio: [
   {
       name: result.data.title,
       artist: result.data.author,
       url: results.data.cdns[0].replace("upos-sz-mirrorks3.bilivideo.com","125-72-144-1.ksyungslb.com/upos-sz-mirrorks3.bilivideo.com"),
       cover: result.data.cover.replace("http","https"),
       lrc: result.data.lyric.replace("http","https"),
       theme: '#ebd0c2'
   }
   ]

}); $('.aplayer-time').append(`<button type="button" onmouseover="javascript:void(0)" onclick="location='https://www.bilibili.com/audio/au`+ result.data.id +`'" class="bilibili-icon-audio"><svg t="1638035387610" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4625" width="16" height="16"><path d="M386.327273 437.527273h-4.654546l-125.672727 27.927272c-18.618182 4.654545-27.927273 18.618182-23.272727 37.236364v9.309091c4.654545 13.963636 13.963636 23.272727 27.927272 23.272727h4.654546l130.327273-23.272727c18.618182-4.654545 27.927273-18.618182 23.272727-37.236364V465.454545c-4.654545-13.963636-18.618182-27.927273-32.581818-27.927272zM414.254545 605.090909c-9.309091 0-18.618182 9.309091-18.618181 18.618182 0 18.618182 4.654545 37.236364 18.618181 51.2 13.963636 18.618182 32.581818 23.272727 51.2 23.272727 18.618182 0 32.581818-4.654545 46.545455-18.618182h9.309091c13.963636 13.963636 27.927273 18.618182 41.890909 18.618182 18.618182 0 27.927273-4.654545 41.890909-9.309091 23.272727-18.618182 32.581818-41.890909 32.581818-69.818182 0-4.654545 0-4.654545-4.654545-9.30909-9.309091-4.654545-13.963636-4.654545-23.272727-4.654546H605.090909c-9.309091 0-13.963636 9.309091-13.963636 18.618182s0 18.618182-9.309091 23.272727c-4.654545 9.309091-13.963636 13.963636-23.272727 13.963637s-13.963636-4.654545-23.272728-13.963637c-4.654545-9.309091-9.309091-18.618182-9.309091-27.927273 0-9.309091-9.309091-13.963636-18.618181-13.963636s-18.618182 4.654545-18.618182 13.963636v4.654546c0 9.309091-4.654545 23.272727-13.963637 27.927273-4.654545 4.654545-9.309091 4.654545-13.963636 4.654545-9.309091 0-13.963636-4.654545-23.272727-13.963636-4.654545-9.309091-9.309091-18.618182-9.309091-27.927273 4.654545-4.654545-4.654545-9.309091-13.963637-9.309091zM637.672727 437.527273c-13.963636 0-27.927273 9.309091-27.927272 23.272727v9.309091c-4.654545 18.618182 9.309091 32.581818 23.272727 37.236364l125.672727 23.272727h4.654546c13.963636 0 27.927273-9.309091 27.927272-23.272727v-9.309091c4.654545-18.618182-9.309091-32.581818-23.272727-37.236364l-125.672727-23.272727h-4.654546z" fill="#8a8a8a" p-id="4626"></path><path d="M795.927273 325.818182c23.272727 0 41.890909 18.618182 41.890909 41.890909v400.290909c0 23.272727-18.618182 41.890909-41.890909 41.890909H228.072727c-23.272727 4.654545-41.890909-13.963636-41.890909-37.236364V367.709091c0-23.272727 18.618182-41.890909 41.890909-41.890909H795.927273m-65.163637-279.272727c-13.963636 0-27.927273 4.654545-37.236363 18.618181l-139.636364 190.836364h-55.854545L283.927273 125.672727c-4.654545-4.654545-13.963636-4.654545-23.272728-4.654545-13.963636 0-27.927273 4.654545-37.236363 18.618182-4.654545 9.309091-4.654545 23.272727-4.654546 37.236363 4.654545 9.309091 9.309091 23.272727 18.618182 27.927273L325.818182 256H228.072727c-60.509091 0-111.709091 51.2-111.709091 111.709091v400.290909c0 60.509091 51.2 111.709091 111.709091 111.709091H791.272727c60.509091 0 111.709091-51.2 111.709091-111.709091V367.709091c0-60.509091-51.2-111.709091-111.709091-111.709091h-130.327272l102.4-139.636364c13.963636-18.618182 9.309091-46.545455-9.309091-60.509091-4.654545-4.654545-13.963636-9.309091-23.272728-9.30909z" fill="#8a8a8a" p-id="4627"></path></svg></button>`); }); }); }]); </script>