醉美水芙蓉 发表于 2026-8-9 22:51:05

梦江南《夜阑珊》

<meta charset="UTF-8">
<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 70px; color: yellow; position:relative; overflow:hidden; }
    .pa::before, .pa::after { position: absolute; content: ''; inset: 0; background: url('https://pan.suyanw.cn/view.php/c55c3e88a944601ec45cd3f9384ec60e.jpg') no-repeat center/cover; z-index: -2; }
    .pa::before { background-position: var(--begin1) 0; }
    .pa::after {
      transform: scale(-1, 1);
      background-position: var(--begin2) 0;
    }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    #mpic {top: 605px; width: 160px; bottom: 50px; }

    /* ==========新增歌词样式：底部居中单行========== */
    .lyric-wrap{
      position:absolute;
      top: 785px;
      bottom:40px;
      left:0;
      width:100%;
      text-align:center;
      z-index:10;
      pointer-events:none;
    }
    .lyric-text{
      font-size:28px;
      color:#ffffff;
      text-shadow:1px 1px 3px #000000;
      white-space:nowrap;
      /* 修改部分：设置字体为隶书，并加粗 */
      font-family: "LiShu", "隶书", serif;
      font-weight: bold;
    }
</style>

<div id="pa" class="pa">
    <img id="mpic" class="rot" src="https://638183.freep.cn/638183/web/svg1/s002.svg" alt="" />
    <video class="pd-vid" src="https://pan.suyanw.cn/view.php/6bffc0e5916245c6988542c06ca7a81e.mp4" autoplay loop muted></video>
    <!-- 歌词DOM容器 -->
    <div class="lyric-wrap">
      <div class="lyric-text"></div>
    </div>
</div>

<script>
    var raf = null, begin1 = 0, begin2 = 0, speed = 0.35;
   
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=3383127428.mp3']],
      btns: ,
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);

    // ============这里粘贴你的LRC完整歌词文本============
    const lrcText = `夜阑珊
        LRC歌词编辑：梦江南
        月色冷照空船
        往事潜入梦幻
        忆当年桃花繁
        回首处是阑珊
        朱窗畔墨迹干
        书已风寄云端
        字万千意阑珊
        无人守着牵绊
        叹此间离合悲欢
        缘分终究会流散
        一寸心如何能看
        物是人非空留憾
        此生路漫漫长叹
        孤独身影步蹒跚
        ********
        旧长安心泰然
        琴声断弦已换
        诺言淡随风散
        这旧事人非叹
        叹此间离合悲欢
        缘分终究会流散
        一寸心如何能看
        物是人非空留憾
        此生路漫漫长叹
        孤独身影步蹒跚
        若再见你无关
        风与月皆无关
        情深处难言
        徒留此心独怅惘
        叹此间离合悲欢
        缘分终究会流散
        一寸心如何能看
        物是人非空留憾
        啊啊啊余生路漫漫长叹
        孤独身影步蹒跚
        夜阑珊风易残
`;
    // ==================================================

    // LRC解析函数
    function parseLrc(lrcStr){
      const lines = lrcStr.split('\n');
      const reg = /\[(\d{2}):(\d{2})\.(\d{2,3})\]/;
      let list = [];
      lines.forEach(line=>{
            const m = line.match(reg);
            if(!m) return;
            const time = parseInt(m)*60 + parseInt(m) + parseInt(m)/1000;
            const txt = line.replace(reg,'').trim();
            if(txt) list.push({time,text:txt});
      });
      return list.sort((a,b)=>a.time-b.time);
    }

    function tzRun() {
      var aud = new AudPlayer(options);
      const lyricDom = document.querySelector('.lyric-text');
      const lyricList = parseLrc(lrcText);
      let lastIndex = -1;

      // 歌词同步更新
      function updateLyric(){
            const cur = aud.aud.currentTime;
            let idx = 0;
            for(let i=0;i<lyricList.length;i++){
                if(lyricList.time <= cur) idx = i;
            }
            if(idx!==lastIndex){
                lyricDom.innerText = lyricList.text;
                lastIndex = idx;
            }
      }
      // 音频时间更新事件，驱动歌词切换
      aud.aud.ontimeupdate = updateLyric;

      function bgMove() {
            var ww = aud.pa.offsetWidth;
            function moving() {
                cancelAnimationFrame(raf);
                begin1 += speed;
                if (speed > 0) {
                  if (begin1 >= ww) begin1 = -ww;
                } else {
                  if(begin1 <= -ww) begin1 = ww;
                }
                begin2 = begin1 >= 0 ? -1 * (begin1 - ww + 1) : -1 * (begin1 + ww - 1);
                aud.pa.style.setProperty('--begin1', begin1 + 'px');
                aud.pa.style.setProperty('--begin2', begin2 + 'px');
                aud.aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(moving);
            }
            moving();
      }
      
      aud.aud.onpause = () => bgMove();
      aud.aud.onplaying = () => bgMove();
      window.onresize = () => bgMove();
    }

    function loadJs(url, callback) {
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.src = url;
      script.onload = function() {
            if (callback) callback();
      };
      document.head.appendChild(script);
    }
</script>

月明工作室 发表于 2026-8-11 08:15:07

欣赏芙蓉老师精彩作品！

醉美水芙蓉 发表于 2026-8-11 22:46:54

月明工作室 发表于 2026-8-11 08:15
欣赏芙蓉老师精彩作品！

谢谢明月老师光临！
页: [1]
查看完整版本: 梦江南《夜阑珊》