论坛 › 欢乐水吧 › 完美列表播放器【初级版】

亚伦影音工作室 发表于 2024-7-21 18:17

完美列表播放器【初级版】

本帖最后由 亚伦影音工作室 于 2025-5-26 21:32 编辑 <br /><br /><style type="text/css">
#bj{position: relative;width: 1164px;height: 620px;MARGIN-LEFT:-300px;margin-top:0px;;overflow:hidden;background:url('https://pic.imgdb.cn/item/6673de2bd9c307b7e99a01fe.webp')no-repeat center / cover;--opt: .2;}
#bj::before { position: absolute; content: ''; background: url('https://pic.imgdb.cn/item/642a50c2a682492fccd831a0.gif') repeat; width:100%; height: 100%; mix-blend-mode: screen; opacity: var(--opt); animation: opa linear 20s infinite alternate; }
#img1 {position: absolute; width:100%; height: 100%;left: 0px; margin-top: 0px;
background:url('https://pic.imgdb.cn/item/6673e268d9c307b7e9a33d06.webp') no-repeat center / cover;}
#mylist {position: absolute; top: 15%;left:75%;width:500px;height:500px; font-size:18px; column-count: 1; }
#mylist a { text-decoration: none; cursor:pointer; }
#mylist a:hover { color:blue; }
#geci{ --motion: cover2; --tt: 2s;--state: paused;--bg: linear-gradient(180deg, #880000, #880000); position: absolute;top: 80%; left: 50%;transform: translate(-50%); font:normal 3em 华文隶书;color: #000078; white-space: pre;-webkit-background-clip: text; filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);}
#geci::before { position: absolute; content: attr(data-geci); width: 20%;height: 100%; color: transparent;overflow: hidden;white-space: pre; background: var(--bg);
-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
#mylrc{width:80%;line-height:40px;margin:480px auto;padding:0px;position:absolute;margin-left:10%;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);}
#mylrc span{display:block;overflow:hidden;color:#000078;font-size:1cm;font-family:华文隶书}
#wzsd1 { animation: wzsd 1.86s linear infinite ; }
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#bfq{position: absolute;
width: 400px;
height: 400px;top:50px; left:40px;z-index: 60;overflow: hidden;transform:translate(0%,0%)scale(.8);}

#vinyl{position: absolute;
        left:30px;
        bottom: 50px;
       animation: spin 8slinear infinite;
        display:flex;
        align-items:center;
        justify-content:center;
        width:250px;
        height:250px;
        border-radius:100%;transition: .5s;box-shadow: 0px 0px 0px 4px #000, 0px 0px 10px 6px #fff;animation: spin 8slinear infinite;
        background:linear-gradient(-45deg,#333,black,#aaa, black,#333);
cursor: pointer;
}
#vinyl:before,#vinyl:after{
        content:'';
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:repeating-radial-gradient(circle at center,#222 4px,transparent 8px);
        border-radius:50%;
}

#pic{width:120px;
        height:120px;
        border-radius:100%;
        z-index:1;box-shadow: 0px 0px 0px 2px #ccc, 0px 0px 0px 2px #ccc;background:url()no-repeat 0px 0px/cover;
cursor:pointer;}
@keyframes spin {to { transform: rotate(1turn); }}

#pic:before{
        content:'';
        position:absolute;
        width:12px;
        height:12px;
        border-radius:100%;
        background-color: #fff;
        margin:auto;
        display:block;
        top:0;left:0;right:0;bottom:0;
}
#mplayer {position: absolute;
         top:0px; left:165px;z-index: 21;background: url('https://pic.imgdb.cn/item/6688e0dad9c307b7e9a7a3e1.png')no-repeat center/160px 320px;
      width: 160px;
      height: 320px;
      cursor: pointer;
}
.pink { transform:rotate(0deg);transform-origin: 85% 0%;}
.purple { transform-origin: 85% 0%;margin: 0px -20px;transform:rotate(-20deg);}

#cd{position:absolute;bottom:12px;left:86%;width:30px;height:30px;cursor:pointer;background: url('https://pic1.imgdb.cn/item/67600100d0e0a243d4e4d28b.png')no-repeat center/cover}

