杨帆 发表于 2025-5-16 16:44

璀璨 - 李健

<style>
    #papa { --state: running; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1600px); height: auto; aspect-ratio: 16/9; background: #000 url('https://cccimg.com/view.php/e6843c03fefcf0b58a43e8479bced602.png') no-repeat center/cover; box-shadow: 2px 2px 10px rgba(0,0,0,.65); z-index: 1; display: grid; place-items: center; position: relative; }
    #player { position: absolute;top:45%; left: 72%;z-index: 9; clip-path: circle(45%); transition: filter .7s; cursor: pointer; animation: rot 10s linear infinite var(--state); }
    #player:hover { opacity: .8; width: 10%;filter: invert(.8); filter: hue-rotate(90deg); }
    #btnFs { bottom: 30px; color: #eee; }
    #btnFs:hover { color: red; }
    @keyframes rot { to { transform: rotate(360deg); } }
    #vid1{ position: absolute; width: 80%; height: 80%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: linear-gradient(red, transparent); pointer-events: none; z-index: -1; }
    #lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 2.5em 华文新魏;color: #222222;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 -1px 0);z-index: 15;}
    #lrc{left: 30%;top: 48%;}#lrcc {left: 73%;transform: translate(-102%);top: 35%;}
    #lrcc::before,#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);}}
</style>
<div id="papa">
    <audio id="aud" src="https://cccimg.com/view.php/0bd614e08744e7dd4852e923ec5bd39e.mp3" autoplay loop></audio>
    <img id="player" src="https://pic1.imgdb.cn/item/67e576870ba3d5a1d7e569a8.png"" width="6%" title="播放/暂停" />
    <videoid="vid1" src="https://cccimg.com/view.php/a1ec021345e647eec78df15c9448ec13.mp4" loop muted autoplay=""></video>
    <div id="lrc" data-lrc=""></div>
    <div id="lrcc" data-lrc=""></div>
</div>
<script type="importmap">
    {
      "imports": {
            "three": "https://esm.sh/three/build/three.webgpu.js",
            "three/tsl": "https://esm.sh/three@0.176.0/es2022/build/three.tsl.mjs"
      }
    }
</script>
<script type="module">
import * as THREE from 'three';
import {uniform, time, instanceIndex, instancedBufferAttribute} from 'three/tsl';
import {FS} from 'https://638183.freep.cn/638183/web/ku/fscreen.js';
let camera, scene, renderer, material;
let width = papa.offsetWidth, height = papa.offsetHeight;

const init = () => {
    // 初始化Three.js场景
    camera = new THREE.PerspectiveCamera(55, width / height, 2, 2000);
    camera.position.set(0, 0, 1000); // 固定相机位置
    scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0x000000, 0.001);

    // 创建粒子系统
    const count = 6000;
    const positions = [];
    for (let i = 0; i < count; i++) {
      positions.push(2000 * Math.random() - 1000, 2000 * Math.random() - 1000, 2000 * Math.random() - 1000);
    }

    const positionAttribute = new THREE.InstancedBufferAttribute(new Float32Array(positions), 3);
    const map = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/star.png');
    map.colorSpace = THREE.SRGBColorSpace;
    material = new THREE.SpriteNodeMaterial({sizeAttenuation: true, map, alphaMap: map, alphaTest: 0.1});
    material.color.setHSL(1.0, 0.3, 0.7, THREE.SRGBColorSpace);
    material.positionNode = instancedBufferAttribute(positionAttribute);
    material.rotationNode = time.add(instanceIndex).sin();
    material.scaleNode = uniform(15);

    const particles = new THREE.Sprite(material);
    particles.count = count;
    scene.add(particles);

    // 初始化渲染器
    renderer = new THREE.WebGPURenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);
    papa.appendChild(renderer.domElement);

    // 音频控制逻辑
    const aud = document.getElementById('aud');
    const player = document.getElementById('player');
    const vid1 = document.getElementById('vid1');
    let isPlaying = false;

   // 统一控制播放状态
    function togglePlay() {
      if (isPlaying) {
            aud.pause();
            vid1.pause();
      } else {
            aud.play().catch(() => {/* 处理自动播放限制 */});
            vid1.play().catch(() => {});
      }
      isPlaying = !isPlaying;
      papa.style.setProperty('--state', isPlaying ? 'running' : 'paused');
    }

    // 点击控制播放/暂停
    player.addEventListener('click', togglePlay);

    // 同步播放状态显示
    aud.addEventListener('play', () => vid1.play());
    aud.addEventListener('pause', () => vid1.pause());

    // 同步动画状态
    aud.addEventListener('play', () => {
      renderer.setAnimationLoop(render);
      papa.style.setProperty('--state', 'running');
    });

    aud.addEventListener('pause', () => {
      renderer.setAnimationLoop(null);
      papa.style.setProperty('--state', 'paused');
    });

    // 窗口尺寸变化响应
    window.addEventListener('resize', onWindowResize);

    // 初始化后自动播放
    renderer.setAnimationLoop(render);
};

