论坛 › 欢乐水吧 › 昨夜你在梦里出现(遗憾版)-顾语涵

亚伦影音工作室 发表于 2026-4-20 11:08

昨夜你在梦里出现(遗憾版)-顾语涵

本帖最后由 亚伦影音工作室 于 2026-4-21 09:29 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa{margin: 10px -250px;
        width: 1186px;
        height: 680px;
        background:#000 url() no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #eee, 0px 0px 0px 8px #ddd;
        position: relative;overflow: hidden;
        z-index: 12345;}

#d{width: 45% ;height: 45%;position:absolute;left: 52%; top:75%;z-index: 2;}
#source{width: 100% ;}

#d1{width:100%;height: 100%;position:absolute;left: 0%; top:0%;z-index: -1;animation: rota 6s linear infinite;background-size : contain}
#source1{width:100%;height: 100%;border-radius: 0%;}
#d2{width:100%;height:100%;position:absolute;left: 0%; top:0%;z-index: 1;mix-blend-mode: lighten;}
#source2{width:100%;height: 100%;}
#an{width: 20px ;height: 20px;position:absolute;left: 8%; top:9%;z-index: 199;background: url("https://pic1.imgdb.cn/item/69e342d1214d2a8a53d705f8.png") no-repeat center/cover;animation: rota 1s linear infinite ;cursor: pointer;}
@keyframes rota {to { filter: hue-rotate(360deg); }}
.lrc { z-index: 21; position: relative; top: 20%; left: 1%; width: 600px; height: 450px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 15%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(255,255,255,.6) 85%,rgba(255,255,255,0) 100%);}
.lrc #ul { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
.lrc #ul li { color: #ccc; font: 300 20px "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-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; cursor: pointer; }
.lrc #ul li.active { transform: scale(1.2); color: #fff000; font-weight: 300; }
#player{position:absolute;top: 17%;z-index: 199;
            left: 120px;
width: 60px;
height: 60px;border-radius: 50px;
display: grid;background:#00ff00 url("https://pic1.imgdb.cn/item/680f595158cb8da5c8d2561a.png") no-repeat center/cover;
        place-items: center;animation: rot 8s linear infinite ;cursor: pointer;}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#fullscreen{border-radius: 4px;position: absolute;
color:#ccc;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 120;
font: 300 20px "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";
border: none;
cursor: pointer;top: 15px;left: 3%;
}

</style>
<divid="papa">
<div id="fullscreen" title="屏展模式">全屏欣赏</div>
<div id="d"><img   id="source" src="https://pic1.imgdb.cn/item/6772411ed0e0a243d4ec7926.gif"><div id="player"title="暂停/播放"></div><div id="an" title="暂停/播放"></div></div>
<divid="d1"><imgid="source1"src="https://pic1.imgdb.cn/item/69e5906a01316fbabf2c8137.gif"></div>

<divid="d2"><imgid="source2"src="https://pic1.imgdb.cn/item/69e59d0b01316fbabf2ca07c.gif"></div>
<div class="lrc">
            <ul id="ul"></ul>
      </div>

</div>
<audio id="aud" src="https://img2.oldkids.cn/upload/2026/04/20/blog_260855907_20260420105013700.mp3" loop autoplay ></audio>

<script>
const renderGif = function (dom) {
    if (!dom || !dom.src) {
      return;
    }
    // gif图片的url地址
    const src = dom.src;

    // 创建的用来播放gif的canvas元素
    const canvas = document.createElement('canvas');
    const context = canvas.getContext("2d");

    // 一些与GIF播放有关的变量
    let imageDecoder = null;
    let imageIndex = 0;
    let paused = false;

    // 绘制方法
    const renderImage = function (result) {
      context.drawImage(result.image, 0, 0);

      const track = imageDecoder.tracks.selectedTrack;

      // 如果播放结束，从头开始循环
      if (imageDecoder.complete) {
            if (track.frameCount === 1) {
                return;
            }

            if (imageIndex + 1 >= track.frameCount) {
                imageIndex = 0;
            }
      }

      // 绘制下一帧内容
      imageDecoder
            .decode({ frameIndex: ++imageIndex })
            .then((nextResult) => {
                if (paused === false) {
                  setTimeout(() => {
                        renderImage(nextResult);
                  }, result.image.duration / 1200.0);
                } else {
                  canvas.nextResult = nextResult;
                }
            })
            .catch((e) => {
            // imageIndex可能超出的容错处理
            if (e instanceof RangeError) {
                imageIndex = 0;
                imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);
            } else {
                throw e;
            }
      });
    };

    // 判断地址能够请求
    fetch(src).then((response) => {
      // 可以请求，进行样式处理
      // 设置canvas尺寸
      canvas.width = dom.naturalWidth;
      canvas.height = dom.naturalHeight;
      // 实际显示尺寸
      canvas.style.width = dom.clientWidth + 'px';
      canvas.style.height = dom.clientHeight + 'px';
      // 隐藏图片，显示画布
      dom.after(canvas);
      dom.style.position = 'absolute';
      dom.style.opacity = '0';

      // 将GIF绘制在canvas上
      imageDecoder = new ImageDecoder({
            data: response.body,
            type: "image/gif"
      });
      // 解析第一帧并绘制
      imageDecoder.decode({
            frameIndex: imageIndex
      }).then(renderImage);

    });

    // 事件绑定处理
