风起的时候-恰恰恰恰恰
本帖最后由 亚伦影音工作室 于 2026-3-9 14:18 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");#bj {
position: relative;
width: 1186px;
height: 680px;
margin-left: -300px;
margin-top: 10px;
overflow: hidden;
background:#000 url("https://pic1.imgdb.cn/item/698465b7312b01a291a531ec.jpg")no-repeat;
background-size: cover;font-family: "Ma Shan Zheng","仿宋体","SimHei", "Arial", "sans-serif"
}
#background{z-index: 1;
width: 100%; height: 100%;
background: url("https://pic1.imgdb.cn/item/698465b7312b01a291a531ec.jpg")no-repeat;
position: absolute;
top: 0px;
left: 0px;
animation: c 8s linear infinite;
background-size: cover;
}
@keyframes c {
from{transform: scale(1) ;filter: hue-rotate(0deg);
}
50%{transform: scale(4);
}
100%{transform: scale(4);opacity: 0;
}
}
.lyrics{margin: 0;z-index: 20;
top: 69%;display: none;
left: 50%;
transform: translate(-50%, -50%);
height: 100px; /* 调整高度，只容纳当前歌词 */
text-align: center;
position: absolute;animation:sese 1s infinite alternate;
}
.lyric-line{
width: 100%;
position: relative;
height: 60px;
overflow: visible;
font: 400 40px "Ma Shan Zheng","仿宋体","SimHei", "Arial", "sans-serif";
line-height: 60px;
text-align: left;
white-space: nowrap; /* 禁止换行 */
filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
}
.lyric-mask {
position: absolute;
top: 0;
left: 0;
width: 0;
overflow: hidden;
color: #ff0000;
height: 100%;
white-space: nowrap;
}
.lyric-original {
color: #00aa00;
white-space: nowrap;
}
#wrapper {z-index: 9;
position: absolute; writing-mode: vertical-lr;white-space: pre; width: 60px;height: 90%;top: 50px; left: 88%;
padding: 0px;
font:normal 2.6em "Ma Shan Zheng","仿宋体","SimHei", "Arial", "sans-serif";
filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
}
.char {
display: inline-block;
padding: 2px 2px;
opacity: 0;
transform: translate(var(--x), var(--y));
animation: fadeIn 1.5s var(--delay) forwards, sese 1s infinite alternate;
}
@keyframes fadeIn {
to {
transform:scale(1);
opacity: 1;
}
}
@keyframes flash {
to { filter: hue-rotate(360deg)brightness(100%); }
}
.lrc { z-index: 21; position: absolute; top: 20%; left: 41%; width: 740px; height: 350px; overflow: hidden; opacity: 0;}
.lrc #ul { width: 100%; padding: 0; list-style: none; transition: 0.3s all ease; margin: 0; }
.lrc #ul li { color: #fff; font: 300 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: #FF0000; font-weight: 650; }
#s,#dh, #d, #g,#fullscreen{border-radius: 4px;position: relative;
color:#fff;background:#0000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 8px;z-index: 120;
font-size: 12px;
border: none;
cursor: pointer;top: 50px;left: 3%;
}
#bfq{
position:absolute;
width: 350px;
height:350px;overflow: hidden;
background: url('https://pic1.imgdb.cn/item/69ae5a3fafde4f1fb1c6982e.png') no-repeat center/100%;
transform:scale(.28);top: 66%; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #000;
left: -120px;z-index: 20;}
#cp{
position:absolute;
width: 245px;border-radius: 50%;
height:245px;animation: rotating 6s infinite linear;
top:19%;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
cursor: pointer;
left: 11%;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:-3%; left:50%;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(0deg);transform-origin: 100% 0%;}
.purple {transform-origin: 80% 0%;margin: 0px -25px;transform:rotate(-20deg);}
#biao{
position:absolute;background:#800000 url('https://pic1.imgdb.cn/item/69ac017f3dbab1ba32d7193b.png') no-repeat center/100% 100%;width:620px;height: 350px;border-radius:2%;transform:scale(0.2);
top: 62%; left: 25%;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #000;
animation:sese 6sinfinite alternate;z-index: 20;
}
#zhen{position: absolute; transform: translate(-50%, -50%);
background:#ff0000;width:4px;height: 185px;border-radius:0% 0% 50% 50%;
transform-origin:center 0%;top: 270px; left: 50%;
animation:swin 0.4s ease-in-out infinite alternate;
}
#zhe{position: absolute; transform: translate(-50%, -50%);
background:#ff0000;width:4px;height: 185px;display: none;border-radius:0% 0% 50% 50%;
transform-origin:center 0%;top: 270px; left: 50%;
animation:swsw 1s ease-in-out infinite alternate;
}
#dian { width: 20px;height: 20px; background: #fff;top: 270px; left: 50%;position: absolute;
border-radius:50%;transform: translate(-50%, -50%);
}
@keyframes swin{
100%{
transform:rotate(-180deg);
}
60%{
transform:rotate(-160deg);
}
40%{
transform:rotate(-170deg);
}
0%{
transform:rotate(-140deg);
}
}
@keyframes swsw{
0%{
transform:rotate(-235deg);
}
100%{
transform:rotate(-235deg);
}
}
@keyframes sese{
0%{filter:hue-rotate(360deg)contrast(110%)brightness(90%);
}
}
#ba{
position: absolute;background: url('https://pic1.imgdb.cn/item/69ae5f7dafde4f1fb1c698f3.png') no-repeat center/100%;width:200px;height: 200px;border-radius:2%;transform:scale(0.5);box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 4px #000;
top: 77%; right: -4%;z-index: 20;
}
#laba{position: absolute; transform: translatex(-50%);
background:url('https://pic1.imgdb.cn/item/69abf5b03dbab1ba32d6bd4d.png') no-repeat 0px 0px/100% 100%;width:150px;height: 150px;
top: 26px; left: 23px;text-align: center;cursor: pointer;
animation:sin 0.6sinfinite alternate;
}
@keyframes sin{
100%{
transform:scale(1);
}
40%{
transform:scale(1.02);
}
0%{
transform:scale(1);
}
}
#playbtn{margin: 0 120px ;top: 94.5%;width: 30px; height: 30px;position: absolute;cursor: pointer; z-index: 90;}
#cndpt{position: absolute; width: 80%; height:80%;
background:#fff;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 80%; height: 80%;
opacity:0; background:#fff;
clip-path: polygon(75% 50%, 0 0, 0 100%)
}
#prog {position:absolute;
width: 68%;
height: 6px;background:#fff;
cursor: pointer;
bottom: 3%;border-radius: 2px;
left:13%;z-index: 190;}
#prog-bar {border-radius: 2px;
height: 100%;
background: #880000;
width: 0%;
}
#tmsg {position:absolute;
font: 600 14px sans-serif;
color: #fff;
bottom: 2%;
right: 10%;z-index: 90;}
</style>
<div id="bj">
<div class="s" id="background"></div>
<div id="bfq">
<div id="cz"class="pink"></div>
<div id="cp"><div class="inner"></div> <div class="overlay"></div></div>
</div>
<div id="biao">
<div id="zhen"></div>
<div id="zhe"></div>
<div id="dian"></div>
</div>
<div id="ba">
<div id="laba"></div>
</div>
<div id="wrapper">风起的时候-恰恰恰恰恰</div>
<div class="lyrics" >
<div class="lyric-line">
<div class="lyric-mask"></div>
<div class="lyric-original"></div>
</div>
</div>
<div class="lrc">
<ul id="ul"></ul>
</div>
<div>
<span id="g" title="横/竖歌词模式">横排歌词</span>
<span id="d" onclick="btn()" title="多行歌词模式">多行歌词</span>
<span id="dh" onclick="btndh()" title="动画">动画变色</span>
<span id="s" onclick="btns()" title="动画">动画复原</span>
<span id="fullscreen" title="屏展模式">全屏欣赏</span>
</div>
<div id="playbtn" title="暂停">
<div id="cndpt"title="暂停"></div>
<div id="enopg" title="播放"></div>
</div>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
<div id="tmsg"></div>
</div>
<audio id="aud" src="https://s2.cldisk.com/sv-w9/audio/b1/81/87/ce3495809a5ea5527f478b2785fe8164/audio.mp3" loop autoplay></audio>
<script>
const lrc = `风起的时候
演唱歌手：恰恰恰恰恰
出品 亚伦影音工作室
风起的时候 我又想起你
却等不到你的归期
你模糊背影消散人海里
今生的缘来世再续
秋风总是笑我还没忘记你
我笑秋风无情无义
就算爱来爱去爱不到结局
入心的你一生痴迷
我回望从前 满眼都是你
如今满眼是回忆
断了你联系断不掉过去
偏偏戒不掉痴迷
我把一片真心都给了你
不怕会输得一败涂地
世间的聚散 本就没道理
不知余生能否再见你
秋风总是笑我还没忘记你
我笑秋风无情无义
就算爱来爱去爱不到结局
入心的你一生痴迷
我回望从前 满眼都是你
如今满眼是回忆
断了你联系断不掉过去
偏偏戒不掉痴迷
我把一片真心都给了你
不怕会输得一败涂地
世间的聚散 本就没道理
不知余生能否再见你
`;
const aud= document.getElementById('aud');
const lyrics = parseLyrics(lrc);
const lyricMask = document.querySelector('.lyric-mask');
const lyricOriginal = document.querySelector('.lyric-original');
let currentIndex = -1;
let currentLyric = null;
// 解析歌词（支持两种格式）
function parseLyrics(lrcText) {
const lyrics = [];
if (lrcText.includes('karaoke.add')) {
const lineRegex = /karaoke\.add\('([^']+)', '([^']+)', '([^']+)', '([^']+)'\);/g;
let match;
while ((match = lineRegex.exec(lrcText)) !== null) {
const startTime = timeToMs(match);
const endTime = timeToMs(match);
const text = match.replace(/\[|\]/g, '').trim();
const durations = match.split(',').map(Number);
if (text) {
lyrics.push({startTime, endTime, text, durations});
}
}
}
else if (lrcText.includes('[')) {
const lines = lrcText.split('\n').filter(line => line.trim());
lines.forEach((line, index) => {
const timeMatch = line.match(/\[(\d+:\d+\.\d+)\]/);
if (timeMatch) {
const timeStr = timeMatch;
const text = line.replace(/\[.*?\]/, '').trim();
if (text) {
const startTime = timeToMs(timeStr);
const nextLine = lines;
const nextTimeMatch = nextLine ? nextLine.match(/\[(\d+:\d+\.\d+)\]/) : null;
const endTime = nextTimeMatch ? timeToMs(nextTimeMatch) : startTime + 5000;
lyrics.push({
startTime,
endTime,
text,
durations: calculateCharDurations(text, startTime, endTime)
});
}
}
});
}
return lyrics;
}
function calculateCharDurations(text, startTime, endTime) {
const totalDuration = endTime - startTime;
const charCount = text.length;
const baseDur = Math.floor(totalDuration / charCount);
const durations = new Array(charCount).fill(baseDur);
const remainder = totalDuration % charCount;
for (let i = 0; i < remainder; i++) {
durations++;
}
return durations;
}
function timeToMs(timeStr) {
const parts = timeStr.split(':');
const minutes = parseInt(parts, 10);
const secondsAndMs = parts.split('.');
const seconds = parseInt(secondsAndMs, 10);
const ms = parseInt(secondsAndMs || 0, 10);
return minutes * 60 * 1000 + seconds * 1000 + ms;
}
function getCurrentLyricIndex(lyrics, currentTimeMs) {
for (let i = 0; i < lyrics.length; i++) {
if (currentTimeMs >= lyrics.startTime && currentTimeMs <= lyrics.endTime) {
return i;
}
}
return -1;
}
function updateLyricDisplay(index) {
if (index < 0 || index >= lyrics.length) return;
currentIndex = index;
currentLyric = lyrics;
lyricOriginal.textContent = currentLyric.text;
lyricMask.textContent = currentLyric.text;
lyricMask.style.width = '0%';
}
function updateLyricMask(currentTimeMs) {
if (!currentLyric) return;
const lyricStartTime = currentLyric.startTime;
const elapsed = currentTimeMs - lyricStartTime;
const totalDuration = currentLyric.durations.reduce((sum, d) => sum + d, 0);
let charIndex = 0;
let accumulatedTime = 0;
for (let i = 0; i < currentLyric.durations.length; i++) {
accumulatedTime += currentLyric.durations;
if (elapsed <= accumulatedTime) {
charIndex = i + 1;
break;
}
}
if (elapsed >= totalDuration) {
charIndex = currentLyric.text.length;
}
charIndex = Math.min(charIndex, currentLyric.text.length);
const tempSpan = document.createElement('span');
tempSpan.style.visibility = 'hidden';
tempSpan.style.position = 'absolute';
tempSpan.style.fontSize = '50px';
tempSpan.style.fontWeight = '300';
document.body.appendChild(tempSpan);
const visibleText = currentLyric.text.substring(0, charIndex);
tempSpan.textContent = visibleText;
const width = tempSpan.offsetWidth;
document.body.removeChild(tempSpan);
lyricMask.style.width = `${width}px`;
}
// 监听更新歌词
aud.addEventListener('timeupdate', () => {
const currentTimeMs = aud.currentTime * 1000;
const index = getCurrentLyricIndex(lyrics, currentTimeMs);
if (index !== currentIndex) {
updateLyricDisplay(index);
}
updateLyricMask(currentTimeMs);
});
updateLyricDisplay(0);
const gcAr = lrc2HC(lrc);
let curkey = 0, isSeeking = false;
aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
aud.onended = () => {
curkey = 0;
aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr ? lrcAr : ;
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (aud.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
if (curkey < 0) curkey = 0;
if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
let time = gcAr?. ?? 0 - gcAr;
isSeeking = false;
showLrc(gcAr, wrapper, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.innerHTML = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? 600 : -300);
const y = Math.random() * (Math.random() > 0.5 ? 600 : -300);
span.style.cssText += `
color: #${Math.random().toString(16).substring(2,8)};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}
</script>
<script>
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>
var g1=document.getElementById("wrapper");
var dh=document.getElementById("background");
const g2 = document.querySelector('.lyrics');
const d = document.querySelector('.lrc');
const s = document.querySelector('.s');
functionbtn(){
d.style.opacity= '1';
g1.style.display = 'none';
g2.style.display = 'none';
};
functionbtndh(){
dh.style.filter= 'hue-rotate(360deg)';
dh.style.animation= 'c 6s linear infinite';
};
functionbtns(){
s.style.filter= 'hue-rotate(0deg)';
s.style.animation= 'c 6s linear infinite';
};
let fss = true;
g.onclick = () => {
if (fss) {g.innerText = '竖排歌词';
g1.style.display = 'none';
g2.style.display = 'block';
d.style.opacity= '0';
}else {g.innerText = '横排歌词';
g1.style.display = 'block';
g2.style.display = 'none';
d.style.opacity= '0';
}
fss = !fss;
};
let fs = true;
fullscreen.onclick = () => {
if (fs) {
fullscreen.innerText = '退出全屏';
bj.requestFullscreen();
} else {
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
prog.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
var progBar = document.getElementById('prog-bar');
aud.addEventListener('timeupdate', () => {
varpercent= (aud.currentTime / aud.duration) * 100;
progBar.style.width = percent + '%';
});
aud.addEventListener('timeupdate', () => {
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
playbtn.onclick=() => aud.paused ? (aud.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1',background.style.animationPlayState = 'running', cz.classList.remove('purple'),intro.style.animationPlayState = 'running') : (aud.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0',background.style.animationPlayState = 'paused',cz.classList.add('purple'),intro.style.animationPlayState = 'paused');
playbtn.style.animationPlayState = aud.paused ? 'paused': 'running';
let mState = () => aud.paused ? (zhen.style.display= 'none',zhe.style.display= 'block') : (zhen.style.display= 'block',zhe.style.display= 'none');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
const intro= document.querySelector('.intro');
laba.style.animationPlayState=cp.style.animationPlayState =aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>laba.style.animationPlayState=cp.style.animationPlayState= 'running');
aud.addEventListener('pause', () =>laba.style.animationPlayState=cp.style.animationPlayState= 'paused');
</script>
问好大哥那是频谱，不是过度音画 有时间多学习代码，别以为模仿，
但是模仿也可以学习好的东西（原创=啥意思） 为啥代码不共享（网络是共享平台）会一点点毛皮拷贝别人的代码就是我的原创，改改图片地址音乐地址就是你的原创（哈哈）有目的可以改改黑黑老师的电饭煲 好好的代码弄的烂七八糟 有时间好好研究研究代码慢慢来 不好意思亚伦老师说话直爽有点过了
漂亮的指针频谱效果，左右两个小动态也很漂亮，唱片效果很明显，喇叭效果不是很明显呢。
左上一排可选择的效果，这个太赞了！ 奇怪，这个帖子里我没办法点出表情呢，评分时也没办法选择分数只能手输评分数字。
不知道是哪句代码引起的。
制作很漂亮，功能很强大。欣赏亚伦老师好帖。 亚伦老师再看看？不能用表情还是挺难受的：） 本帖最后由 亚伦影音工作室 于 2026-3-9 16:08 编辑
寻梦花园 发表于 2026-3-9 14:42
问好大哥那是频谱，不是过度音画
没用过度只是动画别介意，我这只是模仿老师的，不过这些动画就是我个人瞎弄的并没有照抄老师的，型似并非老师的！ 亚伦的作品很有特色。 制作精致，效果精美，大师风范~恭喜亚伦老师再创新高{:4_180:} 欣赏老师的佳作，学习了！
页:
[1]