论坛 › 音乐沙龙 › 还是想你 同玩岁月功放播放器

小辣椒 发表于 2026-3-20 20:38

还是想你 同玩岁月功放播放器

<style>
    #papa { position: relative; width: 1395px; height: 765px; background: #000 url('https://wj.zp68.com/lxx/yunhua/2026/03/17/6F.jpg');
   box-shadow: 2px 2px 6px #000; z-index: 1; margin: 140px 0 48px calc(50% - 781px);overflow:hidden; border-radius:32px;}
    #Player { position: absolute; cursor: pointer; transition: 1.2s; animation: rot 8s linear infinite var(--state); z-index:10;}
    #Player:nth-of-type(1) { width:130px; height: 130px; left: 70.7%;; top: 58%;--deg: 1turn; }
    #Player:hover { filter: hue-rotate(60deg) drop-shadow(0 0 28px #1b28d3); --state: paused; }
    @keyframes rot { to { transform: rotate(var(--deg)); } }
      .dancer      { position: absolute; cursor: pointer;z-index:1;}
      .lrcShow{font:normal 28px sans-serif;position:absolute;bottom: 10%; left:36%;color:transparent;filter:drop-shadow(1px 2px 1px Lavender;);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;z-index:999;}
      .lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;color:Lavender;background-image:linear-gradient(60deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,90%));-webkit-background-clip:text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
      @keyframes bgMove1{from{width:0;}to{width:100%;}}
      @keyframes bgMove0{from{width:0;}to{width:100%;}}      
</style>
<div id="papa">
    <img id="Player" src="https://wj.zp68.com/lxx/yunhua/2026/03/17/ann.png" alt="">   
    <img class="dancer" src="https://wj.zp68.com/lxx/yunhua/2026/03/17/6F.gif" alt="" style="left: 0px; top: 0px; width:99.9%;">
   
   <img class="dancer" src="https://wj.zp68.com/lxx/yunhua/2024/06/26/xing.jpg" alt="" style="left: 450px; top: 380px;" />
    <img class="dancer" src="https://wj.zp68.com/lxx/yunhua/2026/03/17/bt.png" alt="" style="left: 625px; top: 120px;" />
      
      <div class="lrcShow" data-lrc="还是想你">还是想你</div>
</div>
<script>
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('6(\'d\'n c.a(\'2\')){j.l.q=b(){6(1.7){1.7.h.p(1.7);1.7=o;1.3.i=\'\'}6(1.9){1.8=1.9}};j.l.m=b(){g 2=c.a(\'2\');g 4=1.4,5=1.5;6(4&5){6(!1.9){1.9=1.8}2.4=4;2.5=5;2.3.k=1.3.k;2.3.f=1.3.f;2.d(\'z\').y(1,0,0,4,5);x{1.8=2.A("B/t")}s(e){1.r(\'8\');2.3.w=\'v\';1.h.u(2,1);1.3.i=\'0\';1.7=2}}}}',38,38,'|this|canvas|style|width|height|if|storeCanvas|src|storeUrl|createElement|function|document|getContext||top|var|parentElement|opacity|HTMLImageElement|left|prototype|stop|in|null|removeChild|play|removeAttribute|catch|gif|insertBefore|absolute|position|try|drawImage|2d|toDataURL|image'.split('|'),0,{}))
//-----------------------------------------------------------------
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('t y=7(){w 4.T.1d(4,1f)};y.1r={1i:y,T:7(C){x=C.A.J(/(^\\s*)|(\\s*$)/g,\'\');4.8=O.1k(\'.1l\');4.e=4.Q(x);4.P(C.1g)},Q:7(x){t p=x.J(/(^\\s*)|(\\s*$)/g,"").V(/\\r|\\n|\\r\\n/);t 9=1p 1q();F(M l=0;l<p.j;l++){M v=p.1m(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);i(v){H=p.1n(\']\');i(H>0)A=p.U(H+1);F(m=0;m<v.j;m++){L=v.U(1).J(\']\',\'\').V(/:/);B=(+L)*1e+(+L);i(9.j==0&&B!=0){9.S({f:0,G:\'\\1a\\R\\R\\1K\\1L\\1J\\1F\'})}9.S({f:+B.D(2),G:A})}}}9.1H(7(a,b){w(a.f-b.f)});F(k=0;k<9.j-1;k++){9.K=+(9.f-9.f).D(2)}10.Z(9);w 9},X:7(E){4.8.1G=4.8.1M.1v=4.e.G;4.8.o.u(\'--1w\',\'1x\'+(4.c%2));4.8.o.u(\'--E\',E+\'s\');4.8.o.u(\'--I\',\'11\');4.c++},P:7(N){4.6=O.1u("12");4.6.1y=z;4.6.1C=z;4.6.1D=1E;4.6.1z=N;4.8.1B(4.6);t 5=4;t 1b=0;4.c=0;4.6.h(\'1A\',7(){5.c=0;4.q()});4.6.h(\'1t\',7(){5.e.K=+(4.1s-5.e.f).D(2);});4.6.h(\'q\',7(){5.8.o.u(\'--I\',\'11\')});4.6.h(\'13\',7(){i(5.c==1&&4.W<1){5.6.q();w z}5.8.o.u(\'--I\',\'Y\')});4.6.h(\'1I\',7(){10.Z("12 1c, 19 q 15 14");5.8.o.17=\'16\';5.8.18(4)});4.6.h(\'1o\',7(){i(5.c<5.e.j){i(4.W>=5.e.f){5.X(5.e.K)}}});4.8.h(\'1h\',7(){i(5.6.Y){5.6.q()}1j{5.6.13()}})}}',62,111,'||||this|that|mObj|function|lrcShowObj|lrcs|||idx||lrcVec|seconds||addEventListener|if|length||index|||style|parts|play|||var|setProperty|chkTime|return|lyricTxt|lrcPlayerY|false|lrcTxt|_0|opts|toFixed|durTime|for|words|tIdx|aniPlayState|replace|dur|ta|let|mUrl|document|genPlayer|handleLrc|u0020|push|init|substr|split|currentTime|showLrc|paused|log|console|running|audio|pause|event|start|none|display|removeChild|remove|u00A9|turn|wrong|apply|60|arguments|audioURL|click|constructor|else|querySelector|lrcShow|match|lastIndexOf|timeupdate|new|Array|prototype|duration|canplay|createElement|lrc|aniName|bgMove|loop|src|ended|appendChild|muted|autoplay|true|u8f7b|innerHTML|sort|error|u5e74|u4e5f|u66fe|dataset'.split('|'),0,{}))