canvas.addEventListener,dom.addEventListener('ended',function () {
      if (paused) {
            paused = false;
            renderImage(canvas.nextResult);
      } else {
            paused = true;
      }

    });

an.addEventListener('click', function () {
      if (paused) {aud.play();d1.style.animationPlayState =an.style.animationPlayState =player.style.animationPlayState = 'running';
paused = false;
            renderImage(canvas.nextResult);
      } else {aud.pause();d1.style.animationPlayState =an.style.animationPlayState =player.style.animationPlayState = player.style.animationPlayState = 'paused'; paused = true;
      }
    });

player.addEventListener('click', function () {
      if (paused) {aud.play();d1.style.animationPlayState =an.style.animationPlayState =player.style.animationPlayState = 'running';
paused = false;
            renderImage(canvas.nextResult);
      } else {aud.pause();d1.style.animationPlayState =an.style.animationPlayState =player.style.animationPlayState = player.style.animationPlayState = 'paused';paused = true;
      }
    });
   
};
    renderGif(source); renderGif(source1);renderGif(source2);
</script>

<script>
(function() {
      let lrc = `
昨夜你在梦里出现(遗憾版)-顾语涵
词：周亦安
曲：周亦安
编曲：SN/周亦安
统筹：高七七
制作人：周亦安
【未经著作权人许可不得翻唱翻录或使用】
曾经的誓言还在耳边
如今却只剩回忆蔓延
我徘徊在这思念边缘
找不回那遗失的从前
曾经以为爱不会改变
最后我们却渐行渐远
说过的誓言还在耳边
可惜你已不在我身边
昨夜梦里又与你相见
醒来后泪水湿了枕边
曾经说好相伴到永远
为何最后只剩我留念
昨夜梦里又与你相见
多希望时光能够重演
回到我们相拥的瞬间
可惜一切都早已走远
曾经以为爱不会改变
最后我们却渐行渐远
说过的誓言还在耳边
可惜你已不在我身边
昨夜梦里又与你相见
醒来后泪水湿了枕边
曾经说好相伴到永远
为何最后只剩我留念
昨夜梦里又与你相见
多希望时光能够重演
回到我们相拥的瞬间
可惜一切都早已走远


`;
      let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#aud");
      var ul = document.querySelector("#ul");
      var container = document.querySelector(".lrc");

      for (let i = 0; i < lrcArr.length; i++) {
            var lrcData = lrcArr.split(']');
            if (lrcData.length < 2) continue;
            var lrcTime = lrcData.substring(1);
            var obj = {
                time: parseTime(lrcTime),
                word: lrcData.trim()
            }
            result.push(obj);
      }

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

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

      function createElements() {
            let fragment = document.createDocumentFragment();

            for (let i = 0; i < result.length; i++) {
                let li = document.createElement("li");
                li.innerText = result.word;

                li.addEventListener("click", function () {
                  audio.currentTime = result.time;
                  setOffset();
                });

                fragment.appendChild(li);
            }

            ul.appendChild(fragment);
      }

      createElements();
      let containerHeight = container.clientHeight;
      let liHeight = ul.children?.clientHeight || 50;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;

      function setOffset() {
            const index = getIndex();
            if (index < 0) return;

            const liHeight = ul.children?.clientHeight || 50;
            let offset = liHeight * index - containerHeight / 2 + liHeight / 2;

            offset = Math.max(minOffset, Math.min(offset, maxOffset));

            ul.style.transform = `translateY(${-offset}px)`;

            ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
            if (index < ul.children.length) {
                ul.children.classList.add('active');
            }
      }

      audio.addEventListener("timeupdate", setOffset);
})();

let fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
                papa.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };

</script>

梦油 发表于 2026-4-20 11:09

欣赏佳作，问候亚伦。

红影 发表于 2026-4-20 21:00

漂亮，还在那音响上弄了两个小播呢，变色频谱也很漂亮。
所有动画能逐帧暂停。
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2026-4-20 21:01

可能因为这个底图小了点的缘故？全屏时候两个小播都和音响位置有点错位呢{:4_173:}

杨帆 发表于 2026-4-20 21:09

制作精致，效果精美，谢谢亚伦老师精彩分享{:4_190:}

查看完整版本: 昨夜你在梦里出现(遗憾版)-顾语涵