论坛 › 欢乐水吧 › 对唱-等待是一杯相思的酒

亚伦影音工作室 发表于 2025-6-18 10:48

对唱-等待是一杯相思的酒

本帖最后由 亚伦影音工作室 于 2025-6-18 16:31 编辑 <br /><br /><style>
      #papa { margin: 30px -300px; width: 1286px;height: 720px;background: url(https://pic1.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg) no-repeat center/cover; box-shadow: 2px 2px 8px #000;overflow: hidden; z-index: 1; position: relative; }
      #btnFs { margin: 30px 90%; color: #ccc;width: 80px;font: normal 20px 'FZYaoti', sans-serif; }
#btnFs:hover { color: #fff000; }
      #player { position: absolute; left: -1000px; }

.lrc {z-index: 1;
            position: absolute;
            top: 20%;
            left: 10%;
         
            width: 540px;
            height: 350px;
            overflow: hidden;

      }

      .lrc #ul {
            width: 100%;
            padding: 0;
            list-style: none;
            transition: 0.3s all ease;
            margin: 0;
      }

      .lrc #ul li {
         
            color: #fff;
            font: normal 20px 'FZYaoti', sans-serif;
            transition: .3s all ease;
         list-style-type: none;
    text-align: center;
       display: block;
            padding: 0 10px;
            height: 50px;
            line-height: 50px;
             margin: 0 auto;
            cursor: pointer;
      }

      .lrc #ul li.active {
         transform:scale(1.4);
            color: #fff666;
      font-weight: 650;
            
            
            padding-left: 10;
         
            filter: brightness(150%);
            color: #00ff00;
      }

</style>

<div id="papa">
      <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/6b/43/91/68eddae24ca077393aaeb4103896308b/audio.mp3" autoplay loop></audio>
      <div id="player"></div>
<div class="lrc">
            <ul id="ul"></ul>
      </div>
</div>

<script type="module">
      import { THREE, scene, camera, renderer, clock, basic3, click3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js?v=1.0';
      import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';

      basic3(papa, aud.paused);

      // 直管道
      const path = new THREE.LineCurve3(new THREE.Vector3(-0.35, 0, 0), new THREE.Vector3(0.35, 0, 0));
      const geometry = new THREE.TubeGeometry(path, 32, 1, 6, false);
      const material = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide });
      const mesh = new THREE.Mesh(geometry, material);
      mesh.rotateZ(Math.PI / 2);
      mesh.rotateY(Math.PI / 1.05);
      mesh.position.set(0, -2, -2);

      // 精灵
      const group = new THREE.Group();
      const texture = new THREE.TextureLoader().load('https://pic1.imgdb.cn/item/6852213b58cb8da5c8566243.png');
      for (var i = 0; i < 200; i ++) {
                var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ color: Math.random() * 0xcccccc, map: texture }));
                sprite.scale.set(0.25, 0.25, 2.8);
                sprite.position.set(
                        THREE.MathUtils.randFloatSpread(8),
                        THREE.MathUtils.randFloatSpread(8),
                        THREE.MathUtils.randFloatSpread(12)
                );
                group.add(sprite);
      }
      scene.add(mesh, group);

      // 动画
      const animate = () => {
                requestAnimationFrame(animate);
                const delta = clock.getDelta();
                mesh.rotation.y += delta;
                group.rotation.x += delta / 10;
                group.rotation.y += delta / 10;
                group.children.forEach(sprite => sprite.material.rotation -= delta * 2);
                renderer.render(scene, camera);
      };

      papa.onclick = (e) => {if (click3(mesh, e)) player.click()};

      papa.onmousemove = (e) => {
                papa.title = click3(mesh, e) ? '播放/暂停' : '';
                papa.style.cursor = click3(mesh, e) ? 'pointer' : 'default';
      };

      aud.onplaying = aud.onpause = () => aud.paused ? clock.stop() : clock.start();

      animate();
      FS(papa, player);


      let lrc = `对唱-等待是一杯相思的酒
作词：林晓杰
作曲：杰哥哥/思雨
原唱：许文科/含烟
监制：思雨
出品：杰雨文化
男: 我站在你离开的路口
看着熙熙攘攘的人流
我的心一直为你等候
等你许下的天长地久
女: 天上白云慢慢的飘走
风儿轻轻吹过柳梢头
我的爱悠悠情也悠悠
缕缕思念何时才能休
男: 等待是一杯相思的酒
醉过之后难解相思愁
合: 光阴似水悄悄的流走
还有多少芳华可回首
女: 等待是一杯相思的酒
酒香浓郁愁绪锁眉头
合：寂寥的夜空新月如钩
相约相守一春又一秋
男: 天上白云慢慢的飘走
风儿轻轻吹过柳梢头
女: 我的爱悠悠情也悠悠
缕缕思念何时才能休
男: 等待是一杯相思的酒
醉过之后难解相思愁
合: 光阴似水悄悄的流走
还有多少芳华可回首
女: 等待是一杯相思的酒
酒香浓郁愁绪锁眉头
合: 寂寥的夜空新月如钩
相约相守一春又一秋
男: 等待是一杯相思的酒
酒香浓郁愁绪锁眉头
女: 寂寥的夜空新月如钩
相约相守一春又一秋
合: 寂寥的夜空新月如钩
相约相守一春又一秋

`;
      let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#aud"),
            ul = document.querySelector("#ul"),
            container = document.querySelector(".lrc");
            

      for (let i = 0; i < lrcArr.length; i++) {
            var lrcData = lrcArr.split(']');
            if (lrcData.length < 2) continue;
            var lrcTime = lrcData.substring(1);
            var obj = {
                time: parseTime(lrcTime),
                word: lrcData.trim()
            }
            result.push(obj);
      }

      function parseTime(lrcTime) {
            let lrcTimeArr = lrcTime.split(":");
            return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
      }

      function getIndex() {
            let time = audio.currentTime;
            for (let i = 0; i < result.length; i++) {
                if (result.time > time) {
                  return i - 1;
                }
            }
            return result.length - 1;
      }

