论坛 › 音乐沙龙 › 尺素迟 套用马老师代码

霜染枫丹 发表于 2025-12-17 20:14

尺素迟 套用马老师代码

本帖最后由 霜染枫丹 于 2025-12-26 18:40 编辑 <br /><br /><style>
    #papa {
      --state: running;
      margin: 30px 0;
      left: calc(50% - 81px);
      transform: translateX(-50%);
      width: clamp(1000px, 90vw, 1800px);
      min-height: 80vh;
      aspect-ratio: 16/9;
      background: url('https://ff.xiaoqiaodali.top:5401/i/2025/12/17/694277a68b469.gif') 0/100%;
      box-shadow: 3px 3px 6px 6px gray;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }
    #dt {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0%;
      left: 0%;
      mix-blend-mode: screen;
      z-index: -1;
    }
    #dt img {
      width: 100%;
      height: 100%;
    }
    .lrc {
      position: absolute;
      top: 16%;
      left: 60%;
      width: 540px;
      height: 250px;
      overflow: hidden;
    }
    .lrc #ul {
      width: 100%;
      padding: 0;
      list-style: none;
      transition: 0.3s all ease;
      margin: 0;
    }
    .lrc #ul li {
      color: #fff;
      font: normal 28px 'LiSu', '隶书', serif; /* 改为隶书字体 */
      transition: .3s all ease;
      list-style-type: none;
      text-align: center;
      display: block;
      padding: 0 10px;
      height: 50px;
      line-height: 50px;
      margin: 0 auto;
    }
    .lrc #ul li.active {
      transform: scale(1.2);
      color: #33FF33;
      font-weight: 650;
      text-align: center;
    }
    #vid1 {
      width: 100%;
      height: 100%;
      z-index: -1;
      position: absolute;
      top: 0%;
      left: 0%;
      opacity: .99;
      object-fit: cover;
      pointer-events: none;
      mix-blend-mode: screen;
      -webkit-mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);
    }
    #gl {
      position: absolute;
      width: 240px;
      height: 150px;
      left: 3%;
      top: 75%;
      object-fit: cover;
      aspect-ratio: 1;
      border: 5px solid #ccc;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3) inset;
      border-radius: 50%;
      mix-blend-mode: unset;
      z-index: 3;
      opacity: .99;
      cursor: pointer;
    }
    #gl:hover {
      transform: scale(1.1, 1.1);
      filter: drop-shadow(0 0 80px Gold);
    }
    #vid2 {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0%;
      left: 0%;
      object-fit: cover;
      z-index: 1;
      opacity: .39;
      pointer-events: none;
    }
    #progress {
      position: absolute;
      bottom: 10%;
      right: 26.5%;
      width: 600px;
      height: 3px;
      background: #666;
      cursor: pointer;
      z-index: 5;
    }
    #progress-bar {
      height: 100%;
      background: linear-gradient(90deg, #fa4354, #18f5f8);
      width: 0;
      transition: width 0.1s;
      position: relative;
    }
    .time-info {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      color: #fff;
      font-size: 14px;
      font-family: Arial, sans-serif;
    }
    #current-time {
      left: -50px;
    }
    #total-time {
      right: -50px;
    }
    #menu-toggle {
      position: absolute;
      top: 13px;
      left: 8%;
      color: #fff;
      cursor: pointer;
      z-index: 10;
      padding: 5px 10px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 5px;
    }
</style>

<div id="papa">
    <div id="dt">
      <img src="https://pic1.imgdb.cn/item/67564aedd0e0a243d4e015f5.gif" id="Img" style="mix-blend-mode: screen" alt=" " />
    </div>
    <img src="https://ff.xiaoqiaodali.top:5401/i/2025/12/17/694299b5d1cde.gif" id="gl" style="mix-blend-mode: screen" title="播放/暂停" alt=" " />
    <video id="vid1" src="https://cccimg.com/view.php/09e9e542ca9674b06a0c561cee5824f1.mp4" loop muted autoplay></video>

    <div id="progress">
      <span id="current-time" class="time-info">00:00</span>
      <div id="progress-bar"></div>
      <span id="total-time" class="time-info">00:00</span>
    </div>
    <div id="dhgc" class="lrc">
      <ul id="ul"></ul>
    </div>
