论坛 › 欢乐水吧 › 蓝眼泪 - 半吨兄弟

亚伦影音工作室 发表于 2024-5-6 09:13

蓝眼泪 - 半吨兄弟

本帖最后由 亚伦影音工作室 于 2024-5-24 17:52 编辑 <br /><br /><style>
#papa {margin: 130px -300px;
      width: 1164px;
      height: 640px;
      background:#000 url(https://pic.imgdb.cn/item/65d054f19f345e8d033bcf14.jpg)no-repeat center/cover;
      box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
      position: relative;overflow: hidden;
      z-index: 12345;
}

#bjdt{position: absolute;top:0px; left:0px;z-index:3;width: 1164px;height: 640px;;}
#bjdt img{position: absolute;top:0px; left:0px;z-index:3;width: 1164px;height: 640px;}
#canv { position: absolute;z-index:6; }
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 50%; top: 500px;transform: translate(-50%);font:normal 2.8em 华文新魏; font-weight:400;color: #000080;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
#bfqbj {margin: 410px 20px;
        width: 300px;
        height: 90px;background: url(https://)no-repeat center/cover;
        position: absolute;overflow: hidden;
        z-index: 12345;}
#dt{position: absolute;top:5px; left:5px;width: 269px;height: 77px;z-index:3; }
#dt img{width: 100%;}
#pinpu{position: absolute;top:10px; left:245px;width: 10px;height: 15px;z-index:3; }
#pinpu img{width: 100%;}
#lb{position: absolute;top:55px; left:200px;width: 35px;height: 16px;z-index:3; background: #333 }
#lb img{width: 55%;}
#mplayer {z-index: 80;
        position: absolute;
        top:0px; left:0px;
        bottom: 0px;
        width: 30px;
        height: 30px;
       
        opacity: 1;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #eeeeee;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 152px;bottom: -40px;
        border-width: 7px 8px;
        border-color: transparent transparent transparent #eeeeee;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 3px;
        height: 12px;bottom: -39px;
                left: 126px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
      color: #000;font: bold 18px/22px '微软雅黑',serif;
      bottom: 50px;
      left:105px;}
#prog {position: absolute;z-index: 91;
      width: 162px;
      height: 1px;
      cursor: pointer;
         bottom: 40px;
left:91px;
border-radius: 2px;}
#bt{ --w: 50%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:500px;top:20px;font-size: 25px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 16s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>

<div id="papa">
<div id="bjdt"><img id="bjtu" src="https://s1.krakenfiles.com/uploads/05-05-2024/JdSgNrUkfh/image.gif" ></div>
<div id="bfqbj">
<div id="dt"><img id="tu" src="https://pic.imgdb.cn/item/66360f120ea9cb1403dc1984.gif" ></div>
<div id="pinpu"><img id="pinputu" src="https://pic.imgdb.cn/item/665061bed9c307b7e97444e5.gif" ></div>
<div id="lb"><img id="tulb" src="https://pic.imgdb.cn/item/662615500ea9cb14035d435e.gif" ></div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer" title="暂停/播放"></div>
</div>
<canvas id="canv" width="1200" height="500"></canvas>
<div id="bt"> 蓝眼泪 - 半吨兄弟</div>
<div data-lrc="亚伦影音工作室" id="lrc" title="歌词显示">亚伦影音工作室</div>
</div>
<audio id="aud" src="https://songs.boonkiong.com/245018033.mp3" loop autoplay></audio>

<script >
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? (aud.play(),image.play(),imagelb.play(),imagebj.play(),imagepinpu.play()): (aud.pause(),image.stop(),imagelb.stop(),imagebj.stop(),imagepinpu.stop()));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #fff, #fff, #fff ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });
let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };
bt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => bt.style.animationPlayState = 'running');
aud.addEventListener('pause', () => bt.style.animationPlayState = 'paused');

</script >

