论坛 › 欢乐水吧 › 孤独与自由 (Live) - 张碧晨/海来阿木

亚伦影音工作室 发表于 2025-6-30 18:01

孤独与自由 (Live) - 张碧晨/海来阿木

本帖最后由 亚伦影音工作室 于 2025-7-1 12:44 编辑 <br /><br /><style>
#papa { margin: 10px -300px; width: 1280px;height: 720px;background: url(https://pic1.imgdb.cn/item/686265e358cb8da5c87f8d9b.jpg) no-repeat center/cover; box-shadow: 2px 2px 8px #000;overflow: hidden; z-index: 1; position: relative;}
#bfq{   
      position:absolute;
      width: 450px;
      height:350px;overflow: hidden;
      background:#0000;
transform:scale(.4);bottom: -100px;
   left: -120px;z-index: 20;}
#cp{   
      position:absolute;
      width: 240px;border-radius: 50%;
      height:240px;animation: rotating 6s infinite linear;
      top:18%;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
   cursor: pointer;
   left: 12%;z-index: 1;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;}
@keyframes rotating { to { transform: rotate(360deg); } }
.overlay {
content: '';
left: 50%;
top: 50%; transform: translate(-50%, -50%);
position: absolute;
width: 238px;
height: 238px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 60%, transparent);
border-radius: 50%;
}


.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
box-shadow:0px 0px 0px 1px #eee,0px 0px 0px 2px #444;
background:#880000 url('') no-repeat center / cover;

border-radius: 50%;
}
.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
background: #ccc;
border-radius: 50%;
}
#cz {position: absolute;
      top:6%; left:45%;z-index: 2;
      width: 150px;background: url('https://pic1.imgdb.cn/item/6688e0dad9c307b7e9a7a3e1.png')no-repeat center/85%;
      height: 300px;
      cursor: pointer;
}

.pink { transform:rotate(5deg);transform-origin: 100% 0%;}
.purple {transform-origin: 80% 0%;margin: -4px -18px;transform:rotate(-9deg);}

#prog {position: absolute;z-index: 8;
      width: 80%;
      height: 2px;background:#ccc;
      cursor: pointer;
         bottom: 46px;
left:11%;
border-radius: 1px;}
#prog-bar {
            height: 100%;
            background: #FF0000;
            width: 0%;
      }

#tmsg {position: absolute;z-index: 8;
      font: normal 12px sans-serif;
      color: #ccc;
         bottom: 42px;
      right: 40px;}

.lrc { z-index: 1; position: absolute; top: 20%; left: 1%; width: 740px; 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 'YouYuan', 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.2); color: #FF6600; font-weight: 650; text-shadow: 1px 1px 0px #000; }
#btnFs { margin: 30px 90%; color: #ccc;width: 80px;font: normal 20px 'FZYaoti', sans-serif; }
#player { position: absolute; left: -1000px; mix-blend-mode: luminosity; }
</style>
    <div id="papa">
      
      <audio id="aud" src="https://www.joy127.com/url/129255.mp3" autoplay loop></audio>
      <div id="bfq">
<div id="cz"class="pink"title="暂停"></div>
<div id="cp"title="暂停"><div class="inner"></div><div class="overlay"></div></div>
</div>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
<div id="tmsg">00:00|00:00</div>

      <div class="lrc">
            <ul id="ul"></ul>
      </div>
       <div id="player"></div>
    </div>
<script>
      let lrc = `
孤独与自由 (Live) - 张碧晨/海来阿木
词：烁群
曲：烁群
原唱：海来阿木
编曲：张星@耳肆山白
制作人：刘卓@维伴音乐/郎梓朔@维伴音乐
音乐总监：刘卓@维伴音乐
演唱设计：石行@维伴音乐
音响总监：何飚
音乐混音：林梦洋/佟尚泽@维伴音乐/邢猷佳
鼓：卢炜@维伴音乐
打击乐：刘效松@维伴音乐
贝斯：李九君@维伴音乐
吉他：金天@维伴音乐
吉他：崔万平@维伴音乐
钢琴：傅一峥@维伴音乐
键盘：李海郡@维伴音乐
Program：郎梓朔@维伴音乐
合音编写：石行@维伴音乐
LRC编辑：醉美水芙蓉
乐队统筹：裴若岐@维伴音乐
灯光设计：田为钧/卢晓伟
OP/SP：一寸光年
听 他们嘈杂声音
可谁又曾道出 这世间的真理
看 他们蜂拥而聚
可最难走的路 从来都不拥挤
命运如风现实的云海翻涌
时光如洪灵魂已千疮百孔
单枪匹马闯过来的人才懂
孤独也值得被歌颂
山下的人太吵 山顶的风喧嚣
我停驻半山腰 这风景刚刚好
不被谁而打扰 不向谁而奔跑
面对整个世界 只用一个微笑
得到的就拥抱 失去的就放掉
人生的下一秒 谁都无法预料
用孤独做城堡 远离世间纷扰
每越过的荆棘 都是我的骄傲
叹 这岁月的无情
曾经炽热的心 终将归于平静
问 这人生的意义
我们哭着降临 能否笑着离去
命运如风现实的云海翻涌
时光如洪灵魂已千疮百孔
单枪匹马闯过来的人才懂
孤独也值得被歌颂
山下的人太吵 山顶的风喧嚣
我停驻半山腰 这风景刚刚好
不被谁而打扰 不向谁而奔跑
面对整个世界 只用一个微笑
得到的就拥抱 失去的就放掉
人生的下一秒 谁都无法预料
用孤独做城堡 远离世间纷扰
每越过的荆棘 都是我的骄傲
山下的人太吵 山顶的风喧嚣
我停驻半山腰 这风景刚刚好
不被谁而打扰 不向谁而奔跑
面对整个世界 只用一个微笑
得到的就拥抱 失去的就放掉
人生的下一秒 谁都无法预料
用孤独做城堡 远离世间纷扰
每越过的荆棘 都是我的骄傲
谢谢欣赏！

`;
      let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#aud");
      var ul = document.querySelector("#ul");
      var 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;
      }

      function createElements() {
            let fragment = document.createDocumentFragment();

            for (let i = 0; i < result.length; i++) {
                let li = document.createElement("li");
                li.innerText = result.word;

                li.addEventListener("click", function () {
                  audio.currentTime = result.time;
                  setOffset();
                });

                fragment.appendChild(li);
            }

            ul.appendChild(fragment);
      }

      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;
            let offset = liHeight * index - containerHeight / 2 + liHeight / 2;

            offset = Math.max(minOffset, Math.min(offset, maxOffset));

            ul.style.transform = `translateY(${-offset}px)`;

            ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
            if (index < ul.children.length) {
                ul.children.classList.add('active');
            }
      }

      audio.addEventListener("timeupdate", setOffset);