</div>

<audio id="audio" src="https://imgimg.qqdsw8.cn/view.php/d351e91b7d7e942c250402abf12b7386.mp3" loop autoplay></audio>

<script>
    var lrc = `
尺素迟
歌手:薛小七
发行日期:2025-12-05
词曲：薛小七
制作人：薛小七
尺素蒙尘浸三春
枯折沉霜锈蝶纹
拆得鱼信三更枕
未读泪已折皱纹
别后锦字读几轮
墨痕入骨刻年轮
青鹊衔月入残更
半幅昏黄藏未赠
相思落款总是迟
南雁北归不识痴
烛火燃尽未完诗
一页春秋两行湿
铜镜斑驳照影深
鬓雪偷染旧时晨
褪色香囊藏药引
当年诀别半字温
朱砂晕染旧笔锋
残云裁作寄远封
风敲竹节惊空樽
落款迟迟向烟烽
天涯路尽烟波迟
蓬山雾锁未寄痴
蜡炬垂首守残纸
万里山河一豆炽
驿道苔痕漫青聪
叠嶂截断离人梦
竹筒空悬廿四孔
岁岁寒露敲玲珑
八行书里光阴迟
关山渡罢始觉痴
灰烬蜷成红豆痣
墨色褪作掌中刺

`;
    let lrcArr = lrc.split('\n');
    let result = [];
    doms = {
      audio: document.querySelector("#audio"),
      ul: document.querySelector("#ul"),
      container: document.querySelector(".lrc"),
      progress: document.querySelector("#progress"),
      progressBar: document.querySelector("#progress-bar"),
      currentTime: document.querySelector("#current-time"),
      totalTime: document.querySelector("#total-time"),
      gl: document.querySelector("#gl")
    }

    for (let i = 0; i < lrcArr.length; i++) {
      let line = lrcArr.trim();
      if (!line) continue;

      let separatorIndex = line.indexOf(']');
      if (separatorIndex === -1) continue;

      let timePart = line.substring(1, separatorIndex);
      let lyric = line.substring(separatorIndex + 1) || '';

      result.push({
            time: parseTime(timePart),
            word: lyric.trim() || ' '
      });
    }

    function parseTime(lrcTime) {
      lrcTimeArr = lrcTime.split(":")
      return +lrcTimeArr * 60 + +lrcTimeArr;
    }

    function getIndex() {
      let Time = doms.audio.currentTime;
      for (let i = 0; i < result.length; i++) {
            if (result.time > Time) {
                return i - 1;
            }
      }
    }

    function createElements() {
      let frag = document.createDocumentFragment();
      for (let i = 0; i < result.length; i++) {
            let li = document.createElement("li");
            li.innerText = result.word;
            frag.appendChild(li);
      }
      doms.ul.appendChild(frag);
    }
    createElements();

    let containerHeight = doms.container.clientHeight;
    let liHeight = doms.ul.children.clientHeight;
    let minOffset = 0;
    let maxOffset = doms.ul.clientHeight - containerHeight;

    function setOffset() {
      let index = getIndex();
      let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
      if (offset < minOffset) {
            offset = minOffset;
      };
      if (offset > maxOffset) {
            offset = maxOffset;
      };
      doms.ul.style.transform = `translateY(-${offset}px)`;

      let li = doms.ul.querySelector(".active")
      if (li) {
            li.classList.remove("active");
      }

      li = doms.ul.children;
      if (li) {
            li.classList.add("active");
      }
    };

    function updateProgress() {
      const currentTime = doms.audio.currentTime;
      const duration = doms.audio.duration;
      const progress = (currentTime / duration) * 100;
      doms.progressBar.style.width = `${progress}%`;
      doms.currentTime.textContent = formatTime(currentTime);
      doms.totalTime.textContent = formatTime(duration);
    }

    function formatTime(time) {
      const minutes = Math.floor(time / 60);
      const seconds = Math.floor(time % 60);
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    }

    doms.progress.addEventListener('click', (e) => {
      const rect = doms.progress.getBoundingClientRect();
      const clickX = e.clientX - rect.left;
      const progress = (clickX / doms.progress.offsetWidth);
      const newTime = progress * doms.audio.duration;
      doms.audio.currentTime = newTime;
    });

    doms.gl.onclick = () => {
      const audio = document.getElementById('audio');
      const videos = document.querySelectorAll('video');
      const Img = document.getElementById('Img');

      if (audio.paused) {
            audio.play();
            videos.forEach(v => v.play());
            Img.style.opacity = '0.9';
      } else {
            audio.pause();
            videos.forEach(v => v.pause());
            Img.style.opacity = '0';
      }
    };

    doms.audio.addEventListener("timeupdate", setOffset);
    doms.audio.addEventListener("timeupdate", updateProgress);
    doms.audio.addEventListener("loadedmetadata", updateProgress);
