别再说我们只是过客演唱：梅朵

亚伦影音工作室 · 发表于 2024-2-29 15:11

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

[i=s] 本帖最后由亚伦影音工作室于 2024-4-1 14:57 编辑 [/i]

[00:00.000]别再说我们只是过客 [00:02.803]演唱：梅朵 [00:05.606]作词：宋立国 [00:08.409]作曲：徐青春 [00:11.212]编曲：闫石 [00:14.015]和声：凌菲 [00:16.818]混音：王宇鹏 [00:19.621]制作：亚伦影音工作室 [00:22.424]发行：亚伦传媒 [00:25.230]我曾用心为你付出过 [00:30.900]小心翼翼不让你难过 [00:36.660]在岁月的长河相遇你和我 [00:42.390]我想陪你沐浴着爱河 [00:48.090]只怪时间让人难琢磨 [00:53.760]风风雨雨经不起坎坷 [00:59.550]在人生的路上都有权选择 [01:05.220]心碎的我却无可奈何 [01:10.980]别再说我们只是过客 [01:16.710]别再说这一切没结果 [01:22.380]既然相爱过真心付出了 [01:28.080]滚滚的红尘相遇多难得 [01:33.810]别再说我们只是过客 [01:39.540]别再说这都是谁的错 [01:45.180]许下的承诺如花瓣凋落 [01:50.970]我不想今生与你擦肩过 [02:19.530]只怪时间让人难琢磨 [02:25.170]风风雨雨经不起坎坷 [02:30.960]在人生的路上都有权选择 [02:36.630]心碎的我却无可奈何 [02:42.390]别再说我们只是过客 [02:48.120]别再说这一切没结果 [02:53.790]既然相爱过真心付出了 [02:59.520]滚滚的红尘相遇多难得 [03:05.250]别再说我们只是过客 [03:10.980]别再说这都是谁的错 [03:16.590]许下的承诺如花瓣凋落 [03:22.410]我不想今生与你擦肩过 [03:28.020]许下的承诺如花瓣凋落 [03:33.840]我不想今生与你擦肩过

庶民 · 发表于 2024-2-29 17:17

很美的。

小辣椒 · 发表于 2024-2-29 20:20

亚伦这个页面打开有提示，而且加分也是一样，不点击还不让看

小辣椒 · 发表于 2024-2-29 20:26

精美的效果，这个好像是黑黑分享的过的千灯展卷效果吧，特别的漂亮

小辣椒 · 发表于 2024-2-29 20:30

亚伦可以把这个提示去了吗？回帖和看帖好麻烦，不点击不让回帖

登录/注册后可看大图

红影 · 发表于 2024-2-29 20:57

这个泡泡的粒子好漂亮呢，欣赏亚伦老师好帖

冬天的雨 · 发表于 2024-2-29 22:14

特效精彩

冬天的雨 · 发表于 2024-2-29 22:15

欣赏好制作，感谢分享

老谟深虑 · 发表于 2024-3-1 18:20

欣赏老师的精美音画，请老师能够教教我们，为什么你的代码到离退休论坛发表同步歌词就不显示，谢谢！

马黑黑 · 发表于 2024-3-2 11:39

粒子加载在了body元素，应加载在帖子 id="papa" 的元素里。

JS代码中有一个变量 pa，这个变量定义给了body元素，papa 才是帖子父元素的id

马黑黑 · 发表于 2024-3-2 20:07

以下代码基于本帖修改前的某一时段的代码，主要是梳理和格式化一下代码样式，修改极少量关键性错误（有注释）：

