风吹散心头的思念(遗憾版)顾语涵
本帖最后由 亚伦影音工作室 于 2026-5-11 12:50 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");#papa{margin: 10px -300px;
width: 1186px;
height: 680px;
background:#000 url() no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #002200;
position: relative;overflow: hidden;
z-index: 12345;}
#d{width: 45% ;height: 45%;position:absolute;left: 2%; top:64%;z-index: 2;}
#source{width: 100% ;}
#d1{width:100%;height: 100%;position:absolute;left: 0%; top:0%;z-index: -1;animation: rota 3s linear infinite;background-size : contain}
#source1{width:100%;height: 100%;border-radius: 0%;}
#d2{width:100%;height:100%;position:absolute;left: 0%; top:0%;z-index: 1;mix-blend-mode: lighten;}
#source2{width:100%;height: 100%;}
#an{width: 15px ;height: 15px;position:absolute;left: 5%; top:12%;z-index: 199;background: url("https://pic1.imgdb.cn/item/69e342d1214d2a8a53d705f8.png") no-repeat center/cover;animation: rota 1s linear infinite ;cursor: pointer;}
@keyframes rota {to { filter: hue-rotate(360deg); }}
.lrc { z-index: 21; position: relative; top: 20%; left: 1%; width: 600px; height: 250px; overflow: hidden; }
.lrc #ul { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
.lrc #ul li { color: #ccc; font: 300 20px "Ma Shan Zheng","华文行楷","SimHei", "Arial", "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: #fff000; font-weight: 300; }
#player{position:absolute;top: 5%;z-index: 199;
left: 464px;
width: 50px;
height: 50px;border-radius: 50px;
display: grid;background:#00ff00 url("https://pic1.imgdb.cn/item/680f595158cb8da5c8d2561a.png") no-repeat center/cover;
place-items: center;animation: rot 8s linear infinite ;cursor: pointer;}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#fullscreen{border-radius: 4px;position: absolute;
color:#ccc;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 120;
font: 300 20px "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";
border: none;
cursor: pointer;top: 15px;left: 3%;
}
</style>
<divid="papa">
<div id="fullscreen" title="屏展模式">全屏欣赏</div>
<div id="d"><img id="source" src="https://pic1.imgdb.cn/item/69e2da1d087b33b46ad732e0.gif"><div id="player"title="暂停/播放"></div><div id="an" title="暂停/播放"></div></div>
<divid="d1"><imgid="source1"src="https://pic1.imgdb.cn/item/69bf524b4235741b1e445537.gif"></div>
<divid="d2"><imgid="source2"src="https://pic1.imgdb.cn/item/69e37d83214d2a8a53d7f628.gif"></div>
<div class="lrc">
<ul id="ul"></ul>
</div>
</div>
<audio id="aud" src="https://static.oldkids.com.cn/upload/2026/04/18/blog_260855907_20260418212443276.mp3" loop autoplay ></audio>
<script>
const renderGif = function (dom) {
if (!dom || !dom.src) {
return;
}
// gif图片的url地址
const src = dom.src;
// 创建的用来播放gif的canvas元素
const canvas = document.createElement('canvas');
const context = canvas.getContext("2d");
// 一些与GIF播放有关的变量
let imageDecoder = null;
let imageIndex = 0;
let paused = false;
// 绘制方法
const renderImage = function (result) {
context.drawImage(result.image, 0, 0);
const track = imageDecoder.tracks.selectedTrack;
// 如果播放结束，从头开始循环
if (imageDecoder.complete) {
if (track.frameCount === 1) {
return;
}
if (imageIndex + 1 >= track.frameCount) {
imageIndex = 0;
}
}
// 绘制下一帧内容
imageDecoder
.decode({ frameIndex: ++imageIndex })
.then((nextResult) => {
if (paused === false) {
setTimeout(() => {
renderImage(nextResult);
}, result.image.duration / 1200.0);
} else {
canvas.nextResult = nextResult;
}
})
.catch((e) => {
// imageIndex可能超出的容错处理
if (e instanceof RangeError) {
imageIndex = 0;
imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);
} else {
throw e;
}
});
};
// 判断地址能够请求
fetch(src).then((response) => {
// 可以请求，进行样式处理
// 设置canvas尺寸
canvas.width = dom.naturalWidth;
canvas.height = dom.naturalHeight;
// 实际显示尺寸
canvas.style.width = dom.clientWidth + 'px';
canvas.style.height = dom.clientHeight + 'px';
// 隐藏图片，显示画布
dom.after(canvas);
dom.style.position = 'absolute';
dom.style.opacity = '0';
// 将GIF绘制在canvas上
imageDecoder = new ImageDecoder({
data: response.body,
type: "image/gif"
});
// 解析第一帧并绘制
imageDecoder.decode({
frameIndex: imageIndex
}).then(renderImage);
});
// 事件绑定处理
canvas.addEventListener,dom.addEventListener('ended',function () {
if (paused) {
paused = false;
renderImage(canvas.nextResult);
} else {
paused = true;
}
});
an.addEventListener('click', function () {
if (paused) {aud.play();d1.style.animationPlayState =an.style.animationPlayState =player.style.animationPlayState = 'running';
paused = false;
renderImage(canvas.nextResult);
} else {aud.pause();d1.style.animationPlayState =an.style.animationPlayState =player.style.animationPlayState = player.style.animationPlayState = 'paused'; paused = true;
}
});
player.addEventListener('click', function () {
if (paused) {aud.play();d1.style.animationPlayState =an.style.animationPlayState =player.style.animationPlayState = 'running';
paused = false;
renderImage(canvas.nextResult);
} else {aud.pause();d1.style.animationPlayState =an.style.animationPlayState =player.style.animationPlayState = player.style.animationPlayState = 'paused';paused = true;
}
});
};
renderGif(source); renderGif(source1);renderGif(source2);
</script>
<script>
(function() {
let lrc = `
风吹散心头的思念(遗憾版)顾语涵
词：周亦安
曲：周亦安
统筹：高七七
编曲：SN/周亦安
制作人：周亦安
【未经著作权人许可不得翻唱翻录或使用】
独自走在冷冷的街边
回忆如潮水涌入心间
那句再见还回荡耳边
如今只剩我苦苦怀念
曾经的温柔都已不见
留下的只有无尽心酸
爱到最后只剩下敷衍
我们再也回不到从前
风吹散那心头的思念
却吹不走心中的眷恋
爱恨纠缠都化成云烟
只留下这伤痛在蔓延
风吹散那心头的思念
往事一幕幕反复浮现
就算最后是情深缘浅
我也愿意用一生挂牵
曾经的温柔都已不见
留下的只有无尽心酸
爱到最后只剩下敷衍
我们再也回不到从前
风吹散那心头的思念
却吹不走心中的眷恋
爱恨纠缠都化成云烟
只留下这伤痛在蔓延
风吹散那心头的思念
往事一幕幕反复浮现
就算最后是情深缘浅
我也愿意用一生挂牵
`;
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);
})();
let fs = true;
fullscreen.onclick = () => {
if (fs) {
fullscreen.innerText = '退出全屏';
papa.requestFullscreen();
} else {
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
</script>
漂亮~谢谢亚伦老师精彩分享{:4_190:} 欣赏佳作，问候亚伦。 好漂亮的变色音画，小播巧妙地设计成了音响的开关。频谱效果也好。动画能逐帧暂停。
新亚伦老师好帖{:4_199:} 欣赏亚纶精彩的制作，漂亮的变色背景，{:4_199:}
页:
[1]