</script>

霜染枫丹 发表于 2025-12-17 20:15

https://ff.xiaoqiaodali.top:5401/i/2025/12/17/694277a68b469.gif


尺素迟
歌手:薛小七
发行日期:2025-12-05
词曲：薛小七
制作人：薛小七
尺素蒙尘浸三春
枯折沉霜锈蝶纹
拆得鱼信三更枕
未读泪已折皱纹
别后锦字读几轮
墨痕入骨刻年轮
青鹊衔月入残更
半幅昏黄藏未赠
相思落款总是迟
南雁北归不识痴
烛火燃尽未完诗
一页春秋两行湿
铜镜斑驳照影深
鬓雪偷染旧时晨
褪色香囊藏药引
当年诀别半字温
朱砂晕染旧笔锋
残云裁作寄远封
风敲竹节惊空樽
落款迟迟向烟烽
天涯路尽烟波迟
蓬山雾锁未寄痴
蜡炬垂首守残纸
万里山河一豆炽
驿道苔痕漫青聪
叠嶂截断离人梦
竹筒空悬廿四孔
岁岁寒露敲玲珑
八行书里光阴迟
关山渡罢始觉痴
灰烬蜷成红豆痣
墨色褪作掌中刺

梦油 发表于 2025-12-17 20:38

欣赏精彩作品，问候霜染枫丹。

小九 发表于 2025-12-17 20:41

帖子很有意境，氛围感随着音律不断增强，特效也太好看了。

霜染枫丹 发表于 2025-12-17 20:47

梦油 发表于 2025-12-17 20:38
欣赏精彩作品，问候霜染枫丹。

梦老晚上好~~感谢您的支持鼓励，祝您冬安！！{:4_204:}{:4_190:}

霜染枫丹 发表于 2025-12-17 20:49

小九 发表于 2025-12-17 20:41
帖子很有意境，氛围感随着音律不断增强，特效也太好看了。

谢谢小九的支持，图片视频都是AI生成的，特别方便。小九辛苦了，祝冬安！{:4_204:}{:4_190:}

梦油 发表于 2025-12-17 20:52

霜染枫丹 发表于 2025-12-17 20:47
梦老晚上好~~感谢您的支持鼓励，祝您冬安！！

枫丹朋友别客气。

樵歌 发表于 2025-12-17 21:48

画面意境特别契合这国风歌曲的意味，选 的这首歌我第一次听到，被 深深的吸引了！{:4_178:}前面开头埙声沉郁苍凉，非常有味的前奏。唱得非常有韵味。这种罗风歌曲我没学过，唱不来。{:4_201:}

小辣椒 发表于 2025-12-17 21:49

问好枫丹老师，欣赏漂亮的播放器背景，音乐有听到，不知道是不是我浏览器问题，没有看见播放器进度条走动

霜染枫丹 发表于 2025-12-17 22:00

樵歌 发表于 2025-12-17 21:48
画面意境特别契合这国风歌曲的意味，选 的这首歌我第一次听到，被 深深的吸引了！前面开头埙声沉 ...

