带不走四季的风(Live 合唱版) TO：梦江南
<style>
#papa { margin: 130px 0; left: calc(50% - 81px); transform: translateX(-50%);width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://wj.zp68.com/lxx/yunhua/2025/06/27/0F.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; }
#btnFs { bottom: 30px; color: #eee; }
#player { position: absolute; left: -1000px; }
#btnFs:hover { transform: scale(1.1, 1.1); filter: drop-shadow(0 0 80px Gold); }
#player { position: absolute;left: -1000px; }
.lrc { z-index: 1; position: absolute; top: 56%; left: 35%; width: 370px; height: 250px; 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 'Microsoft YaHei', 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: #13c54a; font-weight: 650; text-shadow: 0 0 1px #faf9f4; }
#dt { position: absolute; width: 100%; height: 100%; top: 0%; left: 0%; z-index: -1; }
#dt2{ position: absolute; width:120px; height: 360px; top: 300px; left: 1050px; }
#dt img { width: 100%; height: 100%; }
</style>
<div id="papa">
<img id="dt2" src="https://wj.zp68.com/lxx/yunhua/2025/06/27/1.png" alt="" />
<div id="pa"></div>
<audio id="aud" src="https://upfile.mp3.wf/view.php/b07968dd73b73be5f3dfa3476b4eea4d.mp3" autoplay loop></audio>
<div id="player"></div>
<div class="lrc">
<ul id="ul"></ul>
</div>
<div id="dt">
<img src="https://wj.zp68.com/lxx/yunhua/2025/06/27/0F.gif" id="IMG" style="mix-blend-mode: screen"
alt=" " />
</div>
</div>
<script>
let lrc = `
带不走四季的风(Live 合唱版)
帖赠：梦江南
歌手：洋澜一
曲：康兵辉词：张宥伦
混音：毅然音乐
合唱：毅然合唱团
总有太多遗憾埋藏心中
总有太多眼泪奔流汹涌
总有太多悲伤谁会懂
总有太多苦与痛
总有太多故事都在酒中
总有太多黑夜渴望星空
总有太多束缚像牢笼
总有太多梦和空
如果带不走四季的风
就卷走一路的风景
如果遇不到心动的人
就孤身潇洒去度余生
如果带不走四季的风
就卷走一路的风景
如果等不到盛开的花
就独自追逐最美前程
LRC编辑：小辣椒
总有太多故事都在酒中
总有太多黑夜渴望星空
总有太多束缚像牢笼
总有太多梦和空
如果带不走四季的风
就卷走一路的风景
如果遇不到心动的人
就孤身潇洒去度余生
如果带不走四季的风
就卷走一路的风景
如果等不到盛开的花
就独自追逐最美前程
如果带不走四季的风
就卷走一路的风景
如果遇不到心动的人
就孤身潇洒去度余生
如果带不走四季的风
就卷走一路的风景
如果等不到盛开的花
就独自追逐最美前程
谢谢欣赏
`;
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);
</script>
<script type="module">
import { THREE, scene, camera, renderer, clock, basic3, click3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';
import { textcanvas } from 'https://638183.freep.cn/638183/3dev/3/textcanvas1.js';
import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';
basic3(papa);
const group = new THREE.Group();
group.position.set(0, 0, -2);
const spriteTexture = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/hdxk.png');
spriteTexture.colorSpace = THREE.SRGBColorSpace;
for (let i = 0; i < 80; i ++) {
const sprite = new THREE.Sprite(new THREE.SpriteMaterial({ color: 0x13c54a,map: spriteTexture }));
sprite.position.set(
THREE.MathUtils.randFloatSpread(10),
THREE.MathUtils.randFloatSpread(6),
THREE.MathUtils.randFloatSpread(10)
);
sprite.scale.set(0.08, 0.08, 0.08);
sprite.material.rotation = Math.random() * Math. PI;
group.add(sprite);
}
const setting = {
font: `650 20px 'FZYaoti', sans-serif`,
fill: true,
fillColor: '#fc062e',
bg: '#0a0b14',
padding: {x: 5, y: 4},
shadowX: 3,
shadowY: 3
};
const canv = textcanvas('帖 赠 梦 江 南', setting);
const texture = new THREE.CanvasTexture(canv);
const mesh = new THREE.Mesh(
new THREE.SphereGeometry(),
new THREE.MeshBasicMaterial({ map: texture })
);
mesh.position.set(-0.45, 0.6, -4.5);
scene.add(group, mesh);
const animate = () => {
requestAnimationFrame(animate);
const delta = clock.getDelta();
mesh.rotation.y -= delta;
group.rotation.y -= delta / 10;
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(),image.stop()) : (clock.start(),image.play());
animate();
FS(papa, player);
</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 = '';
}
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("IMG");
</script>
感谢阿姨的关心，认识阿姨是小辣椒最幸运的一件事，小辣椒心里特别开心，做个自己喜欢的东西送给阿姨，就是颜色没有修改到很满意，阿姨别嫌弃哦{:4_179:}
@梦江南
看见黑黑这个圆里面带文字的播放器，立马想到岁月这个AE的制作，结合一起学习做一个
@马黑黑 @走过岁月 小辣椒 发表于 2025-6-27 13:39
感谢阿姨的关心，认识阿姨是小辣椒最幸运的一件事，小辣椒心里特别开心，做个自己喜欢的东西送给阿姨，就是 ...
您眼睛还没好，还要做帖子，阿姨感动得泪漰了！{:4_179:}
在人海茫茫里相遇相识是命中注定缘分。 阿姨心领了，小辣椒您要好好休息，保护好眼睛！ 哎呦，可见到你了。你的身体好了吗？多保重哦！ {:4_199:} 太动听啦，我蹭我蹭使劲儿蹭{:4_205:} 虽然能帖子了，是件好事！值得庆贺{:4_176:}{:4_190:}
但是，还是注意不能在屏上呆久了！{:4_197:} 很有岁月的风格。{:4_170:} 精致、用心、独特的帖子，祝江南收礼开心，感谢小辣椒精彩分享{:4_204:} 这个球体和动画的结合真好，还能看到原来的频谱和灯光效果，这样的结合非常完美。
欣赏亲爱的好帖{:4_199:} 星星帖图的精灵的制作也很漂亮。这个制作太棒了，江南收礼开心{:4_187:}
看到亲爱的上来很开心，一直在为你担心着，能看到你，说明一切都在好起来{:4_183:} {:4_199:}这个效果漂亮，制作太美啦，江南老师收礼开心{:4_204:} 祝亲爱滴小辣椒生活顺遂……{:4_187:} 小辣椒美女用AE制作的这首《带不走四季的风(Live 合唱版)》真的太棒了！整首歌既富有情感又充满力量，歌词深刻动人，旋律优美流畅。她用AE将这首歌制作得如此出色，画面与音乐完美融合，虽然是一幅画面，但每一帧画面都仿佛在讲述一个故事，让人沉浸其中无法自拔。尤其是通过效果，小辣椒美女处理得层次分明，气势恢宏，让人感受到强烈的情感共鸣。她的才华和用心在这个作品中展现得淋漓尽致，真是令人叹为观止！希望她能继续创作更多这样优秀的作品，期待她的下一个惊艳之作！辛苦了，祝福小辣椒美女健康幸福！ 辣椒把岁月美女也叫来了啊{:4_189:} 这个底色太喜欢了 梦江南 发表于 2025-6-27 14:25
您眼睛还没好，还要做帖子，阿姨感动得泪漰了！
在人海茫茫里相遇相识是命中注定缘分。
阿姨晚上好，谢谢关心。眼睛好多了 梦江南 发表于 2025-6-27 14:27
阿姨心领了，小辣椒您要好好休息，保护好眼睛！
谢谢，我会的，所以暂时会很少玩了，也是希望阿姨多保重{:4_179:} 梦油 发表于 2025-6-27 14:29
哎呦，可见到你了。你的身体好了吗？多保重哦！
梦油晚上好，是的，一个月没有见了，基本好了，谢谢关心{:4_187:}