audio.addEventListener('timeupdate', () => {
            tmsg.innerText = toMin(audio.currentTime) + ' | ' + toMin(audio.duration);
      });
      
      function toMin(val) {
            if (!val) return '00:00';
            val = Math.floor(val);
            let min = parseInt(val / 60);
            let sec = parseFloat(val % 60);
            if (min < 10) min = '0' + min;
            if (sec < 10) sec = '0' + sec;
            return min + ':' + sec;
      }
      
      prog.onclick = (e) => { audio.currentTime = audio.duration * e.offsetX / prog.offsetWidth; }
      
      var progBar = document.getElementById('prog-bar');
      audio.addEventListener('timeupdate', () => {
            const percent = (audio.currentTime / audio.duration) * 100;
            progBar.style.width = percent + '%';
      });
      

cp.onclick = cz.onclick = () => audio.paused ? (audio.play(), cz.classList.remove('purple'),vid.play()) : (audio.pause(), cz.classList.add('purple'),vid.pause());
      
      cp.style.animationPlayState = audio.paused ? 'paused' : 'running';
      audio.addEventListener('playing', () => cp.style.animationPlayState = 'running');
      audio.addEventListener('pause', () => cp.style.animationPlayState = 'paused');
    </script>

<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 TWEEN from 'https://638183.freep.cn/638183/3dev/examples/jsm/libs/tween.module.js';
      import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';
      basic3(papa, aud.paused);

      // 绘制点云球体 ：点颜色随机
      const geometry = new THREE.SphereGeometry(0.8, 64, 64);
      const count = geometry.attributes.position.count;
      const colors = new Float32Array(count * 3);
      for (let i = 0; i < count; i++) {
            colors = Math.random();
            colors = Math.random();
            colors = Math.random();
      }
      geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
      const material = new THREE.PointsMaterial({ size: 0.05, vertexColors: true });
      const mesh = new THREE.Points(geometry, material);
      scene.add(mesh);
      // 加入 tween 动画 ：点从球体飞往各处再折回
      const startPositions = geometry.getAttribute('position');
      for(let i = 0; i < startPositions.count; i++) {
                if (i % 5 === 0) continue; // 排除索引被5整除的点
                const tween = new TWEEN.Tween(startPositions.array)
                .to({
                        : THREE.MathUtils.randFloatSpread(10),
                        : THREE.MathUtils.randFloatSpread(10),
                        : THREE.MathUtils.randFloatSpread(10)
                }, 5000 * Math.random() + 6000)
                .delay(2000)
                .easing(TWEEN.Easing.Exponential.Out)
                .onUpdate(() => startPositions.needsUpdate = true)
                .repeat(Infinity)
                .repeatDelay(1500)
                .yoyo(6000)
                .start();
      }

      const animate = () => {
                TWEEN.update();
                const delta = clock.getDelta();
                mesh.rotation.x += delta / 5;
                mesh.rotation.y += delta / 5;
                renderer.render(scene, camera);
                requestAnimationFrame(animate);
      };

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

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

      const tweens = TWEEN.getAll();

      aud.onplaying = aud.onpause = () => {
                tweens.forEach(tween => aud.paused ? tween.pause() : tween.resume());
                aud.paused ? clock.stop() : clock.start();
      };

      animate();
      FS(papa, player);
</script>

红影 发表于 2025-6-30 19:06

这散开的粒子的效果真美。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2025-6-30 20:12

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

梦油 发表于 2025-6-30 21:50

欣赏佳作，问候亚伦。

老谟深虑 发表于 2025-7-1 15:59

          好美的代码音画，点赞！

查看完整版本: 孤独与自由 (Live) - 张碧晨/海来阿木