var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1263fc=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x69\x6E\x6E\x65\x72\x54\x65\x78\x74","\x77\x6F\x72\x64","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x74\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5d03x2=document]();for(let _0x5d03x3=0;_0x5d03x3< result];_0x5d03x3++){let _0x5d03x4=document](__Ox1263fc);_0x5d03x4]= result];_0x5d03x4](__Ox1263fc,function(){audio]= result]});_0x5d03x2](_0x5d03x4)};ul](_0x5d03x2)}(function(_0x5d03x5,_0x5d03x6,_0x5d03x7,_0x5d03x8,_0x5d03x9,_0x5d03xa){_0x5d03xa= __Ox1263fc;_0x5d03x8= function(_0x5d03xb){if( typeof alert!== _0x5d03xa){alert(_0x5d03xb)};if( typeof console!== _0x5d03xa){console](_0x5d03xb)}};_0x5d03x7= function(_0x5d03xc,_0x5d03x5){return _0x5d03xc+ _0x5d03x5};_0x5d03x9= _0x5d03x7(__Ox1263fc,_0x5d03x7(_0x5d03x7(__Ox1263fc,__Ox1263fc),__Ox1263fc));try{_0x5d03x5= __encode;if(!( typeof _0x5d03x5!== _0x5d03xa&& _0x5d03x5=== _0x5d03x7(__Ox1263fc,__Ox1263fc))){_0x5d03x8(_0x5d03x9)}}catch(e){_0x5d03x8(_0x5d03x9)}})({})

      createElements();
      let containerHeight = container.clientHeight;
      let liHeight = ul.children?.clientHeight || 50;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;

      function setOffset() {
            const index = getIndex();
            if (index < 0) return;

            const liHeight = ul.children?.clientHeight || 50;
            const offset = liHeight * index - containerHeight / 2 + liHeight / 2;
            ul.style.transform = `translateY(${-offset}px)`;

            ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
            ul.children?.classList.add('active');

            const currentLyric = result.word.trim();
            if (!currentLyric) return;
            const nextTime = result?.time || audio.duration;
            const duration = nextTime - result.time;
            const charIndex = duration > 0 ?
                Math.min(Math.floor((audio.currentTime - result.time) / (duration / currentLyric.length)), currentLyric.length) :
                currentLyric.length;
}

      let rafId;
      audio.addEventListener("timeupdate", () => {
            rafId = requestAnimationFrame(setOffset);
      });

</script>

红影 发表于 2025-6-18 12:52

这个直管道的定位设置好，精灵粒子的贴图也好看。

红影 发表于 2025-6-18 12:53

欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2025-6-18 14:21

漂亮！谢谢亚伦老师精彩分享{:4_191:}

老谟深虑 发表于 2025-6-18 15:56

         欣赏老师的好贴，点赞！

樵歌 发表于 2025-6-18 19:46

欣赏精彩音画{:4_199:}

查看完整版本: 对唱-等待是一杯相思的酒