论坛 › 欢乐水吧 › ========多曲一行歌词播放器========

亚伦影音工作室 发表于 2025-5-23 17:37

========多曲一行歌词播放器========

本帖最后由 亚伦影音工作室 于 2025-6-8 13:16 编辑 <br /><br /><style type="text/css">
#bj{position: relative;width: 1184px;height: 670px;MARGIN-LEFT:-300px;margin-top:0px;;overflow:hidden;background:url('https://pic1.imgdb.cn/item/681f707d58cb8da5c8eb84b5.jpg')no-repeat center / cover;}
#sp { position: absolute;width: 100%;height: 100%; top:0px; object-fit: cover; pointer-events: none;mix-blend-mode: screen; opacity: 1;}
#mylist {position: absolute; margin-top: 80px;right: 40px;width:300px;height:200px; font: 400 1.5em/2em 楷体; }
#mylist a { text-decoration: none; cursor:pointer;color:#00ff00; }
#mylist a:hover { color:#ccc; }
#geci{ --motion: cover2; --tt: 2s;--state: paused; --bg: #880000; position: absolute;top: 550px; left: 50%;transform: translate(-50%); font:800 40px 'FZYaoti', sans-serif; color: #555; white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#geci::before { position: absolute; content: attr(data-geci); widthccc: 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%; } }
#sj { position: absolute; font: normal 14px sans-serif;color:#fff; bottom: 18px;right: 60px;}
#jd {position: absolute;width: 82%; height:2px;cursor:pointer;bottom: 22px;left:50px;}
#btn{ position:absolute;width:5%;height:5%;bottom: 8px;left:0.4%;border:0px solid #fff;border-radius:50%;cursor:pointer;display:grid;place-items:center;}
#btn::before,#btn::after{position:absolute;content:'';border-style:solid;border-color:#fff;}
#btn::before{width:0;height:0;left:40%;border-width:10px 15px;border-color:transparent transparent transparent #fff;opacity:var(--play);}
#btn::after{width:3px;height:20px;border-width:0 5px 0 5px;opacity:var(--pause);}
#cd{position:absolute;bottom: 12px;right: 20px;width:30px;height:30px;cursor:pointer;background: url('https://pic1.imgdb.cn/item/67600100d0e0a243d4e4d28b.png')no-repeat center/cover
}

#bt{ --w: 80%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:70%;top:1%;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">

<video id="sp" src="https://video-qn.51miz.com/preview/video/00/00/15/08/V-150854-3AE5689D.mp4" autoplay="" loop="" muted=""></video>
<divid="jd"></div>
<span id="sj">00:00 | 00:00</span>
<div id="mylist"></div>

<div id="geci" ></div>