#sj { position: absolute; font: normal 16px sans-serif;color:#fff; bottom:20px;left:90%;}
#jd {position: absolute;width: 68%; height:2px;cursor:pointer;bottom:25px;left:16%;}
#btn{ position:absolute;width:40px;height:40px;bottom: 10px;left:6%;}
#btn::before,#btn::after{position:absolute;width:40px;height:40px;content:'';background: url('https://pic.imgdb.cn/item/6664693a5e6d1bfa05bcf7d3.png')no-repeat center/cover;}
#btn::before{width:40px;height:40px;background: url('https://pic.imgdb.cn/item/666469465e6d1bfa05bd07ea.png')no-repeat center/cover;opacity:var(--play);}
#btn::after{width:40px;height:40px;opacity:var(--pause);}
#xq{position:absolute;bottom: 15px;left:11%;width:30px;height:30px;cursor:pointer;background: url('https://pic.imgdb.cn/item/669cd521d9c307b7e997da40.png')no-repeat center/cover
}
#xq:hover { background: url('https://pic.imgdb.cn/item/669cd521d9c307b7e997da40.png')no-repeat center/cover}
#sq{position:absolute;bottom:15px;left:2%;width:30px;height:30px;cursor:pointer;background: url('https://pic.imgdb.cn/item/669cd521d9c307b7e997d9f9.png')no-repeat center/cover}
#sq:hover { background: url('https://pic.imgdb.cn/item/669cd521d9c307b7e997d9f9.png')no-repeat center/cover }

</style>
<style>
#bt{ --w: 76%; width: var(--w); overflow: hidden; color: #00ffff; position: absolute; left:62%;top:2%;font-size: 18px;}
#bt { word-break: keep-all; white-space: nowrap; animation: bt 26s linear infinite; background:#0000}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>
<divid="bj">
<divid="img1"></div>
<divid="jd"></div>
<span id="sj">00:00 | 00:00</span>
<div id="mylist"></div>
<div id="geci"></div>
<div id="bfq">
<div id="vinyl" title="暂停/播放">
        <div id="pic"></div>
