小辣椒 发表于 2026-5-19 21:13

孟婆求你赐我忘情汤

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa {
      --offsetX: 81px;
      --bg: url('https://wj.zp68.com/lxx/yunhua/2026/03/14/22.jpg') no-repeat center/cover;
      color: white;
      position: relative;
    }
    .player {
      width: 480px;
      left: 37%;
      bottom: 20px;
    }
    .btnFs {
      top: 25px;
      right: 20px;
    }
    #msvg {
      position: absolute;
      width: 6vw;
      height: 6vw;
      left: 67%;
      top: 18%;
      transition: .75s;
      opacity: var(--opacity);
      cursor: pointer;
    }
    .lyrics-container {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      max-width: 800px;
      max-height: 120px;
      overflow-y: auto;
      scroll-behavior: smooth;
      text-align: center;
      color: white;
      font-family: 'Microsoft YaHei', sans-serif;
      text-shadow: 0 0 8px rgba(0,0,0,0.9);
      z-index: 10;
      background: transparent;
      padding: 10px 20px;
      /* 隐藏滚动条（WebKit） */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE/Edge */
    }
    .lyrics-container::-webkit-scrollbar {
      display: none; /* Chrome/Safari */
    }

    .lyric-line {
      line-height: 1.5;
      margin: 10px 0;
      transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      opacity: 0.3;
      font-size: 1.2em;
      transform: scale(0.95);
      filter: blur(0.5px);
    }
    .lyric-line.active {
      opacity: 1;
      font-size: 1.8em;
      font-weight: bold;
      color: #fffacd;
      text-shadow: 0 0 15px rgba(218,112,214,0.9);
      transform: scale(1.05);
      filter: blur(0);
    }
    .lyric-line.previous {
      opacity: 0.7;
      font-size: 1.4em;
      transform: scale(1);
      filter: blur(0);
    }
    .lyric-line.next {
      opacity: 0.5;
      font-size: 1.0em;
      transform: scale(0.9);
    }
    .lyric-line.inactive {
      opacity: 0;
      max-height: 0;
      margin: 0;
      overflow: hidden;
    }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="" autoplay loop muted playsinline></video>
    <div id="lyricsBox" class="lyrics-container"></div>
    <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
      <g id="g1" class="rot brightness">
            <title>播放/暂停(Alt+X)</title>
            <circle cx="0" cy="0" r="190" fill="transparent"></circle>
      </g>
    </svg>
</div>

<script>
if (!window.attachEvent) window.attachEvent = function() {};
var baseAudio = 'https://' + 'wj.zp68.com' + '/lxx/yunhua/2026/03/14/01.mp3';
var baseStaticImg = 'https://' + 'wj.zp68.com' + '/lxx/yunhua/2026/03/14/22.jpg';
var baseDynamicImg = 'https://' + 'wj.zp68.com' + '/lxx/yunhua/2026/03/14/22.gif';

const lrcLyrics = `孟婆求你赐我忘情汤
（动感版）歌手：铃花儿
作词：黑奔驰
作曲：黑奔驰
编曲：黑奔驰
孟婆求你赐我忘情汤
让我断了所有的念想
回头看半生的沧桑
全是爱情赐我的伤
我怕来世还在老地方
遇上你我还不完的账
喝下这碗再不思量
斩断所有儿女情长
今生缘分已到了散场
我又何苦还要去勉强
越是想要把你遗忘
越是深陷在这张网
就算青丝染白成了霜
或许我还不能够遗忘
既然不能地老天荒
就让思念陪我流浪
谢谢欣赏`;

var options = {
    pa: '.pa',
    urls: [],
    btns: ,
    lyrics: lrcLyrics
};
function loadJs(url, callback) {
    var s = document.createElement('script');
    s.src = url;
    s.onload = callback;
    document.head.appendChild(s);
}

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function() {
    loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
});