<divid="btn"></div>
<div id="cd"></div>
<div id="bt"><div></div>
<script>
var xmhy = [
["https://s2.cldisk.com/sv-w8/audio/91/c2/c8/a142c6d84637a28db449e2fa62205bc3/audio.mp3","我和时光叙个旧-水儿",`我和时光叙个旧
演唱Singer：水儿
词Lyric：简一@超级星声
曲Composer：储楚@超级星声
制作人Producer：亚伦
词曲统筹：幕青L@超级星声
制作统筹：王娜娜
企划：羊羊
出品：亚伦影音
晃晃悠悠走过
几十个春秋
庸庸碌碌虚度
几十个年头
跌跌撞撞踏进
生活的河流
不知不觉走到
人生分叉口
匆匆忙忙挥霍
青春和自由
走走停停只剩
遗憾心中留
纷纷扰扰岁月
让我白了头
说说笑笑独自
饮下这苦酒
我和时光叙个旧
再和人生醉一宿
夜里梦一场春秋
醒来继续走
我和岁月拉个勾
再和红尘牵个手
多少往事已覆水难收
匆匆忙忙挥霍
青春和自由
走走停停只剩
遗憾心中留
纷纷扰扰岁月
让我白了头
说说笑笑独自
饮下这苦酒
我和时光叙个旧
再和人生醉一宿
夜里梦一场春秋
醒来继续走
我和岁月拉个勾
再和红尘牵个手
多少往事已覆水难收
我和时光叙个旧
再和人生醉一宿
夜里梦一场春秋
醒来继续走
我和岁月拉个勾
再和红尘牵个手
多少往事已覆水难收`],
["https://s2.ananas.chaoxing.com/sv-w9/audio/7a/c9/46/af9206cf7bbf39811244e19c928a942b/audio.mp3","如果我告别-小铃铃",`如果我告别-小铃铃
作词：小米
作曲：甜仔
编曲：迟青松
混音：彭思文
如果我告别
有谁把我等待
你是否理解
你是否能明白
如果我告别
有谁把我等待
你是否理解
你是否会关怀
也许我告别
将不会再回来
你是否理解
你是否真明白
也许我闭眼
将不会再睁开
你是否理解
我不舍的情怀
如果我告别
有谁把我等待
你是否理解
你是否能明白
如果我告别
有谁把我等待
你是否理解
你是否会关怀
也许我告别
将不会再回来
你是否理解
你是否真明白
也许我闭眼
将不会再睁开
你是否理解
我不舍的情怀
也许我告别
将不会再回来
你是否理解
你是否真明白
也许我闭眼
将不会再睁开
你是否理解
我不舍的情怀`],
["https://s2.ananas.chaoxing.com/sv-w8/audio/75/36/22/d2c783fc88063f4cd0e823b4d7514e99/audio.mp3","不愿和你再相遇-肖雨蒙",`不愿和你再相遇
演唱：肖雨蒙
作词：刘子祥
作曲：刘子祥
编混：艺朵朵文化
和声：雪无影
推广：艺朵朵文化
制作人：刘子祥
出品人：刘子祥
OP/SP：艺朵朵文化
昨日的你就这样离去
我落下了伤心的泪滴
那些点点滴滴
都变成了回忆
就像冷风
阵阵刺痛我的心里
为何一切不能再继续
你像云朵随着风散去
如果时间倒流
不愿和你再相遇
我的心已经被你
伤的彻底
真心的付出全被你抛弃
对你的呵护是一场悲剧
面对这一切真的无能为力
从此以后不会把你提起
为何一切不能再继续
你像云朵随着风散去
如果时间倒流
不愿和你再相遇
我的心已经被你
伤的彻底
真心的付出全被你抛弃
对你的呵护是一场悲剧
面对这一切真的无能为力
从此以后不会把你提起
真心的付出全被你抛弃
对你的呵护是一场悲剧
面对这一切真的无能为力
从此以后不会把你提起`]
];
</script>
<script>
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 __Ox10e7f4=["\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","\x73\x72\x63","\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\x73\x6E\x6F\x77\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\x63\x63\x66\x66\x33\x33","\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","\x63\x64","\x76\x69\x73\x69\x62\x6C\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](__Ox10e7f4);var aud=document](__Ox10e7f4);var bt=document](__Ox10e7f4);var id=0;let mKey=0,mSeek=false,mFlag=true;aud](__Ox10e7f4,myFunction);aud](__Ox10e7f4,()=>{return mState()});aud](__Ox10e7f4,()=>{return mState()});for(j= 0;j< xmhy];j++){mlb]+= __Ox10e7f4+ j+ __Ox10e7f4+ j+ __Ox10e7f4+ (j+ 1)+ __Ox10e7f4+ __Ox10e7f4+ xmhy+ __Ox10e7f4};mlb]]= __Ox10e7f4;function loadsound(_0xdeefx9){id= _0xdeefx9;aud]= xmhy;aud]();mlb]]= __Ox10e7f4;bt]= __Ox10e7f4+ xmhy]+ __Ox10e7f4+ __Ox10e7f4+ (id+ 1)+ __Ox10e7f4+ xmhy;nameRed(id);lrcAr= getLrcAr(xmhy);myFunction()}aud]= function(){id++;if(id>= xmhy]){id= 0};aud]= xmhy;aud]();mlb]]= __Ox10e7f4;bt]= __Ox10e7f4+ xmhy]+ __Ox10e7f4+ __Ox10e7f4+ (id+ 1)+ __Ox10e7f4+ xmhy;nameRed(id);lrcAr= getLrcAr(xmhy);myFunction()};aud](__Ox10e7f4,()=>{jd]]= __Ox10e7f4+ aud]/ aud]* 100+ __Ox10e7f4;sj]= toMin(aud])+ __Ox10e7f4+ toMin(aud]);for(j= 0;j< lrcAr];j++){if(aud]>= lrcAr){if(mKey=== j){showLrc(lrcAr)}else {continue}}}});let lrcTime=(_0xdeefxb)=>{let _0xdeefxc=[];for(j= 0;j< _0xdeefxb]- 1;j++){if(j!== _0xdeefxb]- 1){_0xdeefxc= parseFloat((_0xdeefxb- _0xdeefxb)](1))}};let _0xdeefxd=parseInt(_0xdeefxc]((_0xdeefxe,_0xdeefxf)=>{return _0xdeefxe+ _0xdeefxf})/ (_0xdeefxc]- 1));_0xdeefxc](_0xdeefxd);_0xdeefxc]((_0xdeefx10,_0xdeefx11)=>{_0xdeefxb= _0xdeefx10> _0xdeefxd?_0xdeefxd:_0xdeefx10});return _0xdeefxb};getLrcAr= (_0xdeefx12)=>{_0xdeefx12= _0xdeefx12]();let _0xdeefx13=[],_0xdeefx14=[];let _0xdeefx15=/\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;if(!_0xdeefx12](_0xdeefx15)){return};_0xdeefx13= _0xdeefx12](_0xdeefx15,__Ox10e7f4)](__Ox10e7f4);for(k= 0;k< _0xdeefx13];k++){_0xdeefx14= [];for(j= 0;j< 3;j++){let _0xdeefxc=_0xdeefx13](__Ox10e7f4);_0xdeefx14= j=== 0?toSecs(_0xdeefxc):_0xdeefxc}};return lrcTime(_0xdeefx14)};let toSecs=(lrcTime)=>{let _0xdeefx15=/\d{2,}/g;let _0xdeefxb=lrcTime](_0xdeefx15);return _0xdeefxb* 60+ parseInt(_0xdeefxb)+ parseInt((_0xdeefxb)/ 1000)};let showLrc=(_0xdeefx18)=>{let _0xdeefx19=mFlag?__Ox10e7f4:__Ox10e7f4;geci]= lrcAr;geci]]= lrcAr;geci]](__Ox10e7f4,_0xdeefx19);geci]](__Ox10e7f4,_0xdeefx18+ __Ox10e7f4);geci]](__Ox10e7f4,__Ox10e7f4);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 _0xdeefx18=lrcAr- (aud]- lrcAr);showLrc(_0xdeefx18)}jd]= (_0xdeefx1b)=>{aud]= aud]* _0xdeefx1b]/ jd]};function nameRed(){for(k= 0;k< xmhy];k++){let _0xdeefx1d=__Ox10e7f4+ k;document](_0xdeefx1d)]](__Ox10e7f4)};_0xdeefx1d= __Ox10e7f4+ id;document](_0xdeefx1d)]]= __Ox10e7f4}let mState=()=>{return geci]](__Ox10e7f4,aud]?__Ox10e7f4:__Ox10e7f4)};let toMin=(_0xdeefx20)=>{if(!_0xdeefx20){return __Ox10e7f4};_0xdeefx20= Math](_0xdeefx20);let _0xdeefx21=parseInt(_0xdeefx20/ 60),_0xdeefx22=parseFloat(_0xdeefx20% 60);if(_0xdeefx21< 10){_0xdeefx21= __Ox10e7f4+ _0xdeefx21};if(_0xdeefx22< 10){_0xdeefx22= __Ox10e7f4+ _0xdeefx22};return _0xdeefx21+ __Ox10e7f4+ _0xdeefx22};function playing(){aud]?(btn]](__Ox10e7f4,__Ox10e7f4),btn]](__Ox10e7f4,__Ox10e7f4),bt]]= __Ox10e7f4,pic]]= __Ox10e7f4):(btn]](__Ox10e7f4,__Ox10e7f4),btn]](__Ox10e7f4,__Ox10e7f4),bt]]= __Ox10e7f4,pic]]= __Ox10e7f4)}btn]= function(){aud]?aud]():aud]();sp]?sp]():sp]()};aud](__Ox10e7f4,playing,false);aud](__Ox10e7f4,playing,false);var img=document](__Ox10e7f4);img]= function(){mlb]]== __Ox10e7f4?(mlb]]= __Ox10e7f4):(mlb]]= __Ox10e7f4);pic]]== __Ox10e7f4?(pic]]= __Ox10e7f4):(pic]]= __Ox10e7f4)};loadsound(id);lrcAr= getLrcAr(xmhy);myFunction();(function(_0xdeefxf,_0xdeefx25,_0xdeefx26,_0xdeefx27,_0xdeefx28,_0xdeefx29){_0xdeefx29= __Ox10e7f4;_0xdeefx27= function(_0xdeefx2a){if( typeof alert!== _0xdeefx29){alert(_0xdeefx2a)};if( typeof console!== _0xdeefx29){console](_0xdeefx2a)}};_0xdeefx26= function(_0xdeefxe,_0xdeefxf){return _0xdeefxe+ _0xdeefxf};_0xdeefx28= _0xdeefx26(__Ox10e7f4,_0xdeefx26(_0xdeefx26(__Ox10e7f4,__Ox10e7f4),__Ox10e7f4));try{_0xdeefxf= __encode;if(!( typeof _0xdeefxf!== _0xdeefx29&& _0xdeefxf=== _0xdeefx26(__Ox10e7f4,__Ox10e7f4))){_0xdeefx27(_0xdeefx28)}}catch(e){_0xdeefx27(_0xdeefx28)}})({})
</script>

红影 发表于 2025-5-23 18:16

好漂亮的多歌曲播放器。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2025-5-23 18:29

漂亮！欣赏、学习亚伦老师美帖{:4_191:}

梦油 发表于 2025-5-23 20:53

欣赏佳作，问候亚伦。

红影 发表于 2025-5-23 23:43

这个点击列表按钮，可以显示歌曲列表呢。新的多歌曲切换方式{:4_199:}

老谟深虑 发表于 2025-5-24 15:01

         欣赏老师的佳作，点赞！

小辣椒 发表于 2025-5-26 22:13

亚纶这个列表按钮放下面好，不会点击被遮挡了

小辣椒 发表于 2025-5-26 22:14

小辣椒暂时做不了，先收藏代码，感谢亚纶{:4_205:}

查看完整版本: ========多曲一行歌词播放器========