播放器专用

admin

admin

admin

人生哲理系列

大道至简 · 黑白分明

自古黑白两分明

admin

<style>         #pa {                 margin: 20px auto;                 width: 1024px ;                 height: 640px;                 border: 1px solid gray;                 display: grid;                 place-items: center;                 position: relative;         }         #wrapper {                 position: absolute;                 padding: 10px;                 font: bold 2rem/1.2 sans-serif;                 text-shadow: 1px 1px 1px gray;                 bottom: 20px;         }         .char {                 display: inline-block;                 padding: 0 2px;                 opacity: 0;                 transform: translate(var(--x), var(--y));                 animation: fadeIn 0.3s var(--delay) forwards;         }         audio { position: absolute; left: 20px; top: 20px; }         @keyframes fadeIn {                 to {                         transform: translate(0, 0);                         opacity: 1;                 }         } </style> <div id="pa">         <audio id="aud" src="https://cccimg.com/view.php/7404fa9c5e73097aefa645b90d63a7a2.mp3" controls autoplay></audio>         <div id="wrapper">HUACHAO LRC</div> </div> <script>         const gc = `、[00:00.0]终于把你遇见 - 徐子崴/罗姣\n [00:03.18]词：徐子崴\n [00:04.4]曲：徐子崴\n [00:05.62]编曲：冯丹\n [00:06.84]吉他：孙越\n [00:08.07]萧：丁晓逵\n [00:09.29]伴唱：凌菲\n [00:10.51]录音：欧力\n [00:11.74]录音棚：崴IP•MUSIC\n [00:13.45]音频编辑 Audio Editor：刘璇\n [00:15.65]混音工程师 Mixing Engineer：王路遥\n [00:18.34]母带工程师 Mastering Engineer：王路遥\n [00:21.03]录音/混音/母带棚：@2496 Top Music\n [00:24.21]封面设计：李政\n [00:25.92]出品：福唱音乐\n [00:27.64]制作人：徐子崴\n [00:29.35]如果一生有一百年\n [00:35.75]不过是三万六千五百天\n [00:42.19]我穿过河流啊我越过高山\n [00:48.66]只为能和你见呀见\n一面\n [00:55.18]如果一生有一百年\n [01:01.7]说起来很长说来也很短\n [01:08.24]我仰望日月啊我祈求上天\n [01:14.64]只为能和你走呀走一段\n [01:27.729996]多想把你遇\n见 [01:34.1]恰好在对的时间\n [01:40.68]我愿用前世的苦难\n [01:47.11]换与你今生的情缘\n [01:53.44]终于把你遇见\n [02:00.05]恰好在对的时间\n [02:06.58]我愿以今生的相伴\n [02:13.08]许和你来世的圆满\n [02:45.52]如果一生有一百年\n [02:51.95999]说起来很长说来也很短\n [02:58.49]我仰望日月啊我祈求上天\n [03:04.94]只为能和你走呀走一段\n [03:14.75]多想把你遇见\n [03:21.19]恰好在对的时间\n [03:27.70999]我愿用前世的苦难\n [03:34.16]换与你今生的情缘\n [03:40.61]终于把你遇见\n [03:47.07]恰好在对的时间\n [03:53.67]我愿以今生的相伴\n [04:00.08]许和你来世的圆满\n [04:06.56]许和你来世的圆满`;         const gcAr = lrc2HC(gc);         let curkey = 0, isSeeking = false;         aud.ontimeupdate = () => {                 if(curkey > gcAr.length - 1) return;                 if(aud.currentTime >= gcAr[curkey][0]) {                         const gap = gcAr[curkey + 1]?.[0] ?? 0 - gcAr[curkey][0];                         showLrc(gcAr[curkey][1], 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[1]) * 60 + parseInt(result[2]) + parseInt(result[3]) / 1000;                                 lrcAr.push([tmsg, result[4].trim()]);                         }                 });                 return lrcAr ? lrcAr : [0, 'HUACHAO'];         };         function calcKey() {                 for (let j = 0; j < gcAr.length; j++) {                         if (aud.currentTime <= gcAr[j][0]) {                                 curkey = j - 1;                                 break;                         }                 }                 if (curkey < 0) curkey = 0;                 if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;                 let time = gcAr[curkey + 1]?.[0] ?? 0 - gcAr[curkey][0];                 isSeeking = false;                 showLrc(gcAr[curkey][1], 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 ? 300 : -300);                         const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);                         span.style.cssText += `                                 color: #${Math.random().toString(16).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>

admin

admin

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
    .pa {
        --offsetX: 81px;
        --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/01/11/69638112eb95a.gif') no-repeat center/cover;
    }
    .fadeInLrc {
        bottom: 50px;  /* 歌词 */
        animation: fadeIn .2s forwards, flash 1s infinite alternate var(--state);
    }
</style>

<div id="pa" class="pa"></div>

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
    const tz = TZ.TZ('pa');

    // 添加MP4视频背景层
    tz.add('video', 'mp4bg', '', {
        src: 'https://cccimg.com/view.php/63c3fdbe02844c5c8e9ddf7a055c1d91.mp4', // MP4视频链接
        autoplay: true,
        loop: true,
        muted: true,
        playsinline: true
    }).style(`
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        opacity: 0.1;
    `);

    const gc = `
[00:03.86]花影伴流年
[00:08.99]歌手:生命树下
[00:16.94]发行日期:2025-10-24
[00:22.81]词/曲：生命树下
[00:27.33]花影摇曳在时光的河边
[00:33.88]轻声诉说流年的缱绻
[00:40.03]多少晨曦多少夜晚
[00:47.96]都有爱的光芒在心田
[00:53.85]岁月如歌在岁岁年年
[00:59.99]足迹写下生命的诗篇
[01:07.81]纵有风雨纵有荒原
[01:15.75]与你同行就不觉孤单
[01:21.77]花影伴流年爱不曾走远
[01:29.23]穿越风霜依旧温暖
[01:35.95]无论山高海远心始终相连
[01:42.68]恩典如花绽放在人间
[02:13.70]光阴缓缓把记忆铺展
[02:21.04]留下欢笑泪水也甘甜
[02:27.22]多少梦想因你而点燃
[02:34.80]生命因此更加灿烂
[02:41.73]时光匆匆却带不走依恋
[02:48.80]岁月更替仍留下眷恋
[02:54.46]爱如花影随风仍翩跹
[03:02.35]守护我直到永远
[03:08.83]花影伴流年岁岁常新鲜
[03:15.41]纵然光阴无声也不变迁
[03:22.20]这一生心相依直到地极天边
[03:30.17]歌声回荡永远不断

`;

    const gcAr = tz.lrc2HC(gc, -0.1);

    tz.add('audio', '', '', {
        src: 'https://cccimg.com/view.php/d2e171eb14056dea342336a0de2ea5a5.mp3'
    });

    tz.add('img', 'player', 'ma', {
        src: 'https://ff.xiaoqiaodali.top:5401/i/2025/12/13/693c562039ba9.png',
        alt: ''
    }).playmp3().style('left:1100px; bottom: 50px');  

    // 进度条在底部
    tz.bgprog().style('bottom: 30px; color: snow');

    // 歌词显示在进度条上方
    tz.lrc(gcAr, 'lrc', true);

    tz.fs().style('right: 20px; bottom: 20px');
</script>