论坛 › 欢乐水吧 › 【花潮贺岁】笑纳 (DJ沈念版)

小辣椒 发表于 2026-2-21 21:36

【花潮贺岁】笑纳 (DJ沈念版)

<style>
#papa {
      margin: 130px 0 30px calc(50% - 730px);
      width: 1280px;
      height: 650px;
      background: lightgreen url('https://wj.zp68.com/lxx/yunhua/2026/02/04/2.jpg') no-repeat center/cover;
      box-shadow: 2px 2px 6px #000;
      position: relative;
}
#mplayer {
      position: absolute;
      width: 180px;
      height: 180px;
      right: 600px;
      top: 35%;
      border-radius: 50%;
      cursor: pointer;
      animation: rot 8s linear infinite;
}
#lrc {
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: linear-gradient(180deg, hsla(50, 50%, 50%, .45), hsla(50, 70%, 50%, .65));
      position: absolute;
      left: 45%;
      transform: translate(-50%);
      top: 75px;
      font: bold 2.2em sans-serif;
      color: snow;
      white-space: pre;
      -webkit-background-clip: text;
      filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
}
#lrc::before {
      position: absolute;
      content: attr(data-lrc);
      width: 20%;
      height: 100%;      
      color: transparent;
      overflow: hidden;
      white-space: pre;
      background: var(--bg);
      filter: inherit;
      -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%; } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
      <div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
      <img id="mplayer" src="https://wj.zp68.com/lxx/yunhua/2026/02/04/5.jpg" alt="" />
      <audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2026/02/04/01.mp3" loop autoplay></audio>
</div>

<script>
(function() {
/*原始lrc歌词*/
let lrcStr = `
笑纳 (DJ沈念版)
撑伞接落花
看那西风骑瘦马
谁能为我一眼望穿流霞
公子是你吗
前面深山谁人家
暮夜抚一曲琵琶
我欲提笔为汝一幅画
佳人请笑纳
挑灯看遍长街的繁华
白胡子老者 临摹入画
一番寒暄 附和月色无暇
忽然清风 惹一池落花
三两知己结伴的仲夏
夜市闹三更 不想回家
星光洒落 老树的枝丫
马蹄浅浅 落一身风沙
撑伞接落花
看那西风骑瘦马
谁能为我一眼望穿流霞
公子是你吗
前面深山谁人家
暮夜抚一曲琵琶
我欲提笔为汝一幅画
佳人请笑纳
撑伞接落花
看那西风骑瘦马
谁能为我熬一缕青发
那人是你吗
谁在窃语谱情话
红尘故事在牵挂
夜风微凉烛影暖心啊
我悠歌把月光请笑纳
挑灯看遍长街的繁华
白胡子老者 临摹入画
一番寒暄 附和月色无暇
忽然清风 惹一池落花
三两知己结伴的仲夏
夜市闹三更 不想回家
星光洒落 老树的枝丫
马蹄浅浅 落一身风沙
撑伞接落花 看那西风骑瘦马
谁能为我一眼望穿流霞
公子是你吗
前面深山谁人家
暮夜抚一曲琵琶
我欲提笔为汝一幅画
佳人请笑纳
撑伞接落花
看那西风骑瘦马
谁能为我熬一缕青发
那人是你吗
谁在窃语谱情话
红尘故事在牵挂
夜风微凉烛影暖心啊
我悠歌把月光请笑纳
`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
      let tmpAr = [];
      for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
      }
      let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
      let lrcAr = [];
      let calcRule = ;
      for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                              for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                              }
                        }
                }
      }
      lrcAr.sort((a,b)=> a - b);
      return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
      let name = mFlag ? 'cover1' : 'cover2';
      lrc.innerHTML = lrcAr;
      lrc.dataset.lrc = lrcAr;
      lrc.style.setProperty('--motion', name);
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
      }
      if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let time = lrcAr - (aud.currentTime - lrcAr);
      showLrc(time);
};

/*格式化时间信息*/
let toMin = (val) => {
      if (!val) return '00:00';
      val = Math.floor(val);
      let min = parseInt(val / 60),
      sec = parseFloat(val % 60);
      if (min < 10) min = '0' + min;
      if (sec < 10) sec = '0' + sec;
      return min + ':' + sec;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});

aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
mplayer.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });

let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>

小辣椒 发表于 2026-2-21 21:37

活动中继续分享以前的播放器，大家一起欣赏~~

小辣椒 发表于 2026-2-21 21:40

祝大家初五快乐！

梦江南 发表于 2026-2-22 07:48

{:4_187:}欣赏小辣椒古风音画版。这种清淡古风的画面也有另一种韵味。点赞学习！

梦江南 发表于 2026-2-22 07:51

大年初六，六六大顺日！愿你事业腾飞，财源广进；家庭和睦，幸福美满；身体健康，平安喜乐。一顺到底，好运连连！{:4_204:}

梦江南 发表于 2026-2-22 07:51

大年初六，六六大顺！愿你事业顺，红红火火；生活顺，快快乐乐；感情顺，甜甜蜜蜜；家庭顺，和和美美；身体顺，健健康康；运气顺，平平安安。一顺百顺，万事顺遂！

梦江南 发表于 2026-2-22 07:52

大年初六，顺意常伴，顺利在手。愿你每一天都顺风顺水，事事顺溜，心情愉悦。六六大顺，好运连连，幸福美满！{:4_204:}

梦江南 发表于 2026-2-22 07:54

初六到，祝福到！愿你生活如诗如画，心情如歌如梦。新的一年，幸福满满，笑容满面，事事顺心，万事顺意！{:4_204:}

梦江南 发表于 2026-2-22 07:55

大年初六问声好，好运伴你身边绕，甜蜜幸福每一秒，心想事成步步高。祝愿你好运时刻相伴，天天幸福吉祥，岁岁健康平安！{:4_204:}

梦江南 发表于 2026-2-22 07:56

大年初六，六六大顺，新年的第一个顺遂日，愿你开启所有的好运，工作顺风顺水，生活顺心如意，家人平安顺遂，人生一帆风顺！早上好！{:4_204:}

红影 发表于 2026-2-22 08:13

这个是没封装的，这歌好像带着粤语和国语呢，好听。
欣赏亲爱的好帖，初六快乐{:4_187:}

梦油 发表于 2026-2-22 10:19

祝小辣椒朋友人顺事顺六六大顺。

凤舞九天 发表于 2026-2-22 10:53

这首我也唱过，要是以后发歌，能用你的图么？{:5_117:}

小辣椒 发表于 2026-2-22 21:05

梦江南 发表于 2026-2-22 07:48
欣赏小辣椒古风音画版。这种清淡古风的画面也有另一种韵味。点赞学习！

阿姨晚上好，今天初六，祝福六六大顺{:4_178:}

小辣椒 发表于 2026-2-22 21:06

梦江南 发表于 2026-2-22 07:48
欣赏小辣椒古风音画版。这种清淡古风的画面也有另一种韵味。点赞学习！

都是最简单的图图

小辣椒 发表于 2026-2-22 21:07

红影 发表于 2026-2-22 08:13
这个是没封装的，这歌好像带着粤语和国语呢，好听。
欣赏亲爱的好帖，初六快乐

都是以前玩的做的复习一下

小辣椒 发表于 2026-2-22 21:08

梦油 发表于 2026-2-22 10:19
祝小辣椒朋友人顺事顺六六大顺。

梦油晚上好，今天初六，祝福梦油六六大顺！！！

小辣椒 发表于 2026-2-22 21:09

凤舞九天 发表于 2026-2-22 10:53
这首我也唱过，要是以后发歌，能用你的图么？

可以啊，修改你的歌词复制上去，换你的音乐连接，这样就歌词同步了

红影 发表于 2026-2-22 22:36

小辣椒 发表于 2026-2-22 21:07
都是以前玩的做的复习一下

嗯嗯，温故知新呢{:4_204:}

梦江南 发表于 2026-2-23 09:09

小辣椒，大年初七，送你七喜：天喜、地喜、业喜、财喜、家喜、事喜、人喜，愿你事事皆大欢喜，时时吉星高照。{:4_187:}

查看完整版本: 【花潮贺岁】笑纳 (DJ沈念版)