论坛 › 欢乐水吧 › 我听过你的歌

亚伦影音工作室 发表于 2026-5-28 11:14

我听过你的歌

本帖最后由 亚伦影音工作室 于 2026-5-31 11:05 编辑 <br /><br /><style>
@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
#papa { margin: 10px -300px ; width: 1186px; height: 620px;background:#800000; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #800000; position: relative; z-index: 10000; overflow:hidden;border-radius: 0px 0px;--state: running;/**/}
#pie{width: 100%; height: 100%;z-index: 1;
position:absolute;
top:0%; left:0%;background:url(https://upfile.mp3.wf/view.php/fb2af5737a0a4cb21a833b6a1773c22b.png) no-repeat center/cover;
object-fit: cover; pointer-events: none;
}
#d{width: 25% ;height: 25%;position:absolute;left: 23%; top:68%;z-index: 2;}
#source{width: 100% ;border-radius: 20px;}
#d1{width: 45% ;height: 45%;position:absolute;left: 56%; top:18%;z-index: 2; mix-blend-mode: multiply; }
#source1{width: 100% ;}
#wrapper {
                position: absolute;
                padding: 0px;
                font-weight:200;font-size:2.8em;font-family:"方正粗黑宋简体", "KaiTi","Liu Jian Mao Cao","Ma Shan Zheng","STKaiti","SimHei",   cursive, serif;
                filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
writing-mode: vertical-lr;white-space: pre;transform: translateX(-50%);text-align: center;
      width: 60px;height:90%;left: 90%;z-index: 20;
                top: 0;white-space: nowrap;
        }
        .char {
                display: inline-block;
                padding: 2px 0px;
                opacity: 0;
                transform: translate(var(--x), var(--y))rotate(-720deg) ;
                animation: fadeIn 1.5s var(--delay) forwards,flash 0.5s linear infinite;
        }
       
        @keyframes fadeIn {
                100% {
                        transform: translate(0, 50%);
                        opacity: 1;
                }

        }
        @keyframes flash {
                100% {filter: hue-rotate(360deg);}

        }
        .stop .char{animation-play-state: paused;}

#player {top:152px; left:196px;position: absolute;width:100px; height: 60px;cursor: pointer; z-index: 200;transition: all 1s;}
#cndpt{position: absolute; width:50px; height: 19px; opacity:1;border-radius: 2px;
   background: url(https://pic1.imgdb.cn/item/69edf790f12344047bf53199.png)no-repeat center/cover;}
#enopg{ position: absolute;width:50px; height: 19px;opacity:0;border-radius: 2px;
   background: url(https://pic1.imgdb.cn/item/69edf789f12344047bf53197.png)no-repeat center/cover;)
}
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;   bottom:22px; cursor: pointer;right:94%;z-index: 140;}

#qp{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#tc{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="papa">
<div id="pie"></div>
<div id="d"><img   id="source" src="https://pic1.imgdb.cn/item/69ea02fd022557d116e035bb.gif"> <div id="player">
<div id="cndpt"></div>
<div id="enopg"></div>
</div></div>
<div id="d1"><img   id="source1" src="https://pic1.imgdb.cn/item/6a1ad7b8172c6dd74dd5e8ff.gif"></div>



<div id="testImg" >
<div id="wrapper"></div>
</div>
<span id="fullscreen" title="/">
<div id="qp"></div>
<div id="tc" ></div>
</span>

<audio id="aud"autoplay loop >
            <source src="https://upfile.mp3.wf/view.php/3934f24aafcf749b48b22fdd243d2a1a.mp3" type="audio/mpeg">
         </audio>
</div>
<script>
player.onclick = () => aud.paused ? (aud.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1',image.classList.remove('stop')) : (aud.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0',image.classList.add('stop'));
letimage=document.getElementById('testImg');
let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),qp.style.opacity= '0',tc.style.opacity = '1') : ( document.exitFullscreen(),qp.style.opacity = '1',tc.style.opacity = '0');
      fs = !fs;
}
</script>

<script>
       
const gc = `我听过你的歌
亚伦影音
我听过你的歌我的大哥哥
我明白你的心你的喜怒哀乐
我是否可以问问问你的姓名
因为你是我的知音
我又多一个朋友
我并不在乎你记住我的姓名
我只想听到你的新歌你的声音
我衷心谢谢你的厚爱你的真情
我会把这一个瞬间用音乐来送给你
愿你的声音永远伴我的左右
我一定尽力
用最美好的旋律伴你左右
呜
伴你左右
伴我左右
我听过你的歌我的大哥哥
我祝你万事如意天天快乐
我衷心谢谢你的厚爱你的真情
我会把这一个瞬间用音乐来送给你
我听过你的歌我的大哥哥
我祝你万事如意天天快乐

`;

      const gcAr = lrc2HC(gc);
      let curkey = 0, isSeeking = false;

      aud.ontimeupdate = () => {
                if(curkey > gcAr.length - 1) return;
                if(aud.currentTime >= gcAr) {
                        const gap = gcAr?. ?? 0 - gcAr;
                        showLrc(gcAr, wrapper, gap);
                }
      };

      aud.onended = () => {
                curkey = 0;
                aud.play();
      }

      aud.onseeked = () => calcKey();

      function lrc2HC(text) {
                let lrcAr = [];
                let ar = text.trim().split('\n');
                ar.sort();
                let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
                ar.forEach(item => {
                        if(reg.test(item)) {
                              let result = item.match(reg);
                              let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                              lrcAr.push(.trim()]);
                        }
                });
                return lrcAr ? lrcAr : ;
      };

      function calcKey() {
                for (let j = 0; j < gcAr.length; j++) {
                        if (aud.currentTime <= gcAr) {
                              curkey = j - 1;
                              break;
                        }
                }
                if (curkey < 0) curkey = 0;
                if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
                let time = gcAr?. ?? 0 - gcAr;
                isSeeking = false;
                showLrc(gcAr, wrapper, time);
      }

      function showLrc(str, targetElm, time) {
                if(isSeeking) return;
                targetElm.innerHTML = '';
                const chars = str.split('').map(c => c === ' ' ? ' ' : c);
                const frg = document.createDocumentFragment();
                chars.forEach((char, idx) => {
                        const span = document.createElement('span');
                        span.innerHTML = char;
                        span.classList.add('char');
                        const x = Math.random() * (Math.random() > 0.5 ? -1000 : -1000);
                        const y = Math.random() * (Math.random() > 0.5 ? 600: -600);
                        span.style.cssText += `
                              color: #${Math.random().toString(15).substring(2,8)};
                              --x: ${x}px;
                              --y: ${y}px;
                              --delay: ${Math.random() * 0.5}s;
                        `;
                        frg.appendChild(span);
                });
                targetElm.appendChild(frg);
                curkey ++;
                setTimeout(() =>isSeeking = false, time);
      }
</script>
<script>
const renderGif = function (dom) {
   
    // 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 / 1000);
                } 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);
    });

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

player.addEventListener('click', function () {
      if (paused) {
            paused = false;
            renderImage(canvas.nextResult);
      } else {
          paused = true;
      }
    });

};

    renderGif(source); renderGif(source1);
</script>

杨帆 发表于 2026-5-28 15:39

很喜欢的一首歌曲，谢谢亚伦老师精彩分享{:4_190:}

查看完整版本: 我听过你的歌