function tzRun() {
    let backgroundControl = {
      isDynamic: false,
      dynamicBg: 'url(' + baseDynamicImg + ') no-repeat center/cover',
      staticBg: 'url(' + baseStaticImg + ') no-repeat center/cover',
      init() {
            this.pa = document.querySelector('.pa');
            this.updateBackground();
      },
      updateBackground() {
            this.pa.style.setProperty('--bg', this.isDynamic ? this.dynamicBg : this.staticBg);
      },
      syncWithMusic(audioElement) {
            if (!audioElement) return;
            audioElement.addEventListener('play', () => {
                this.isDynamic = true;
                this.updateBackground();
            });
            audioElement.addEventListener('pause', () => {
                this.isDynamic = false;
                this.updateBackground();
            });
      }
    };
    if (AudPlayer.prototype.mState) {
      const originalMState = AudPlayer.prototype.mState;
      AudPlayer.prototype.mState = function() {
            const svg = document.getElementById('msvg');
            if (this.aud.paused) {
                if (svg && svg.pauseAnimations) svg.pauseAnimations();
                originalMState.call(this);
            } else {
                if (svg && svg.unpauseAnimations) svg.unpauseAnimations();
                originalMState.call(this);
            }
      };
    }
    AudPlayer.prototype.parseLyrics = function(lrcText) {
      const lines = lrcText.split('\n');
      const lyricArr = [];
      const timeRegex = /\[(\d{2}):(\d{2})\.(\d{2})\]/;
      lines.forEach(line => {
            const match = line.match(timeRegex);
            if (match) {
                const [, minutes, seconds, ms] = match;
                const time = parseInt(minutes)*60 + parseInt(seconds) + parseInt(ms)/100;
                const text = line.replace(timeRegex, '').trim();
                if (text) lyricArr.push({ time, text });
            }
      });
      lyricArr.sort((a,b) => a.time - b.time);
      this.lyrics = lyricArr;
      this.currentLyricIndex = 0;
    };

    AudPlayer.prototype.createLyricsContainer = function() {
      if (!this.lyrics || !this.lyrics.length) return;
      this.lyricsBox = document.getElementById('lyricsBox');
      if (!this.lyricsBox) return;
      this.lyricsBox.innerHTML = '';
      this.lyricLines = [];
      this.lyrics.forEach((lyric, idx) => {
            const div = document.createElement('div');
            div.className = 'lyric-line';
            div.textContent = lyric.text;
            div.dataset.index = idx;
            this.lyricsBox.appendChild(div);
            this.lyricLines.push(div);
      });
    };

    AudPlayer.prototype.updateLyrics = function(currentTime) {
      if (!this.lyrics || !this.lyricLines) return;
      let newIndex = this.currentLyricIndex;
      while (newIndex < this.lyrics.length-1 && this.lyrics.time <= currentTime) newIndex++;
      while (newIndex > 0 && this.lyrics.time > currentTime) newIndex--;

      if (newIndex !== this.currentLyricIndex) {
            this.lyricLines.forEach(line => {
                line.classList.remove('active', 'previous', 'next', 'inactive');
            });
            if (this.lyricLines) this.lyricLines.classList.add('active');
            if (newIndex > 0 && this.lyricLines) this.lyricLines.classList.add('previous');
            if (newIndex < this.lyrics.length-1 && this.lyricLines) this.lyricLines.classList.add('next');
            this.lyricLines.forEach((line, idx) => {
                if (idx !== newIndex && idx !== newIndex-1 && idx !== newIndex+1) {
                  line.classList.add('inactive');
                }
            });
            this.currentLyricIndex = newIndex;
            const activeLine = this.lyricLines;
            if (activeLine && this.lyricsBox) {
                const container = this.lyricsBox;
                const targetTop = activeLine.offsetTop - container.offsetHeight/2 + activeLine.offsetHeight/2;
                container.scrollTo({ top: Math.max(0, targetTop), behavior: 'smooth' });
            }
      }
    };
    const originalBindAudEvents = AudPlayer.prototype.bindAudEvents;
    AudPlayer.prototype.bindAudEvents = function() {
      originalBindAudEvents.call(this);
      this.aud.addEventListener('timeupdate', () => {
            if (this.updateLyrics) this.updateLyrics(this.aud.currentTime);
      });
    };
    const aud = new AudPlayer(options);
    aud.parseLyrics(lrcLyrics);
    aud.createLyricsContainer();
    const dr = window._dr(msvg);
    dr.circle(0,0,15,'lightblue','white',2).addTo(g1);
    dr.circle(0,160,30,'lightblue','white',2).addTo(g1).rotates(7);
    dr.circle(0,100,25,'lightblue','white',2).addTo(g1).rotates(7);
    dr.circle(0,50,20,'lightblue','white',2).addTo(g1).rotates(7);

    backgroundControl.init();
    backgroundControl.syncWithMusic(aud.aud);
    setTimeout(() => {
      if (aud.updateLyrics) aud.updateLyrics(0);
    }, 100);
    const svgEl = document.getElementById('msvg');
    const activateVideo = () => {
      const video = document.querySelector('.pd-vid');
      if (video && video.paused) video.play().catch(e=>{});
      svgEl.removeEventListener('click', activateVideo);
    };
    svgEl.addEventListener('click', activateVideo);
}
</script>

小辣椒 发表于 2026-5-19 22:18

{:5_128:}{:5_128:}{:5_128:}

小辣椒 发表于 2026-5-19 22:18

也是同一首的{:5_142:}{:5_142:}{:5_142:}

liumang 发表于 2026-5-19 22:27

好听。好看 小辣椒现在忙吧，很少看见你了

liumang 发表于 2026-5-19 22:27

好听。好看 小辣椒现在忙吧，很少看见你了

了了子 发表于 2026-5-20 20:14

欣赏小辣椒的好贴，点赞！{:5_143:}

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

了了子 发表于 2026-5-20 20:14
欣赏小辣椒的好贴，点赞！

老师晚上好，谢谢欣赏，谢谢老师的支持和鼓励{:5_149:}

小辣椒 发表于 2026-5-21 22:10

liumang 发表于 2026-5-19 22:27
好听。好看 小辣椒现在忙吧，很少看见你了

是的，有时候晚上回家迟了就不上来了

小辣椒 发表于 2026-5-21 22:11

liumang 发表于 2026-5-19 22:27
好听。好看 小辣椒现在忙吧，很少看见你了

谢谢溜~~~{:5_149:}

liumang 发表于 2026-5-22 12:45

小辣椒 发表于 2026-5-21 22:11
谢谢溜~~~

现实生活重要，有时间就玩玩，你还是要多注意身体{:5_144:}
页: [1] 2
查看完整版本: 孟婆求你赐我忘情汤