小辣椒 发表于 2026-8-28 20:49

蓝眼泪 帖赠：辫子哥哥 （ 套用学习黑黑壳外播放器效果）

<meta charset="UTF-8">
<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   .pa {top:70px;--offsetX: 81px; --bg: url('https://xlaj.cn/upfile/2026/08/26/0F.jpg') no-repeat center/cover; color: lightblue; perspective: 1000px; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: -125px; right: 20px; }
    .mpic-wrap {
      position: absolute;
      bottom: 65px;
      width: 80px;
      height: 120px;
      transform-style: preserve-3d;
      filter: drop-shadow(10px 10px 6px rgba(0,0,0,.95));
    }
    .mpic {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      transition: 1s;
    }
    .mpic img { width: 100%; height: 100%; }
    .mpic:nth-of-type(2) { transform: rotateY(-180deg); }
    .mpic-wrap:hover .mpic:nth-of-type(1) { transform: rotateY(180deg); }
    .mpic-wrap:hover .mpic:nth-of-type(2) { transform: rotateY(0); }
    #lyric {
      position: absolute;
      top: 20%;
      left: 65%;
      transform: translateX(-65%);
      font: normal 1.6em Microsoft YaHei, sans-serif;
      font-weight: bold;
      white-space: nowrap;
      pointer-events: none;
      z-index: 9999;
      color: rgba(255,255,255,0.3);
      background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-mask-image: linear-gradient(to right, #000 0%,#000 0%,transparent 0%);
      mask-image: linear-gradient(to right, #000 0%,#000 0%,transparent 0%);
    }
    .pd-vid{
      position:absolute;
      width:100%;
      height:100%;
      object-fit:cover;
    }
</style>
<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2418175/00/02/04/5b5085d637d83.mp4 " autoplay loop muted></video>
    <div class="mpic-wrap">
      <div class="mpic">
            <img src="https://xlaj.cn/upfile/2026/08/26/ann.gif" />
      </div>
      <div class="mpic">
            <img id="p1" class="rot" src="https://xlaj.cn/upfile/2026/08/26/9.png" />
      </div>
    </div>
    <div id="lyric"></div>
</div>
<script>
var options = {
    pa: '.pa',
    urls: [['https://xlaj.cn/upfile/2026/08/26/01.mp3', '《蓝眼泪》']],
    btns: ,
};
const songLrc = [
`《蓝眼泪》
演唱：杨蔓         
我已经好几天
深夜不能眠
都为了谁
我只是心疼你
哭肿的双眼
多可怜
如果情已决裂
你伤心欲绝
他没感觉
他早已空了心
对你的深情
都看不见
取一瓢深蓝色苦苦的湖水
化成一滴蓝色的眼泪
滴落在你眉间能解开情结
还会让你 心如止水
你不再对他痴恋
苦守整个夜
魂萦梦牵
深蓝色的眼泪
也让你失去
爱的感觉
--- Music ---
我已经好几天
深夜不能眠
都为了谁
我只是心疼你
哭肿的双眼
多可怜
如果情已决裂
你伤心欲绝
他没感觉
他早已空了心
对你的深情
都看不见
取一瓢深蓝色苦苦的湖水
化成一滴蓝色的眼泪
滴落在你眉间能解开情结
还会让你 心如止水
你不再对他痴恋
苦守整个夜
魂萦梦牵
深蓝色的眼泪
也让你失去
爱的感觉
取一瓢深蓝色苦苦的湖水
化成一滴蓝色的眼泪
滴落在你眉间能解开情结
还会让你 心如止水
你不再对他痴恋
苦守整个夜
魂萦梦牵
深蓝色的眼泪
也让你失去
爱的感觉
谢谢欣赏
`,
];
function parseLines(text){
    const out=[];
    text.trim().split('\n').forEach(l=>{
      const m=l.match(/^\[(\d+):(\d+\.\d+)\]\s*(.*)$/);
      if(!m)return;
      out.push({ t: +m*60 + +m, txt: m });
    });
    return out;
}

let aud;
let lyricEl = document.getElementById('lyric');
let curIdx = -1;
let rafId = null;
let lines = [];

function loadJs(u,cb){
    var s=document.createElement('script');
    s.src=u;
    s.onload=cb;
    document.head.appendChild(s);
}

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

function tzRun() {
    aud = new AudPlayer(options);
    updateCurrentLrc();

    aud.aud.addEventListener('play', () => {
      if(!rafId) rafId = requestAnimationFrame(renderMask);
    });
    aud.aud.addEventListener('pause', () => {
      cancelAnimationFrame(rafId);
      rafId = null;
    });
    aud.aud.addEventListener('loadeddata', function(){
      curIdx = -1;
      cancelAnimationFrame(rafId);
      rafId = null;
      lyricEl.style.webkitMaskImage = lyricEl.style.maskImage =
            'linear-gradient(to right,#000 0%,#000 0%,transparent 0%)';
      updateCurrentLrc();
      rafId = requestAnimationFrame(renderMask);
    });
    aud.aud.addEventListener('ended', ()=>{
      lyricEl.style.webkitMaskImage = lyricEl.style.maskImage =
            'linear-gradient(to right,#000 0%,#000 0%,transparent 0%)';
      curIdx = -1;
      cancelAnimationFrame(rafId);
      rafId=null;
    });
    rafId = requestAnimationFrame(renderMask);
}

function updateCurrentLrc(){
    const nowSrc = aud.aud.src;
    let idx = 0;
    for(let i=0; i<options.urls.length; i++){
      if(options.urls === nowSrc){
            idx = i;
            break;
      }
    }
    lines = parseLines(songLrc);
    for(let i=0; i<lines.length; i++){
      lines.tEnd = (i+1 < lines.length) ? lines.t : (lines.t + 4);
    }
    curIdx = -1;
}

function renderMask(){
    if(!aud || !aud.aud) return;
    const t = aud.aud.currentTime;
    let i = curIdx;
    if(i<0 || t<lines.t || t>=lines.tEnd){
      for(i=lines.length-1; i>=0; i--){
            if(t>=lines.t) break;
      }
      if(i!==curIdx && i>=0){
            lyricEl.textContent = lines.txt;
            curIdx = i;
      }
      if(i<0){
            lyricEl.style.webkitMaskImage = lyricEl.style.maskImage =
                'linear-gradient(to right,#000 0%,#000 0%,transparent 0%)';
            curIdx = -1;
      }
    }
    if(curIdx>=0){
      const seg = lines;
      const dur = Math.max(seg.tEnd - seg.t, 0.01);
      const p = Math.min(Math.max((t - seg.t)/dur, 0), 1);
      const percent = (p*100).toFixed(2)+'%';
      lyricEl.style.webkitMaskImage = lyricEl.style.maskImage =
            `linear-gradient(to right,#000 0%,#000 ${percent},transparent ${percent})`;
    }
    rafId = requestAnimationFrame(renderMask);
}
</script>

小辣椒 发表于 2026-8-28 20:49

不用艾特辫子哥哥了，已经发他听过了

小辣椒 发表于 2026-8-28 20:52

@马黑黑

黑黑套用学习做一个，你的那种辅助小播实现方法小辣椒还不会，直接套用了一个动图 一个静态的辫子哥哥的头像{:4_170:}

小辣椒 发表于 2026-8-28 20:52

加了歌词同步上去，感谢黑黑源码分享{:4_187:}

知道我这个帖加了歌词代码有错误出现，我的全屏欣赏和小播的静态图停止和打开文字都是乱码{:4_198:}

玫瑰 发表于 2026-8-28 21:00

精彩的分享，美图欣赏。{:4_191:}

魏淑芬 发表于 2026-8-28 21:01

欣赏精美佳作，点赞！那个小播好有趣哦。{:4_204:}

玫瑰 发表于 2026-8-28 21:02

一动一静，创意十足。

马黑黑 发表于 2026-8-28 21:36

瓢酿

红影 发表于 2026-8-28 22:44

还有辫子哥哥的头像呢，这个赠送很明确，制作也很漂亮。
欣赏亲爱的好帖，辫子手里开心{:4_199:}

梦江南 发表于 2026-8-29 19:49

黑黑老师，只有小辣椒才能把老师的代码精髓发挥到极致。

梦江南 发表于 2026-8-29 19:51

很漂亮的音画，辫子老师收礼开心！{:4_199:}

杨帆 发表于 2026-8-29 21:14

漂亮~欣赏小辣椒好制作，祝辫子哥哥收礼开心{:4_190:}

辫子哥哥 发表于 2026-8-30 14:22

最帅气的头像做了小播{:4_170:}

辫子哥哥 发表于 2026-8-30 14:22

听歌{:4_208:}

辫子哥哥 发表于 2026-8-30 14:23

好听，感谢，我确实忙的脚都要提起来了{:4_170:}

辫子哥哥 发表于 2026-8-30 14:24

过几天唱首歌回个礼{:4_208:}

辫子哥哥 发表于 2026-8-30 14:26

红影 发表于 2026-8-28 22:44
还有辫子哥哥的头像呢，这个赠送很明确，制作也很漂亮。
欣赏亲爱的好帖，辫子手里开心

谢谢，不是手里开心{:4_170:}

辫子哥哥 发表于 2026-8-30 14:26

梦江南 发表于 2026-8-29 19:51
很漂亮的音画，辫子老师收礼开心！

谢谢梦江南美女{:4_187:}

辫子哥哥 发表于 2026-8-30 14:26

杨帆 发表于 2026-8-29 21:14
漂亮~欣赏小辣椒好制作，祝辫子哥哥收礼开心

谢谢杨帆{:4_187:}

梦江南 发表于 2026-8-30 14:36

辫子哥哥 发表于 2026-8-30 14:26
谢谢梦江南美女

期待着辫子老师唱歌{:4_204:}
页: [1] 2
查看完整版本: 蓝眼泪 帖赠：辫子哥哥 （ 套用学习黑黑壳外播放器效果）