欢迎小樵哥~~晚上好！这首歌是本月5号发布的，我一听就很喜欢。-虽然都是DZ论坛，在模板上还是有差异，在花潮歌词不能显示，在中画就显示的很好。我的水平没找到办法解决，就听歌了。

谢谢小樵哥的鼓励恭祝冬安！！{:4_204:}{:4_190:}

霜染枫丹 发表于 2025-12-17 22:03

小辣椒 发表于 2025-12-17 21:49
问好枫丹老师，欣赏漂亮的播放器背景，音乐有听到，不知道是不是我浏览器问题，没有看见播放器进度条走动

我整不明白咱们论坛和中画网不同在哪里，怎么解决，您打开我给您的网址看看，在中画一切正常，其他网站也正常那个，但在这里不行，

http://yinhuabbs.cn/forum.php?mod=viewthread&tid=262685&extra=page%3D1

霜染枫丹 发表于 2025-12-17 22:11

小辣椒 发表于 2025-12-17 21:49
问好枫丹老师，欣赏漂亮的播放器背景，音乐有听到，不知道是不是我浏览器问题，没有看见播放器进度条走动

同样的代码在花潮该怎样发帖才能正常。我遇到的这不是一次。，在dz3.5论坛正常，中画网是连首页都不要了，也是能正常显示，在花潮是3.4的模。我来得晚，不清楚差别在哪里。播放器代码我就是来到这里才跟马老师的帖子学的，还请您给指点一二，先谢了！{:4_204:}{:4_190:}{:4_178:}

小辣椒 发表于 2025-12-17 22:12

霜染枫丹 发表于 2025-12-17 22:03
我整不明白咱们论坛和中画网不同在哪里，怎么解决，您打开我给您的网址看看，在中画一切正常，其他网站也 ...

我也是不知道别人是不是和我一样的情况，明天换浏览器欣赏了再说，几天太迟了

杨帆 发表于 2025-12-17 22:46

歌曲新颖，画面惊艳，效果漂亮，谢谢枫丹精彩分享{:4_204:}

霜染枫丹 发表于 2025-12-17 23:02

杨帆 发表于 2025-12-17 22:46
歌曲新颖，画面惊艳，效果漂亮，谢谢枫丹精彩分享

感谢杨帆发支持，晚上好！刚学着做，得多做点免得过几天又不会了{:4_204:}{:4_190:}了

杨帆 发表于 2025-12-17 23:10

霜染枫丹 发表于 2025-12-17 23:02
感谢杨帆发支持，晚上好！刚学着做，得多做点免得过几天又不会了了

对，动手做是根治遗忘的妙药{:4_190:}

樵歌 发表于 2025-12-18 08:10

小辣椒 发表于 2025-12-17 21:49
问好枫丹老师，欣赏漂亮的播放器背景，音乐有听到，不知道是不是我浏览器问题，没有看见播放器进度条走动

你帮大姐调整一下呗，都知道你是高手{:4_197:}

樵歌 发表于 2025-12-18 08:14

霜染枫丹 发表于 2025-12-17 22:00
欢迎小樵哥~~晚上好！这首歌是本月5号发布的，我一听就很喜欢。-虽然都是DZ论坛，在模板上还是有差异，在 ...

花潮是窄屏，可能是代码设置问题，等小辣椒空了你们交流一下试，我们为何不改宽屏呢，因为当初只有窄屏的模版，现在再改可费事了。。。。

红影 发表于 2025-12-18 17:07

好听，歌词带有古风味道，很雅致。
欣赏丹枫好帖{:4_187:}

霜染枫丹 发表于 2025-12-18 21:13

樵歌 发表于 2025-12-18 08:14
花潮是窄屏，可能是代码设置问题，等小辣椒空了你们交流一下试，我们为何不改宽屏呢，因为当初只有窄屏的 ...

小樵哥晚上好~~感谢您的支持，晚上好~~{:4_204:}{:4_190:}

查看完整版本: 尺素迟 套用马老师代码