let lrctxt = `
记忆中的过去 是冰冷的夏季
人们拥有着阳光 我却淋着雨
与你同在的时候 寂寞离我好远
当你走开我的身边 终夜难眠
我想你眼中一丝丝的眷恋
我想你漫不经心的模样
我能坚持什么
我想你的一切
正满载我心扉
别人都会提起
问你到哪里去
装出快乐的表情
说你好好的
人们只看到欢颜
看不透我的心
拿开冷漠的面具后
还是想你
我想你眼中一丝丝的眷恋
我想你漫不经心的模样
我能坚持什么
我想你的一切
正满载我心扉
                              
我想你眼中一丝丝的眷恋
我想你漫不经心的模样
我能说些什么
我想你的一切
正满载我心扉

         
`;                  
      let opts = {
                lrcTxt:lrctxt,
               
                audioURL:"https://wj.zp68.com/lxx/yunhua/2026/03/17/hsxn.mp3"
      }
      let yP = new lrcPlayerY(opts);
//-----------------------------------------------------------------------------------------------------//
      var dancers = document.querySelectorAll('.dancer');
    var mState = () => {
      papa.style.setProperty('--state', yP.mObj.paused ? 'paused' : 'running');
      Player.title = yP.mObj.paused ? '播放' : '暂停';
                dancers.forEach(dancer => yP.mObj.paused ? dancer.stop() : dancer.play());
    };
      Player.onclick = () => {
                yP.mObj.paused ? (yP.mObj.play()) :
                                                      (yP.mObj.pause());
      }
    yP.mObj.onplaying = yP.mObj.onpause = () => mState();
   
</script>

小辣椒 发表于 2026-3-20 20:41

@走过岁月

岁月这个播放器我是花了一点时间的，主要你原来的功放播放器下面角周围有线痕迹，我整个播放器高度减低了一点，整体感觉外貌还是一致的

还是想你
https://www.huachaowang.com/foru ... =91576&fromuid=4275
(出处: 花潮论坛)

小辣椒 发表于 2026-3-20 20:45

好久没有玩这种类型的播放器了，也是重新拾起来。。。。

小辣椒 发表于 2026-3-20 20:46

歌曲我还是把前面的7秒空的音乐裁剪了，歌词重新做了一个

梦油 发表于 2026-3-20 21:10

欣赏美曲，问候小辣椒。

也曾年轻 发表于 2026-3-20 22:14

https://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20191204/1c436fe6d75241d08db64afed8fb7904.gif

走过岁月 发表于 2026-3-20 22:16

小辣椒 发表于 2026-3-20 20:41
@走过岁月

岁月这个播放器我是花了一点时间的，主要你原来的功放播放器下面角周围有线痕迹，我整个播放 ...

欣赏来了

红影 发表于 2026-3-20 22:16

这么多音效频谱，还有高中低音的显示，这个制作真漂亮。
欣赏亲爱的好帖{:4_199:}

走过岁月 发表于 2026-3-20 22:17

制作不错，两边还加了音频滑块

走过岁月 发表于 2026-3-20 22:19

这个开关按钮设计在音量这里还好

走过岁月 发表于 2026-3-20 22:21

再加个频谱来盖住原来的时间，小辣椒有想法，点赞

走过岁月 发表于 2026-3-20 22:22

表扬一下小辣椒{:5_116:}

雨季工作室 发表于 2026-3-21 10:18

制作漂亮，欣赏了！

亦是金 发表于 2026-3-21 10:28

聆听美曲，欣赏美帖！喜欢并点赞学习了！{:4_187:}

无名 发表于 2026-3-21 11:19

漂亮{:4_204:}

小辣椒 发表于 2026-3-23 19:48

梦油 发表于 2026-3-20 21:10
欣赏美曲，问候小辣椒。

问好梦油，谢谢欣赏和支持{:4_187:}

小辣椒 发表于 2026-3-23 19:48

也曾年轻 发表于 2026-3-20 22:14


问好老师，谢谢欣赏{:4_187:}

小辣椒 发表于 2026-3-23 19:48

走过岁月 发表于 2026-3-20 22:16
欣赏来了
岁月晚上好{:4_187:}

小辣椒 发表于 2026-3-23 19:50

红影 发表于 2026-3-20 22:16
这么多音效频谱，还有高中低音的显示，这个制作真漂亮。
欣赏亲爱的好帖

亲爱的，好久没有玩这种类型的制作，会忘记的，重新做一次也是很有必要的

小辣椒 发表于 2026-3-23 19:51

走过岁月 发表于 2026-3-20 22:17
制作不错，两边还加了音频滑块

感谢岁月的精彩AE制作分享，小辣椒否则都没有这么好的素材

查看完整版本: 还是想你 同玩岁月功放播放器