</div>
<div id="mplayer" class="pink"title="暂停/播放" ></div>
</div>
<div id="mylrc">
<div id="wzsd1"> <span id="geci1" style="color:#ff00ff;text-align:left; "></span></div> <span id="geci2"style="text-align:right "></span></div>
<divid="btn"title="播放/暂停"></div>
<div id="xq"title="下曲"></div>
<div id="sq"title="上曲"></div>
<div id="cd"title="菜单"></div>
<div id="bt"><div>
</div>
<script>
var xmhy = [
["https://s2.ananas.chaoxing.com/sv-w7/audio/ed/13/85/a16a3bdb425f0b67d16af19bceede76e/audio.mp3","苏谭谭-烈酒狂沙(DJ默涵版)","https://img4.kuwo.cn/star/starheads/120/s3s35/54/2316071826.jpg",`苏谭谭-烈酒狂沙(DJ默涵版)
作词：崔伟立
作曲：崔伟立
让我别在爱与痛的边缘
不停的挣扎
让我喝下那最烈的酒吧
让我把这段情放下
让我从此一人
流浪在天涯
窗外大风不停的刮
脸上大雨不停的下
墙上那时钟在嘀嗒
忘了吧无情的人呐
弹起那断弦的吉他
唱歌到喉咙都沙哑
踩碎那枯萎的情花
再一杯今夜不回家
让我喝下那最烈的酒啊
让我別一再的想他
让我别在爱与痛的边缘
不停的挣扎
让我喝下那最烈的酒吧
让我把这段情放下
让我从此一人
流浪在天涯
窗外大风不停的刮
脸上大雨不停的下
墙上那时钟在嘀嗒
忘了吧无情的人呐
弹起那断弦的吉他
唱歌到喉咙都沙哑
踩碎那枯萎的情花
再一杯今夜不回家
让我喝下那最烈的酒啊
让我別一再的想他
让我别在爱与痛的边缘
不停的挣扎
让我喝下那最烈的酒吧
让我把这段情放下
让我从此一人
流浪在天涯
让我喝下那最烈的酒啊
让我別一再的想他
让我别在爱与痛的边缘
不停的挣扎
让我喝下那最烈的酒吧
让我把这段情放下
让我从此一人
流浪在天涯`],
["https://s2.ananas.chaoxing.com/sv-w9/audio/16/c4/af/92bb795d47a2b72e5b66f60f97913cac/audio.mp3","战马(DJ 九零版)-崔伟立","https://pic.imgdb.cn/item/6608fdcf9f345e8d039be6cd.jpg",`战马(DJ 九零版)-崔伟立
作词Lyricist：崔伟立
作曲Composer：崔伟立
制作人Producer：唐欣宇
宣发Promotion and distribution：廖文婷| 丁希莹| 黄嘉诺
统筹Coordinator：张丹娴
出品人Creator：胡伟
OP/SP：深圳启韵文化传媒有限公司
炙热的太阳下
挥汗如雨的脸颊
熬过了冬和夏
阳光刺破这云霞
漫漫的长夜啊
多少等待和挣扎
梦中的黑骏马
向千里之外出发
马蹄哒哒哒
黄河水哗啦啦
要努力生根要发芽
让梦想开出最美的花
听大风不停刮
任大雨不停下
阻挡不了我的步伐
要踏遍人间海角天涯
炙热的太阳下
挥汗如雨的脸颊
熬过了冬和夏
阳光刺破这云霞
漫漫的长夜啊
多少等待和挣扎
梦中的黑骏马
向千里之外出发
马蹄哒哒哒
黄河水哗啦啦
要努力生根要发芽
让梦想开出最美的花
听大风不停刮
任大雨不停下
阻挡不了我的步伐
要踏遍人间海角天涯
曾经的那个懵懂小孩他已经长大
也可以勇敢的面对这世界的复杂
不装聋作哑不沉默扮傻
用豪情万丈的初心化作千军万马
这岁月无情的染白那少年的头发
这时光像一个盗贼爬上我的脸颊
看江山如画要擦亮盔甲
要看遍这美丽世界所有繁华
哈哦
喔喔
哈哦
喔喔
马蹄哒哒哒
黄河水哗啦啦
要努力生根要发芽
让梦想开出最美的花
听大风不停刮
任大雨不停下
阻挡不了我的步伐
要踏遍人间海角天涯
要踏遍人间海角天涯`],
["https://s2.ananas.chaoxing.com/sv-w9/audio/8d/bd/2b/469f87fed5a0bc1a2816905294741577/audio.mp3","遇见爱 - 陶钰玉","https://pic.imgdb.cn/item/66726ee1d9c307b7e91dcaa9.webp",`遇见爱 - 陶钰玉
作词：玉镯儿
作曲：余恒锋
小小的一阵风吹过小山丘
吹散孤单和忧愁
时光中等候人海里漂流
来到缘分的路口
小小的一条河唱着小情歌
星星落在我眼眸
最好的青春和最好的你
是最幸运的拥有
嗨遇见爱遇见爱情的时候
轻轻牵起你的手
天涯或海角路程再遥远
我会陪在你左右
嗨遇见爱遇见爱情的时候
紧紧牵着你的手
把风景看透把爱酿成酒
走到时间的尽头
小小的一条河唱着小情歌
星星落在我眼眸
最好的青春和最好的你
是最幸运的拥有
嗨遇见爱遇见爱情的时候
轻轻牵起你的手
天涯或海角路程再遥远
我会陪在你左右
嗨遇见爱遇见爱情的时候
紧紧牵着你的手
把风景看透把爱酿成酒
走到时间的尽头
嗨遇见爱遇见爱情的时候
轻轻牵起你的手
天涯或海角路程再遥远
我会陪在你左右
嗨遇见爱遇见爱情的时候
紧紧牵着你的手
把风景看透把爱酿成酒
走到时间的尽头`],
];
var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox11b04f=["\x6D\x79\x6C\x69\x73\x74","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x61\x75\x64\x69\x6F","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x62\x74","\x73\x65\x65\x6B\x65\x64","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x70\x61\x75\x73\x65","\x70\x6C\x61\x79","\x6C\x65\x6E\x67\x74\x68","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x3C\x61\x20\x69\x64\x3D\x27\x6C\x69\x73\x74","\x27\x20\x6F\x6E\x63\x6C\x69\x63\x6B\x3D\x27\x6C\x6F\x61\x64\x73\x6F\x75\x6E\x64\x28","\x29\x27\x20\x3E","\x2E","\x20\x20\x20\x20","\x3C\x2F\x61\x3E\x3C\x62\x72\x20\x2F\x3E","\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79","\x73\x74\x79\x6C\x65","\x68\x69\x64\x64\x65\x6E","\x76\x69\x73\x69\x62\x6C\x65","\x73\x72\x63","\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x49\x6D\x61\x67\x65","\x75\x72\x6C\x28","\x29","\u6B63\u5728\u64AD\u653E\uFF1A","\u9996","\x2F","\x6F\x6E\x65\x6E\x64\x65\x64","\x74\x69\x6D\x65\x75\x70\x64\x61\x74\x65","\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64","\x6C\x69\x6E\x65\x61\x72\x2D\x67\x72\x61\x64\x69\x65\x6E\x74\x28\x39\x30\x64\x65\x67\x2C\x20\x72\x67\x62\x28\x32\x35\x35\x2C\x20\x30\x2C\x20\x30\x29","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x64\x75\x72\x61\x74\x69\x6F\x6E","\x25\x2C\x20\x42\x6C\x61\x63\x6B\x20\x20\x30\x29","\x69\x6E\x6E\x65\x72\x54\x65\x78\x74","\x20\x7C\x20","","\x74\x6F\x46\x69\x78\x65\x64","\x72\x65\x64\x75\x63\x65","\x70\x75\x73\x68","\x66\x6F\x72\x45\x61\x63\x68","\x74\x72\x69\x6D","\x6D\x61\x74\x63\x68","\x0A","\x73\x70\x6C\x69\x74","\x24\x31\x2D\x7B\x7D\x2D\x24\x32","\x72\x65\x70\x6C\x61\x63\x65","\x2D\x7B\x7D\x2D","\x63\x6F\x76\x65\x72\x31","\x63\x6F\x76\x65\x72\x32","\x67\x65\x63\x69","\x64\x61\x74\x61\x73\x65\x74","\x2D\x2D\x6D\x6F\x74\x69\x6F\x6E","\x73\x65\x74\x50\x72\x6F\x70\x65\x72\x74\x79","\x2D\x2D\x74\x74","\x73","\x2D\x2D\x73\x74\x61\x74\x65","\x72\x75\x6E\x6E\x69\x6E\x67","\x6F\x6E\x63\x6C\x69\x63\x6B","\x6F\x66\x66\x73\x65\x74\x58","\x6F\x66\x66\x73\x65\x74\x57\x69\x64\x74\x68","\x6C\x69\x73\x74","\x63\x6F\x6C\x6F\x72","\x72\x65\x6D\x6F\x76\x65\x50\x72\x6F\x70\x65\x72\x74\x79","\x23\x66\x66\x66","\x70\x61\x75\x73\x65\x64","\x30\x30\x3A\x30\x30","\x66\x6C\x6F\x6F\x72","\x30","\x3A","\x2D\x2D\x70\x6C\x61\x79","\x74\x72\x75\x65","\x2D\x2D\x70\x61\x75\x73\x65","\x61\x6E\x69\x6D\x61\x74\x69\x6F\x6E\x50\x6C\x61\x79\x53\x74\x61\x74\x65","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];var mlb=document](__Ox11b04f);var aud=document](__Ox11b04f);var bt=document](__Ox11b04f);var id=0;let mKey=0,mSeek=false,mFlag=true;aud](__Ox11b04f,myFunction);aud](__Ox11b04f,()=>{return mState()});aud](__Ox11b04f,()=>{return mState()});for(j= 0;j< xmhy];j++){mlb]+= __Ox11b04f+ j+ __Ox11b04f+ j+ __Ox11b04f+ (j+ 1)+ __Ox11b04f+ __Ox11b04f+ xmhy+ __Ox11b04f};mlb]]= __Ox11b04f;img1]]= __Ox11b04f;mylrc]]= __Ox11b04f;geci]]= __Ox11b04f;function loadsound(_0xcec4x9){id= _0xcec4x9;aud]= xmhy;aud]();mlb]]= __Ox11b04f;img1]]= __Ox11b04f;geci]]= __Ox11b04f;mylrc]]= __Ox11b04f;pic]]= __Ox11b04f;pic]]= __Ox11b04f+ xmhy+ __Ox11b04f;bt]= __Ox11b04f+ xmhy]+ __Ox11b04f+ __Ox11b04f+ (id+ 1)+ __Ox11b04f+ xmhy;nameRed(id);lrcAr= getLrcAr(xmhy);myFunction()}aud]= function(){id++;if(id>= xmhy]){id= 0};aud]= xmhy;aud]();mlb]]= __Ox11b04f;img1]]= __Ox11b04f;geci]]= __Ox11b04f;mylrc]]= __Ox11b04f;pic]]= __Ox11b04f;pic]]= __Ox11b04f+ xmhy+ __Ox11b04f;bt]= __Ox11b04f+ xmhy]+ __Ox11b04f+ __Ox11b04f+ (id+ 1)+ __Ox11b04f+ xmhy;nameRed(id);lrcAr= getLrcAr(xmhy);myFunction()};aud](__Ox11b04f,()=>{jd]]= __Ox11b04f+ aud]/ aud]* 100+ __Ox11b04f;sj]= toMin(aud])+ __Ox11b04f+ toMin(aud]);for(j= 0;j< lrcAr];j++){if(aud]>= lrcAr){geci1]= lrcAr;if(j+ 1== lrcAr]){geci2]= __Ox11b04f}else {geci2]= lrcAr;if(mKey=== j){showLrc(lrcAr)}else {continue}}}}});let lrcTime=(_0xcec4xb)=>{let _0xcec4xc=[];for(j= 0;j< _0xcec4xb]- 1;j++){if(j!== _0xcec4xb]- 1){_0xcec4xc= parseFloat((_0xcec4xb- _0xcec4xb)](1))}};let _0xcec4xd=parseInt(_0xcec4xc]((_0xcec4xe,_0xcec4xf)=>{return _0xcec4xe+ _0xcec4xf})/ (_0xcec4xc]- 1));_0xcec4xc](_0xcec4xd);_0xcec4xc]((_0xcec4x10,_0xcec4x11)=>{_0xcec4xb= _0xcec4x10> _0xcec4xd?_0xcec4xd:_0xcec4x10});return _0xcec4xb};getLrcAr= (_0xcec4x12)=>{_0xcec4x12= _0xcec4x12]();let _0xcec4x13=[],_0xcec4x14=[];let _0xcec4x15=/\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;if(!_0xcec4x12](_0xcec4x15)){return};_0xcec4x13= _0xcec4x12](_0xcec4x15,__Ox11b04f)](__Ox11b04f);for(k= 0;k< _0xcec4x13];k++){_0xcec4x14= [];for(j= 0;j< 3;j++){let _0xcec4xc=_0xcec4x13](__Ox11b04f);_0xcec4x14= j=== 0?toSecs(_0xcec4xc):_0xcec4xc}};return lrcTime(_0xcec4x14)};let toSecs=(lrcTime)=>{let _0xcec4x15=/\d{2,}/g;let _0xcec4xb=lrcTime](_0xcec4x15);return _0xcec4xb* 60+ parseInt(_0xcec4xb)+ parseInt((_0xcec4xb)/ 1000)};let showLrc=(_0xcec4x18)=>{let _0xcec4x19=mFlag?__Ox11b04f:__Ox11b04f;geci]= lrcAr;geci]]= lrcAr;geci]](__Ox11b04f,_0xcec4x19);geci]](__Ox11b04f,_0xcec4x18+ __Ox11b04f);geci]](__Ox11b04f,__Ox11b04f);mKey+= 1;mFlag=!mFlag};function myFunction(){for(j= 0;j< lrcAr];j++){if(aud]<= lrcAr){mKey= j- 1;break}};if(mKey< 0){mKey= 0};if(mKey> lrcAr]- 1){mKey= lrcAr]- 1};let _0xcec4x18=lrcAr- (aud]- lrcAr);showLrc(_0xcec4x18)}jd]= (_0xcec4x1b)=>{aud]= aud]* _0xcec4x1b]/ jd]};function nameRed(){for(k= 0;k< xmhy];k++){let _0xcec4x1d=__Ox11b04f+ k;document](_0xcec4x1d)]](__Ox11b04f)};_0xcec4x1d= __Ox11b04f+ id;document](_0xcec4x1d)]]= __Ox11b04f}let mState=()=>{return geci]](__Ox11b04f,aud]?__Ox11b04f:__Ox11b04f)};let toMin=(_0xcec4x20)=>{if(!_0xcec4x20){return __Ox11b04f};_0xcec4x20= Math](_0xcec4x20);let _0xcec4x21=parseInt(_0xcec4x20/ 60),_0xcec4x22=parseFloat(_0xcec4x20% 60);if(_0xcec4x21< 10){_0xcec4x21= __Ox11b04f+ _0xcec4x21};if(_0xcec4x22< 10){_0xcec4x22= __Ox11b04f+ _0xcec4x22};return _0xcec4x21+ __Ox11b04f+ _0xcec4x22};function playing(){aud]?(btn]](__Ox11b04f,__Ox11b04f),btn]](__Ox11b04f,__Ox11b04f),bt]]= __Ox11b04f):(btn]](__Ox11b04f,__Ox11b04f),btn]](__Ox11b04f,__Ox11b04f),bt]]= __Ox11b04f)}btn]= function(){aud]?aud]():aud]()};pic]= function(){aud]?aud]():aud]()};aud](__Ox11b04f,playing,false);aud](__Ox11b04f,playing,false);xq]= function(){id= id== xmhy]- 1?(0):(id+ 1);loadsound(id)};sq]= function(){id= id== 0?(xmhy]- 1):(id- 1);loadsound(id)};cd]= function(){mlb]]== __Ox11b04f?(mlb]]= __Ox11b04f):(mlb]]= __Ox11b04f);img1]]== __Ox11b04f?(img1]]= __Ox11b04f):(img1]]= __Ox11b04f);geci]]== __Ox11b04f?(geci]]= __Ox11b04f):(geci]]= __Ox11b04f);pic]]== __Ox11b04f?(pic]]= __Ox11b04f):(pic]]= __Ox11b04f);mylrc]]== __Ox11b04f?(mylrc]]= __Ox11b04f):(mylrc]]= __Ox11b04f)};loadsound(id);lrcAr= getLrcAr(xmhy);myFunction();(function(_0xcec4xf,_0xcec4x24,_0xcec4x25,_0xcec4x26,_0xcec4x27,_0xcec4x28){_0xcec4x28= __Ox11b04f;_0xcec4x26= function(_0xcec4x29){if( typeof alert!== _0xcec4x28){alert(_0xcec4x29)};if( typeof console!== _0xcec4x28){console](_0xcec4x29)}};_0xcec4x25= function(_0xcec4xe,_0xcec4xf){return _0xcec4xe+ _0xcec4xf};_0xcec4x27= _0xcec4x25(__Ox11b04f,_0xcec4x25(_0xcec4x25(__Ox11b04f,__Ox11b04f),__Ox11b04f));try{_0xcec4xf= __encode;if(!( typeof _0xcec4xf!== _0xcec4x28&& _0xcec4xf=== _0xcec4x25(__Ox11b04f,__Ox11b04f))){_0xcec4x26(_0xcec4x27)}}catch(e){_0xcec4x26(_0xcec4x27)}})({})

vinyl.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>vinyl.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>vinyl.style.animationPlayState = 'paused');



wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>wzsd1.style.animationPlayState = 'paused');

vinyl.addEventListener('click', () =>aud.paused ? (aud.play(),mplayer.classList.remove('purple')) : (aud.pause(),mplayer.classList.add('purple')));
pic.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple')) : (aud.pause(),mplayer.classList.add('purple')));
mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple')) : (aud.pause(),mplayer.classList.add('purple')));

btn.addEventListener('click', () => aud.paused ? mplayer.classList.add('purple'):mplayer.classList.remove('purple') );
aud.addEventListener('timeupdate', () => {jd.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';});

</script>

小辣椒 发表于 2024-7-21 19:42

亚伦这个播放器按钮运用已经很完美了，还是初级版的{:4_178:}

小辣椒 发表于 2024-7-21 19:43

欣赏亚伦的精彩制作{:4_199:}

梦油 发表于 2024-7-21 20:28

欣赏佳作，问候亚伦。

红影 发表于 2024-7-21 21:51

这个制作漂亮，点击列表按钮，不但可以看到列表，图片也变化了呢。{:4_199:}

红影 发表于 2024-7-21 21:53

左右键也可以切换歌曲，歌词同步也漂亮。欣赏亚伦老师好帖{:4_187:}

竹溪 发表于 2024-7-22 09:35

插片播放器点了可以指针移动。欣赏老师佳作{:4_204:}

老谟深虑 发表于 2024-7-22 09:58

         欣赏老师的精美制作，点赞！

亚伦影音工作室 发表于 2024-7-22 14:12

本帖最后由 亚伦影音工作室 于 2024-7-22 20:24 编辑

https://pic.imgdb.cn/item/669df7c3d9c307b7e99b8b16.gif

辫子哥哥 发表于 2024-7-22 20:12

{:4_171:}
这歌好听

查看完整版本: 完美列表播放器【初级版】