灿烂的你(Live 合唱版)-崔伟立,单图音画,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC

亚伦影音工作室 发表于 2024-12-26 20:07:43

灿烂的你(Live 合唱版)-崔伟立

本帖最后由亚伦影音工作室于 2024-12-26 20:07 编辑 <br /><br /><style>
#papa {margin: 10px -280px;
width: 1400px;
height: 740px;
background:linear-gradient(0deg, #000000 2%,#000000 8%,rgba(2, 2, 2, 0) 30%,rgba(52, 152, 219, 0) 100%,rgba(2, 2, 2, 0) 100%,black 100%), linear-gradient(135deg, #880000 0%,#000080 60%,#00ff00 100%);
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;--state: running;
z-index: 12345;}
.book-wrap {width: 45%;
         height: 55%;
   position: absolute;z-index: 3;
         left: 50%;
         top: 27%;
         transform: rotatez(6deg)rotateX(20deg);
         transform-style: preserve-3d;}
.page { width: 100%;
   height: 100%;
   position: absolute;background: url(https://pic.imgdb.cn/item/67162491d29ded1a8c210f14.jpg)no-repeat center/cover;
   border-radius: 0px;border: 12px solid #ddd;
   transform-origin: left;display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 0px 2px #000;
   background-size:100% 100%;}
.book-content1{animation: roll4s 18s 4;background: url(https://pic.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg)no-repeat center/cover}
.book-content2{animation: roll6s 16sinfinite var(--state);background: url(https://pic.imgdb.cn/item/6732aa3bd29ded1a8cf96a8e.webp)no-repeat center/cover}
.book-content3{animation: roll8s 14sinfinite var(--state);background: url(https://pic.imgdb.cn/item/6732a9bed29ded1a8cf916f5.webp)no-repeat center/cover}
.book-content4{animation: roll 10s 12sinfinite var(--state);background: url(https://pic.imgdb.cn/item/6732aa0cd29ded1a8cf9467a.webp)no-repeat center/cover}
.book-content5{animation: roll 12s 10s1 var(--state);background: url(https://pic.imgdb.cn/item/6732aa17d29ded1a8cf94f4f.webp)no-repeat center/cover}
.book-content6{animation: roll 14s8s2 var(--state);background: url(https://pic.imgdb.cn/item/6732a9fed29ded1a8cf93f09.webp)no-repeat center/cover}
.book-content7{animation: roll 16s6s5 var(--state);background: url(https://pic.imgdb.cn/item/6732a9f0d29ded1a8cf936c6.webp)no-repeat center/cover}
.book-content8{animation: roll 18s4s2 var(--state);background: url(https://pic.imgdb.cn/item/671d8e6dd29ded1a8cbf3d68.jpg)no-repeat center/cover}
.book-content9{animation: roll 20s2s 3 var(--state);background: url(https://pic.imgdb.cn/item/671d8d6ed29ded1a8cbe9b99.jpg)no-repeat center/cover}
@keyframes roll {
0% {transform: rotateY(0deg);opacity: 1;}
4% {transform: rotateY(-8deg);opacity: 1;}
30% {transform: rotateY(-170deg);opacity: 1;}
40% {transform: rotateY(-178deg);opacity: 1;}
50% {transform: rotateY(-180deg);opacity: 1;}
95% {transform: rotateY(-180deg);opacity: 1;}
100% {transform: rotateY(-180deg);opacity: 0;}
}
#mBtn {width: 38px;position:absolute;height: 38px ;bottom: 30px;left:6%;background:#ccc url(https://pic.imgdb.cn/item/64f65d84661c6c8e548108b7.gif)no-repeat center/cover;border: 0px solid transparent;}
#mBtn:hover {cursor: pointer;background:#00ff00;}
.play {clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
   border-style: double;}
.pause {clip-path: polygon(75% 50%, 0 0, 0 100%)}
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg:url(https://pic.imgdb.cn/item/64f65d84661c6c8e548108b7.gif)no-repeat center/cover;
position: absolute;z-index: 6;left: 50%; top: 82%;transform: translate(-50%);font:normal 3.5em 华文隶书; font-weight:400;color: #000080;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);}
#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); } }
</style>

<div id="papa">
<div class="book-wrap" >
<div class="page " > </div>
<div class="pagebook-content1"> </div>
<div class="pagebook-content2" > </div>
<div class="page book-content3"> </div>
<div class="pagebook-content4" > </div>
<div class="pagebook-content5" > </div>
<div class="pagebook-content6"> </div>
<div class="pagebook-content7"> </div>
<div class="pagebook-content8" > </div>
<div class="page book-content9"> </div>
</div>
<div id="mBtn" class="play"></div>
<div data-lrc="" id="lrc"></div>
</div>
<audio id="aud" src="https://disk.111t.net/filestores/2024/08/16/e713586e961cb0e4f47061e97cee542a.mp3" loop autoplay></audio>
<script>
let btnflag =true;
mBtn.onclick = () => {aud.paused ? (aud.play()) : (aud.pause());
mBtn.className = btnflag ? 'play pause' : 'play';
btnflag = !btnflag;
}

mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `灿烂的你(Live 合唱版)-崔伟立
词：崔伟立
曲：崔伟立
混音：毅然音乐
合唱：毅然合唱团
出品人：崔伟立
推广：汉马文化@小开
LRC编辑：亚伦
经过多少次的难关
降临在这人间
流过多少的泪和汗
求一个圆满
人生如沧海里行船
有风雨有雷电
扬起理想的风帆
奔赴长生天的召唤
我们跨过万水越过千山
以梦为马清风为伴
脚步比远方还要远
一路不停勇往直前
我们不惧千难不怕万险
把所有风景都看遍
不负时光不负流年
生命比烟花还灿烂
经过多少次的难关
降临在这人间
流过多少的泪和汗
求一个圆满
人生如沧海里行船
有风雨有雷电
扬起理想的风帆
奔赴长生天的召唤
我们跨过万水越过千山
以梦为马清风为伴
脚步比远方还要远
一路不停勇往直前
我们不惧千难不怕万险
把所有风景都看遍
不负时光不负流年
生命比烟花还灿烂
我们跨过万水越过千山
以梦为马清风为伴
脚步比远方还要远
一路不停勇往直前
我们不惧千难不怕万险
把所有风景都看遍
不负时光不负流年
生命比烟花还灿烂
不负时光不负流年
生命比阳光还灿烂
谢谢欣赏`;

/*变量：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = ;
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 * calcRule;
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a,b)=> a - b);
return(lrcTime(lrcAr));
};

/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};

/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};

/*格式化时间信息*/
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;
}

/*函数：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>

klxf 发表于 2024-12-26 23:14:57

真漂亮，正能量满满，谢谢亚伦老师精彩分享:)

醉美水芙蓉 发表于 2024-12-27 11:31:12

又见亚伦老师精彩播放器！

醉美水芙蓉 发表于 2024-12-27 11:31:43

老师的播放器真漂亮！

醉美水芙蓉 发表于 2024-12-27 11:37:47

老师手机这么多美女做相册，真漂亮！

醉美水芙蓉 发表于 2024-12-27 11:44:31

播放器按钮要靠右一点点估计手机也能听到歌了！

1643091610 发表于 2025-1-3 15:55:31

藕是来打酱油滴...

页: [1]

纳兰音画网's Archiver

灿烂的你(Live 合唱版)-崔伟立