论坛 › 音乐沙龙 › 过年啦~~~~

小辣椒 发表于 2026-2-17 01:33

过年啦~~~~

<style>
#papa {
position: relative;
width: 1434px;
height: 745px;
background: #000 url('https://wj.zp68.com/lxx/yunhua/2026/02/16/0F.jpg');
box-shadow: 2px 2px 6px #000;
z-index: 1;
margin: 130px 0 20px calc(50% - 800px);
overflow: hidden;
border-radius: 32px;
}

#Player {
position: absolute;
cursor: pointer;
animation: rot 8s linear infinite var(--state);
z-index: 10;
width: 100px;
height: 100px;
left: 10%;
top: 78%;
}

#Player:hover {
filter: hue-rotate(60deg) drop-shadow(0 0 28px #f52941);
--state: paused;
}

@keyframes rot {
to { transform: rotate(1turn); }
}

.dancer {
position: absolute;
z-index: 1;
}

.lrcShow {
font: normal 32px sans-serif;
position: absolute;
bottom: 10%;
left: 25%;
color: Lavender;
filter: drop-shadow(1px 2px 1px #000);
letter-spacing: 2px;
cursor: pointer;
z-index: 999;
white-space: nowrap;
text-align: center;
}

.lrc-char {
position: relative;
display: inline-block;
}

.lrc-char::before {
content: attr(data-char);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: transparent;
background-image: linear-gradient(60deg, #FF0000, #FFFF00, #f52941, #f52941, #f52941);
-webkit-background-clip: text;
background-clip: text;
overflow: hidden;
animation: charReveal var(--char-duration) linear forwards;
animation-delay: var(--char-delay);
animation-play-state: var(--aniPlayState);
}

@keyframes charReveal {
from { width: 0; }
to { width: 100%; }
}
</style>

<div id="papa">
<img id="Player" src="https://wj.zp68.com/lxx/yunhua/2026/02/16/e.png" alt="播放">
<img class="dancer" id="mainGif" src="https://wj.zp68.com/lxx/yunhua/2026/02/16/0F.gif" style="left:0;top:0;width:99.9%">
<img class="dancer" src="https://wj.zp68.com/lxx/yunhua/2026/02/16/001.png" alt="" style="left: 18%; top: 14%; width: 12%;">

<div class="lrcShow" id="lrcContainer"></div>
</div>

<script>
class LrcPlayer {
constructor(options) {
    this.lrcText = options.lrcTxt;
    this.audioURL = options.audioURL;
    this.currentIndex = -1;
    this.isPaused = false;
    this.lrcArray = this.parseLrc();
    this.lrcContainer = document.getElementById('lrcContainer');
    this.mainGif = document.getElementById('mainGif');
    this.gifStatic = 'https://wj.zp68.com/lxx/yunhua/2026/02/16/0F.jpg';
    this.gifAnimated = 'https://wj.zp68.com/lxx/yunhua/2026/02/16/0F.gif';
    this.hasUserInteracted = false;
   
    this.initAudio();
    this.bindEvents();
    this.showInitialLyric();
    setTimeout(() => this.tryAutoPlay(), 1000);
}

parseLrc() {
    const result = [];
    this.lrcText.trim().split(/\r?\n/).forEach(line => {
      const timeTags = line.match(/\[\d{1,2}:\d{2}(?:\.\d+)?\]/g);
      if (timeTags) {
      const text = line.split(']').pop().trim();
      if (text) timeTags.forEach(tag => {
          const = tag.slice(1, -1).split(':');
          result.push({ time: +m * 60 + +s, text });
      });
      }
    });
   
    result.sort((a, b) => a.time - b.time);
    for (let i = 0; i < result.length - 1; i++) {
      result.duration = result.time - result.time;
    }
    if (result.length) result.duration = 2;
    return result;
}

showInitialLyric() {
    if (this.lrcArray.length > 0) {
      this.showLyric(this.lrcArray.text, this.lrcArray.duration, true);
      this.currentIndex = 0;
    }
}

initAudio() {
    this.audio = new Audio(this.audioURL);
    this.audio.loop = true;
    this.audio.style.display = 'none';
    document.getElementById('papa').appendChild(this.audio);
}

bindEvents() {
    document.getElementById('Player').onclick = (e) => {
      e.stopPropagation();
      this.hasUserInteracted = true;
      if (this.audio.paused) {
      this.audio.play();
      } else {
      this.audio.pause();
      }
    };

    this.audio.addEventListener('timeupdate', () => this.updateLyrics());
    this.audio.addEventListener('play', () => this.updatePlayState(true));
    this.audio.addEventListener('pause', () => this.updatePlayState(false));
}

updateLyrics() {
    if (this.isPaused) return;
   
    const ct = this.audio.currentTime;
    for (let i = 0; i < this.lrcArray.length; i++) {
      if (ct >= this.lrcArray.time && (i === this.lrcArray.length - 1 || ct < this.lrcArray.time)) {
      if (this.currentIndex !== i) {
          this.currentIndex = i;
          this.showLyric(this.lrcArray.text, this.lrcArray.duration, false);
      }
      break;
      }
    }
}

showLyric(text, duration, isInitial = false) {
    if (this.isPaused && !isInitial) return;
   
    this.lrcContainer.innerHTML = '';
    const chars = text.split('');
    const charDuration = duration / chars.length;
   
    chars.forEach((char, index) => {
      const charSpan = document.createElement('span');
      charSpan.className = 'lrc-char';
      charSpan.textContent = char;
      charSpan.setAttribute('data-char', char);
      charSpan.style.setProperty('--char-duration', charDuration + 's');
      charSpan.style.setProperty('--char-delay', (index * charDuration) + 's');
      charSpan.style.setProperty('--aniPlayState', isInitial ? 'running' : 'running');
      this.lrcContainer.appendChild(charSpan);
    });
}

updatePlayState(playing) {
    this.isPaused = !playing;
    const playerEl = document.getElementById('Player');
    const papaEl = document.getElementById('papa');
   
    papaEl.style.setProperty('--state', playing ? 'running' : 'paused');
    playerEl.title = playing ? '暂停' : '播放';
   
    if (playing) {

      playerEl.style.animationPlayState = 'paused';

      playerEl.style.animation = 'none';

      // 这里通过一个极短的延时（requestAnimationFrame）确保浏览器应用了‘none’状态
      requestAnimationFrame(() => {
            requestAnimationFrame(() => {

                playerEl.style.animation = 'rot 8s linear infinite running';
            });
      });
    } else {

      playerEl.style.animationPlayState = 'paused';
    }

    document.querySelectorAll('.lrc-char').forEach(char => {
      char.style.setProperty('--aniPlayState', playing ? 'running' : 'paused');
    });
   
    this.mainGif.src = playing ? this.gifAnimated : this.gifStatic;
}

tryAutoPlay() {
    this.audio.play().catch(() => console.log('等待用户交互'));
}
}
const lrcText =` 过年啦
祝大家新年快乐
阖家团圆 幸福安康
孩子们的笑脸 老人的期盼
忙碌了一年 该回家团圆
锣鼓声震天 那龙灯舞的欢
火红的灯笼 高高挂门前
人生何其短 别为名利纠缠
开开心心每一天 相聚是缘
过年 过年 过一个团圆年
欢欢喜喜 爱情美满
过年 过年 过一个吉祥年
别忘了孩子们的压岁钱
恭喜发财 红包拿来
祝大家新年快乐！
瑞雪兆丰年 把中国梦实现
收获的季节是笑开了颜
家家看春晚 今宵多温暖
笑一笑十年少 把烦恼抛一边
东西南北中 在同一片天空
五百年前是一家 咱龙的血缘
过年 过年 过一个团圆年
恭喜恭喜 要赚大钱
过年 过年 过一个吉祥年
别忘了孩子们的压岁钱
过年 过年 过一个团圆年
欢欢喜喜 爱情美满
过年 过年 过一个吉祥年
衷心的祝福你 岁岁平安
新年快乐
谢谢欣赏！

`;

new LrcPlayer({
lrcTxt: lrcText,
audioURL: "https://xlaj.cn/upfile/2025/01/29/gnl.mp3"
});

document.addEventListener('click', function initPlay() {
const audio = document.querySelector('audio');
const player = new LrcPlayer({});
if (audio && audio.paused && !player.hasUserInteracted) {
    audio.play();
}
}, { once: true });
</script>

小辣椒 发表于 2026-2-17 01:36

新的一年了

身体先顾好：少熬夜、多走动，心情比什么都重要。
少想多做：想做的事别等 “以后”，今天就迈出一小步。
对自己温柔：允许不完美，允许慢慢来，你已经很努力了。
多靠近开心：远离消耗你的人和事，只留舒服的关系。
钱慢慢赚：日子好好过，平安健康，就是最大的福气。
新的一年，我们一起：
有事做，有人爱，有所期待，一切都越来越好。

有AI真好，回复立马出来了{:4_170:}

梦江南 发表于 2026-2-17 07:39

小辣椒 发表于 2026-2-17 01:36
新的一年了

身体先顾好：少熬夜、多走动，心情比什么都重要。


小辣椒，新年好！祝你在新的一年里身心康健，工作顺利，音画更上一层楼！{:4_187:}{:4_204:}

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

烟火起，照人间，举杯敬新年。愿你，愿我，愿世间：昭昭如愿，岁岁安澜。2026，平安，喜乐，圆满，长安！{:4_204:}

梦江南 发表于 2026-2-17 07:50

马踏长风至，云程骋万里。 祝你，祝我，祝大家： 风生水起，顶峰相见。 2026，行大运，发大财，展宏图，兴万事！{:4_171:}

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

星河滚烫承旧梦，人间烟火赴新章。 愿君，愿己，愿世间： 年年风依旧，岁岁人团圆。 2026，开心，无忧，健康，有钱，平安！{:4_177:}

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

旧岁千般好，新年万事兴。 愿君，愿我，愿世间： 朝朝有欢喜，岁岁无忧烦。 2026，岁月安和，诸事如愿！{:4_204:}

梦江南 发表于 2026-2-17 07:53

岁岁常欢愉，年年皆胜意。 祝你，祝我，祝我们： 所得皆所愿，所遇皆所求。 2026，脚下有路，远方有光，踏足之处，皆是坦途！{:4_204:}

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

烟火绚烂，映照出梦想的轮廓； 岁月轻歌，吟唱着希望的旋律。 祝你，祝我，祝大家： 2026，有趣、有盼、无灾、无难。{:4_204:}

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

目之所及，皆是星辰大海；心之所向，皆是万里花开。祝你，祝我，祝大家：2026，所念皆所成，所求皆如愿；时时有欢悦，处处有清欢！{:4_204:}

梦江南 发表于 2026-2-17 07:57

与旧事和解，同新岁言欢。 祝你、祝我、祝大家： 所爱之人，岁岁无恙； 所盼之事，皆有回响。 新的一年，平安，喜乐，顺遂，安康！{:4_204:}

梦江南 发表于 2026-2-17 07:58

晨霭袅袅，岁月迢迢。 念你，念我，念众友： 心中有梦，前路有景； 征程所向，俱是佳境。 2026，安康，顺遂，吉庆，长乐！

{:4_204:}

梦江南 发表于 2026-2-17 07:59

匆匆又一岁，岁岁皆成长。 祝你，祝我，祝大家： 2026丙午马年，且富，且闲，且安，且康！
{:4_204:}

梦江南 发表于 2026-2-17 08:00

拂衣辞过往，策马赴新程。 愿你，愿我、愿诸君： 事事如愿，岁岁安澜。 2026，平安常伴，喜乐长安！

{:4_204:}

梦江南 发表于 2026-2-17 08:01

2026年，愿你可遇、可望、可期；随心、随缘、随喜；阅己，悦己，越己；自静、自醒、自清欢。

{:4_204:}

梦江南 发表于 2026-2-17 08:02

2026，愿你被爱包围，被好运纠缠，眼里有光，心中有暖！{:4_204:}

也曾年轻 发表于 2026-2-17 08:29

https://pic.rmb.bdstatic.com/bjh/news/cc5deefa633c5272ab88942716660f34.gif

红影 发表于 2026-2-17 11:24

真美好的过年贺帖，这个制作太美了。
过大年，给亲爱的拜年了，过年好{:4_187:}

辫子哥哥 发表于 2026-2-17 14:11

新年快乐！新的一年所有都心想事成！{:4_178:}

枝条 发表于 2026-2-17 14:34

小辣椒 发表于 2026-2-17 01:36
新的一年了

身体先顾好：少熬夜、多走动，心情比什么都重要。


小辣椒新年快乐。

查看完整版本: 过年啦~~~~