千万次想起你（DJ 默涵版）
本帖最后由 醉美水芙蓉 于 2023-7-21 21:56 编辑 <br /><br /> <style>#papa{margin: 10px -300px ;
width: 1164px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;
height: 620px;
border: 1px solid;
background: #333 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/03523bc590eab310a39f5575a149b11e_preview.jpg') no-repeat center/cover;
position: relative;z-index: 12345;}
:root { --state: running; --prg: 0%; --delay: 0s; }
.mydiv {width: 100%; height: 100%; overflow: hidden; z-index: 10; display: grid; place-items: center; position: relative; }
.heart { position: absolute; font: normal 30px sans-serif; animation: up 5s var(--delay) infinite var(--state); }
.heart:nth-of-type(2) { --delay: -2.5s; }
#mplayer { position: absolute; bottom: 10px; width: 200px; height: 40px; background: linear-gradient(to right,red var(--prg),#FFFFFF 0) repeat-x 0 50% / 100% 2px; }
#mplayer::before, #mplayer::after { position: absolute; top: 28%; font-size: 14px; }
#mplayer::before { content: attr(data-cu); left: -50px;color: #FFFFFF; }
#mplayer::after { content: attr(data-du); right: -50px;color: #FFFFFF; }
#btnplay { position: absolute; left: calc(var(--prg) - 15px); bottom: 24px; font: normal 2.2em/0em serif; cursor: pointer; animation: swing .3s infinite linear var(--state); color:#ffFFFF;}
@keyframes swing {from { transform: rotate(-10deg) skew(0deg); } to { transform: rotate(10deg) skew(0deg); } }
@keyframes up { 0% { opacity: 0; transform: rotate(0deg) translateY(0px); } 75% { opacity: 1; transform: rotate(-10deg) translateY(-300px); } 100% { opacity: 0; transform: rotate(-60deg) translateY(0px); } }
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #880000);
position: absolute;
left: 50%;z-index: 20;
transform: translate(-50%);
top: 80%;
font:normal 3.5em 华文隶书;
color: #0000;
white-space: pre;
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: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1{ 0% { width: 0%;letter-spacing: 15px; color:#000090;}100% { width: 350%; letter-spacing: 0px;color:#ff0000; } }
@keyframes cover2 {0% { width: 0%;letter-spacing: 0px; color:#00ff00;}100% { width: 350%; letter-spacing: 15px;color:#ff0000; }}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 3em华文隶书; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id='papa'>
<span id="fullscreen">全屏观赏</span>
<div id="lrc" data-lrc=" "> </div>
<div class="mydiv">
<span class="heart">💞</span>
<span class="heart">🍁</span>
<div id="mplayer" data-cu="00:00" data-du="00:00" title="调节进度">
<div id="btnplay" title="暂停/播放">🦚</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music281175829.mp3" loop autoplay></audio>
</div>
</div>
<script>
(function() {
let root = document.querySelector(':root');
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 = () => root.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { root.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); mplayer.dataset.cu = toMin(aud.currentTime); mplayer.dataset.du = toMin(aud.duration); });
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
mplayer.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
})();
(function() {
/*原始lrc歌词*/
let lrcStr = `
千万次想起你（DJ 默涵版）
作词：吉萨+海来阿木
作曲：吉萨
演唱：海来阿木
编曲：默涵
混音：默涵
OP：坚诚文化
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 (MusicPlayer.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (MusicPlayer.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'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = '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());/*监听查询事件*/
mplayer.addEventListener('click', () => { aud.paused ?aud.play() : aud.pause(); });
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>
芙蓉的制作很精彩，歌儿也好听{:4_187:} 千羽 发表于 2023-7-21 22:01
芙蓉的制作很精彩，歌儿也好听
谢谢千羽欣赏支持！很羡慕你制作的图图！ {:4_187:} 东篱闲人 发表于 2023-7-21 22:04
谢谢东篱老师欣赏支持！ 醉美水芙蓉 发表于 2023-7-21 22:05
谢谢东篱老师欣赏支持！
漂亮！{:4_204:} 醉美水芙蓉 发表于 2023-7-21 22:03
谢谢千羽欣赏支持！很羡慕你制作的图图！
俺也羡慕你的唯美制作和对代码的掌控能力{:4_181:} 千羽 发表于 2023-7-21 22:08
俺也羡慕你的唯美制作和对代码的掌控能力
我是三角猫，小辣椒，红影，清舟他们才是代码高手呢！都是黑黑老师的高徒呢！ 醉美水芙蓉 发表于 2023-7-21 22:12
我是三角猫，小辣椒，红影，清舟他们才是代码高手呢！都是黑黑老师的高徒呢！
你们都是代码高手，{:4_181:} 欣赏水芙蓉的精彩制作~~亚伦的代码也是漂亮的{:4_199:} 小辣椒 发表于 2023-7-21 22:30
欣赏水芙蓉的精彩制作~~亚伦的代码也是漂亮的
是黑黑老师代码和亚伦老师代码结合！ 这个做得漂亮，那些小点缀的位置也正好。水芙蓉美女的帖子好美{:4_199:} 漂亮！{:4_187:} 制作精湛！创意独特！太棒了....... 红影 发表于 2023-7-22 08:37
这个做得漂亮，那些小点缀的位置也正好。水芙蓉美女的帖子好美
谢谢红影美女支持！ 焱鑫磊 发表于 2023-7-22 08:45
漂亮！
谢谢朋友欣赏支持！ 非常开心 发表于 2023-7-22 09:51
制作精湛！创意独特！太棒了.......
谢谢开心老师支持！ 醉美水芙蓉 发表于 2023-7-22 11:57
谢谢红影美女支持！
问好水芙蓉美女，周六快乐{:4_187:}
页:
[1]