<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';imagelb.style.opacity = ''; imagebj.style.opacity = ''; imagepinpu.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}
var image= document.getElementById("tu");
var imagelb= document.getElementById("tulb");
var imagepinpu= document.getElementById("pinputu");
var imagebj= document.getElementById("bjtu");
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `蓝眼泪 - 半吨兄弟
作词Lyricist：李岩修
作曲Composer：徐嘉良
出品人Creator：亚伦
OP：E Voice Music Studio
SP：Universal Music Publishing CHINA
我已经好几天
深夜不能眠
都为了谁
我只是心疼你
哭肿的双眼
多可怜
取一瓢深蓝色苦苦的湖水
化成一滴
蓝色的眼泪
滴落在你眉间能解开情结
还会让你
心如止水
你不再对他痴恋
苦守整个夜
魂萦梦牵
取一瓢深蓝色苦苦的湖水
化成一滴
蓝色的眼泪
滴落在你眉间能解开情结
还会让你
心如止水
你不再对他痴恋
苦守整个夜
魂萦梦牵
~Music~
我已经好几天
深夜不能眠
都为了谁
我只是心疼你
哭肿的双眼
多可怜
取一瓢深蓝色苦苦的湖水
化成一滴
蓝色的眼泪
滴落在你眉间能解开情结
还会让你
心如止水
你不再对他痴恋
苦守整个夜
魂萦梦牵
取一瓢深蓝色苦苦的湖水
化成一滴
蓝色的眼泪
滴落在你眉间能解开情结
还会让你
心如止水
你不再对他痴恋
苦守整个夜
魂萦梦牵
☆谢谢欣赏☆
`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => { let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) { if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {ar = item > aver ? aver : item; });
return ar;};
/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
       let lrcAr = [];
      let calcRule = ;
       for(x of text.split('\n')) {
            let ar = [];
               let re = /\d+[\.:]\d+([\.:]\d+)?/g;
               let geci = x.replace(re,'');
               if(geci) {
                     geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                     if(time != null) {
                               for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                       let sec = 0;
                                       for(z in tmp) sec += tmp * calcRule;
                                       ar = ;
                                       lrcAr.push(ar);
                              }
                     }
                }
      }
      lrcAr.sort((a,b)=> a - b);
      return(lrcTime(lrcAr));
};
/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
      let name = mFlag ? 'cover1' : 'cover2';
       lrc.innerHTML = lrcAr;
      lrc.dataset.lrc = lrcAr;
      lrc.style.setProperty('--motion', name);
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
      mKey += 1;
       mFlag = !mFlag;
};
/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
               }
      }
       if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
       let time = lrcAr - (aud.currentTime - lrcAr);
      showLrc(time);
};
/*格式化时间信息*/
let toMin = (val) => {
      if (!val) return '00:00';
      val = Math.floor(val);
       let min = parseInt(val / 60),
      sec = parseFloat(val % 60);
       if (min < 10) min = '0' + min;
      if (sec < 10) sec = '0' + sec;
      return min + ':' + sec;
}
/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
         else continue;
       }
    }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();

/*波浪线*/
var ctx = canv.getContext('2d', {willReadFrequently: true});
var ww = canv.width, hh = canv.height, pixels = [];

for (var x = -400; x < 400; x += 5) {
    for (var z = -250; z < 250; z += 5) {
      pixels.push({ x: x, y: 100, z: z });
    }
}

let render = (ts) => {
    var imageData = ctx.getImageData(0, 0, ww, hh), len = pixels.length, fov = 250;
    var pixel, scale, x2d, y2d, c;
    for (var i = 0; i < len; i++) {
      pixel = pixels[ i ];
      scale = fov / (fov + pixel.z);
      x2d = pixel.x * scale + ww / 2;
      y2d = pixel.y * scale + hh / 2;
      if (x2d >= 0 && x2d <= ww && y2d >= 0 && y2d <= hh) {
            c = (Math.round(y2d) * imageData.width + Math.round(x2d)) * 4;
            imageData.data = 20;
            imageData.data = 200;
            imageData.data = 200;
            imageData.data = 245;
      }
      pixel.z -= 0.4;
      pixel.y = hh / 14 + Math.sin(i / len * 15 + (ts / 450)) * 10;
      if (pixel.z < -fov) pixel.z += 2 * fov;
    }
    ctx.putImageData(imageData, 0, 0);
};

(function drawFrame(ts) {
    requestAnimationFrame(drawFrame);
    if(!aud.paused) {
      ctx.clearRect(0, 0, ww, hh);
      render(ts);
    }
})();
</script>

红影 发表于 2024-5-6 09:50

这小播非常精彩，帖子制作也很漂亮。欣赏亚伦老师好帖{:4_199:}

查看完整版本: 蓝眼泪 - 半吨兄弟