<style>
#papa {
position: relative;
width: 1164px;
height: 620px;
background: #000000 url(https://pic.imgdb.cn/item/65bf0270871b83018a3ad9aa.jpg)no-repeat center/cover;
display: grid;
place-items: center;
overflow: hidden;
margin-top: 150px;
margin-left: -300px;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 8px #880000;
z-index: 123456;
}
audio {
position: absolute;
top: 580px;
z-index: 50;
width: 98%;
height: 40px;
outline: none;
filter: invert(180);
}
audio::-webkit-media-controls-enclosure {
background: transparent;
border-radius: 4px;
}
.media-controls-container,
.media-controls-container * {
background: rgb(129, 73, 200);
/* 滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8) #7eb637（CSS注释不能用 //） */
border-radius: 4px;
}
audio::-webkit-media-controls-current-time-display {
order: 1; /* 设置弹性盒对象元素的顺序 */
color: #ffffff;
text-shadow: unset;
}
audio::-webkit-media-controls-time-remaining-display {
order: 2;
color: #000000;
text-shadow: unset;
}
#lrc {
left: 10%;
top: 75%;
}
#lrcc {
left: 90%;
transform: translate(-102%);
top: 85%;
}
#lrc,
#lrcc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(89deg, #EE0000 12%, #078504 35%, #060344 65%, #DE0000 90%);
border: 0px solid black;
position: absolute;
z-index: 6;
font: normal 3em '华文新魏'; /* 中文字体要用引号 */
color: #222222;
white-space: pre;
-webkit-background-clip: text;
/* 多重 drop-shadow 正确写法如下 */
filter: drop-shadow(1px 0 0 #ffffff) drop-shadow(0 1px 0 #ffffff) drop-shadow(-1px 0 0 #ffffff) drop-shadow(0 -1px 0 #ffffff);
z-index: 15;
}
#lrcc::before,
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 100%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
clip-path: inset(0% 100% 0 0);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1 {
to {
clip-path: inset(0 0% 0 0);
}
}
@keyframes cover2 {
to {
clip-path: inset(0 0 0 0);
}
}
.cemp {
z-index: 5;
width: 1164px;
position: absolute;
left: 140px;
top: 23%;
margin: 0px auto;
}
.box {
z-index: 5;
position: relative;
width: 300px;
height: 220px;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 5px #D2691E;
}
.box:nth-child(1) {
background: url(https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg)no-repeat center/cover;
left: 0px;
top: 0px;
position: absolute;
animation: moveo 3s 2.25s infinite;
}
.box:nth-child(2) {
left: 0px;
top: 0px;
position: absolute;
background: url(https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg)no-repeat center/cover;
animation: moveo 3s 1.5s infinite;
}
.box:nth-child(3) {
left: 0px;
top: 0px;
position: absolute;
background: url(https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg)no-repeat center/cover;
animation: moveo 3s 0.75s infinite;
}
.box:nth-child(4) {
left: 0px;
top: 0px;
position: absolute;
background: url(https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg)no-repeat center/cover;
animation: moveo 3s infinite;
}
.stop .box:nth-child(1),
.stop .box:nth-child(2),
.stop .box:nth-child(3),
.stop .box:nth-child(4) {
animation-play-state: paused;
}
@keyframes moveo {
0% {
transform: perspective(400px) translate(0) scale(1) rotateY(0deg);
z-index: 0;
}
25% {
transform: perspective(400px) translate(300px) scale(1.5, 1.5) rotateY(50deg);
z-index: 10;
}
50% {
transform: perspective(400px) translate(600px) scale(1) rotateY(0deg);
z-index: 0;
}
75% {
transform: perspective(1200px) translate(300px) scale(.5, .5) rotateY(-50deg);
z-index: -10;
}
100% {
transform: perspective(400px) translate(0) scale(1) rotateY(0deg);
z-index: 0
}
}
li-zi {
z-index: 6;
margin: 400px auto;
position: absolute;
background: url('https://pic.imgdb.cn/item/65bf44e6871b83018a0bba00.png')0 0/cover;
offset-path: path('M0 400 Q570 -260 1140 400');
offset-distance: 0;
animation: move 10s linear infinite var(--state), rotating 5s infinite var(--state);
}
@keyframes move {
to {
offset-distance: 100%;
filter: hue-rotate(360deg)contrast(100%)brightness(150%);
}
}
</style>
<div id="papa">
<div class="cemp" id="testImg">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<audio id="aud" loop controls>
<source src="https://mp3.t57.cn:7087/kwlink_d.php?id=273761272" type="audio/mp3" />
</audio>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<span id="lrcStr" style="visibility: hidden;">
[00:00.000]别再说我们只是过客
[00:02.803]演唱：梅朵
[00:05.606]作词：宋立国
[00:08.409]作曲：徐青春
[00:11.212]编曲：闫石
[00:14.015]和声：凌菲
[00:16.818]混音：王宇鹏
[00:19.621]制作：亚伦影音工作室
[00:22.424]发行：亚伦传媒
[00:25.230]我曾用心为你付出过
[00:30.900]小心翼翼不让你难过
[00:36.660]在岁月的长河相遇你和我
[00:42.390]我想陪你沐浴着爱河
[00:48.090]只怪时间让人难琢磨
[00:53.760]风风雨雨经不起坎坷
[00:59.550]在人生的路上都有权选择
[01:05.220]心碎的我却无可奈何
[01:10.980]别再说我们只是过客
[01:16.710]别再说这一切没结果
[01:22.380]既然相爱过真心付出了
[01:28.080]滚滚的红尘相遇多难得
[01:33.810]别再说我们只是过客
[01:39.540]别再说这都是谁的错
[01:45.180]许下的承诺如花瓣凋落
[01:50.970]我不想今生与你擦肩过
[02:19.530]只怪时间让人难琢磨
[02:25.170]风风雨雨经不起坎坷
[02:30.960]在人生的路上都有权选择
[02:36.630]心碎的我却无可奈何
[02:42.390]别再说我们只是过客
[02:48.120]别再说这一切没结果
[02:53.790]既然相爱过真心付出了
[02:59.520]滚滚的红尘相遇多难得
[03:05.250]别再说我们只是过客
[03:10.980]别再说这都是谁的错
[03:16.590]许下的承诺如花瓣凋落
[03:22.410]我不想今生与你擦肩过
[03:28.020]许下的承诺如花瓣凋落
[03:33.840]我不想今生与你擦肩过
</span>
<script>
let autoplayPromise = aud.play(); // 命令video播放并获取Promise对象
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
(function() {
/*变量：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0, averAdd = 0.3;
/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar[key][2] = item > aver ? aver : item;
});
return ar;
};
/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
let lrcAr = [];
let arr="";
let calcRule = [60,1,0.001];
for(x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re,'');
if(geci) {
geci = geci.replace(/[\[\]\'"\t,]s?/g,'');
let time = x.match(re);
if(time != null) {
for(y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for(z in tmp) sec += tmp[z] * calcRule[z];
ar[0] = [parseFloat(sec.toFixed(2)), geci];
lrcAr.push(ar[0]);
}
}
}
}
lrcAr.sort((a,b)=> a[0] - b[0]);
return(lrcTime(lrcAr));
};
/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
lrca=lrcAr[mKey][1];
lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr[mKey+1][1];//判断最后一句歌词
let Y=String(mKey/2).indexOf(".");
if (Y == -1)
{
0==mKey&&(lrc.innerHTML=lrca);
lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
lrcc.dataset.lrc = "";
lrc.style.setProperty('--motion', 'cover1');
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
}
else
{
lrc.innerHTML = lrcb;
lrcc.dataset.lrc = lrca;
lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
lrcc.style.setProperty('--tt', time + 's');
lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
}
mKey += 1;
};
/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr[j][0]) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
showLrc(time);
};
/*函数：关键帧动画状态切换*/
let mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"));
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr[j][0]) {
cKey = j;
if (mKey === j) showLrc(lrcAr[j][2]);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
var pa= document.querySelector('body');
var mState = () => aud.paused ?
(papa.style.setProperty('--state', 'paused')) :
(papa.style.setProperty('--state', 'running'));
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
Array.from({length: all=40}).forEach(star => {
var size = 20 + Math.floor(Math.random() * 30);
star = document.createElement('li-zi');
star.style.cssText += `
left: 0;
top: ${Math.random() * 140 + 60}px;
width: ${size}px;
height: ${size}px;
opacity: ${Math.random() * 0.4 + 0.4 };
animation-delay: -${Math.random() * 10}s, -${Math.random() * 5}s;
`;
papa.prepend(star);
});
</script>

复制代码

亚伦影音工作室 · 发表于 2024-3-2 20:45

马黑黑发表于 2024-3-2 20:07
以下代码基于本帖修改前的某一时段的代码，主要是梳理和格式化一下代码样式，修改极少量关键性错误（有注释 ...

一目了然的代码，

马黑黑 · 发表于 2024-3-2 20:56

亚伦影音工作室发表于 2024-3-2 20:45
一目了然的代码，

梳理一下而已。很多编辑器都自带这个工具

[特效音画] 别再说我们只是过客 演唱：梅朵

请马上登录，朋友们都在花潮里等着你哦：）

评分

浏览过的版块

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

奔放热烈

春风拂面

缤纷心情

王者至尊

大将风范

金剪刀

音画大师

天籁妙音

妙笔生花

男儿情怀

飞龙在天

逍遥自在

花潮超版

花潮美女

多彩人生

星月交辉

海样胸怀

火热情怀

优雅迷人

神秘浪漫

草莓情怀

青草情怀

蝴蝶情怀

心曲飞扬

星星情怀

七彩绚丽

活泼开朗

女儿情怀

鹰傲苍穹

心香一瓣

风雨同行

我心永远

喜乐安康

中秋征文

指尖上的流年

花潮管理

相遇之美

一往情深

花好月圆

紫色情节

天长地久

幸福快乐

绚丽缤纷

周年庆

舞会之星

分析（喊冤）章

总结章

杀人王

小强章

最佳杀刺

临屏写诗

七夕诗钟活动

第五届风云

第六届风云

情人节

共看流星

花潮版主

侠骨柔肠

心想事成

开朗大方

[特效音画] 别再说我们只是过客演唱：梅朵