const onWindowResize = () => {
    width = papa.offsetWidth;
    height = papa.offsetHeight;
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize(width, height);
};

const render = () => {
    const timeVal = Date.now() * 0.00005;
    camera.lookAt(scene.position);
    const h = (360 * (1.0 + timeVal) % 360) / 360;
    material.color.setHSL(h, 0.5, 0.5);
    renderer.render(scene, camera);
};

init();
rotating();

const mState = () => {
        isPaused = aud.paused;
        aud.paused ?cancelAnimationFrame(rotRaf): rotating();
};

const rotating = () => {
        if (isPaused ) return;
        controls.update();
        renderer.render(scene, camera);
        rotRaf = requestAnimationFrame(rotating);
};

let touchTimer;
    player.addEventListener('touchstart', () => {
      touchTimer = setTimeout(togglePlay, 200);
    });
    player.addEventListener('touchend', () => clearTimeout(touchTimer));

FS(papa, player);

</script>
<span id="lrcStr" style="visibility: hidden;">

璀璨 - 李健
词：李健
曲：李健
没有一朵花
留住它的季节
像我一样
不能在你身边 到永远
总有一阵风
要带走些什么
像你一样 离去时总不说
再见
生命如此无常
我总是一样
不停地 追寻我终究要
失去的
像一阵风在原野流浪
生命就是这样
我却是无常
永远不知道下一刻
欢乐或悲伤
像河水漫无目的流淌
多绚烂的花
多美妙的季节
说我爱你
请你一定相信 这一刻
总有一阵风
要带走些什么
像你一样
离去时总不说 再见
生命如此无常
我总是一样
不停地
追寻我终究要 失去的
像一阵风在原野流浪
生命就是这样
我却是无常
永远不知道下一刻
欢乐或悲伤
像河水漫无目的流淌
多绚烂的花
多美妙的季节
我说爱你
请你一定相信 这一切
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
      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) => {
      lrca=lrcAr;
      lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
      let Y=String(mKey/2).indexOf(".");
      if (Y == -1)
    {
      0==mKey&&(lrc.innerHTML=lrca);
      lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
      lrcc.dataset.lrc = "";
      lrc.style.setProperty('--motion', 'cover1');
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
      }
    else
    {
      lrc.innerHTML = lrcb;
      lrcc.dataset.lrc = lrca;
      lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
      lrcc.style.setProperty('--tt', time + 's');
      lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
      }
      mKey += 1;
};
/*函数 ：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","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.innerHTML); /*获得歌词数组*/
})();

</script>


梦江南 发表于 2025-5-16 19:07

喜欢听李键的唱歌

红影 发表于 2025-5-16 20:27

漂亮的星星效果，歌词同步也漂亮{:4_187:}

红影 发表于 2025-5-16 20:28

欣赏杨帆好帖{:4_199:}

梦江南 发表于 2025-5-17 09:59

昨晚在手机上看不大全，电脑上看，非常漂亮，风格独特，欣赏学习。{:4_199:}

杨帆 发表于 2025-5-17 10:19

红影 发表于 2025-5-16 20:27
漂亮的星星效果，歌词同步也漂亮

谢谢影子观赏与鼓励{:4_204:}

杨帆 发表于 2025-5-17 10:19

梦江南 发表于 2025-5-17 09:59
昨晚在手机上看不大全，电脑上看，非常漂亮，风格独特，欣赏学习。

问好江南，谢谢观赏与鼓励{:4_204:}

红影 发表于 2025-5-17 21:11

杨帆 发表于 2025-5-17 10:19
谢谢影子观赏与鼓励

不客气啊，问好杨帆，晚上好{:4_187:}
页: [1]
查看完整版本: 璀璨 - 李健