【仙女山的月亮】学习黑师心恋原始歌词同步
本帖最后由 雨中悄然 于 2023-2-21 07:47 编辑 <br /><br /><style>#papa {
margin: -30px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: gray url('https://pic.imgdb.cn/item/63f36e65f144a01007d8b9ed.jpg') no-repeat center/cover;
box-shadow: 8px 4px 20px hsla(0,0%,0%,.65);
user-select: none;
perspective: 3000px;
position: relative;
z-index: 1;
}
</style>
<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1482864710.mp3" loop autoplay></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 15px; left: 50%; transform: translate(-50%)',player_css: 'bottom: 5px; left: 50%; transform: translate(-50%)',playerCode: `<style>#mplayer {--ww: 300px;--hh:100px;--state: paused;position: absolute;width: var(--ww);height: var(--hh);transform-style: preserve-3d;animation: rot3d 120s infinite linear;animation-play-state: var(--state);cursor: pointer;z-index: 889;}.mline {position: absolute;width: 8px;height: 10px;bottom: 0;left: calc(50% - 4px);border-radius: 10px;transition: .35s;opacity: .95;}.mline::before {position: absolute;content: '';width: 12px;height: 12px;left: calc(50% - 6px);background: var(--psecolor);border-radius: 50%;transition: all var(--ts);animation: up 1s infinite;animation-play-state: var(--state);}#lrc { --motion: cover2; --tt: 1s; --state: running; --bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65)); position: absolute; font: bold 2.4em sans-serif; color: hsl(100, 100%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85)); z-index: 900; }#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }@keyframes cover1 { from { width: 0; }to { width: 100%; } }@keyframes cover2 { from { width: 0; }to { width: 100%; } }@keyframes rot3d { to { transform: rotateY(1turn); } }@keyframes up { to { top: -20px; } }</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0,mFlag = true;mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();let total = Math.floor(mplayer.offsetWidth / 5),mRad = Math.floor(mplayer.offsetWidth / 2);for (j = 0; j < total; j++) {let ele = document.createElement('span');ele.className = 'mline';ele.style.cssText += `background: linear-gradient(to bottom, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});transform: rotateY(${j*360/total}deg) translateZ(${mRad}px);--psecolor: linear-gradient(135deg, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});--ts: ${Math.random()}s;`;mplayer.appendChild(ele);}let lines = document.querySelectorAll('.mline');function update() {lines.forEach((item, key) => {let ph = aud.paused ? 0 : mplayer.offsetHeight;item.style.height = Math.random() * ph + 'px';});}aud.addEventListener('timeupdate', () => {update();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), mplayer.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'), mplayer.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};};mkPlayer.HCPlayer = playCode;})(this);
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
/* 变量 averAdd : 歌词用时平均值补偿; offset : lrc时间偏差值 */
let averAdd =1, offset = 0.6;
let geci = `
仙女山的月亮
词曲：刘川郁
演唱：侃侃
LRC BY ：吉时雨
QQ 132 7269 041
www.90lrc.cn ★
冰凉如水的夜晚
月亮从松林升起
他们依偎在草场
静悄悄的看月亮
夏虫停止了吟唱
摘一朵野花戴头上
皎洁月光象牛奶
在他们年轻身上流淌
仙女山的月亮
更大更圆的月亮
点亮思念的火
点燃梦想的光
仙女山的月亮
更美更白的月亮
走不完的山与路
你让我常常享受一种忧伤
草长莺飞的五月
他们又来看月亮
还是携手肩并肩
白发已经盖脸庞
阵阵松涛吹过来
摘一朵野花戴头上
皎洁月光象泪水
随他们沧桑岁月流淌
仙女山的月亮
更大更圆的月亮
带回年少的梦
带回往日时光
仙女山的月亮
更美更白的月亮
穿不完的云和雾
你让我常常孤独回到故乡
`;
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;};
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));}
HCPlayer({
lrcAr: getLrcAr(geci),
lrc_css: '--bg: linear-gradient(hsla(200,80%,50%,.35),hsla(200,70%,45%,.6)); left: 30px; bottom: 20px;',
player_css: '--color: snow; bottom: 100px; left: 20px;',
});
FS({
pa: papa,
set: 'backgroun: transparent; color: snow; border: 2px dotted snow; right: 8%; top: 92%;',
});
})();
</script> @马黑黑 交份作业 找了个歌词，照抄的作业，不知道是不是这样描的？ 醉美水芙蓉 发表于 2023-2-20 21:06
做得漂亮！全屏也不错！
谢谢水芙蓉肯定{:4_187:} 悄然心灵手巧，这作业完成得真好{:4_187:} 美女这次的作业完成的非常棒，会设置许多黑黑的专用代码了{:4_170:} 悄然灵活运用比较好，起码比小辣椒好多了{:4_178:} 没有纯套用黑黑的播放器，这点悄然真棒{:4_199:} 千羽 发表于 2023-2-20 21:16
悄然心灵手巧，这作业完成得真好
谢谢千羽肯定，过来抱一个{:4_183:} 小辣椒 发表于 2023-2-20 21:16
美女这次的作业完成的非常棒，会设置许多黑黑的专用代码了
感谢小辣椒肯定，真是描出来的{:4_187:} 小辣椒 发表于 2023-2-20 21:20
悄然灵活运用比较好，起码比小辣椒好多了
{:4_170:}我做完还一脸懵，标题都是问号 小辣椒 发表于 2023-2-20 21:20
没有纯套用黑黑的播放器，这点悄然真棒
{:4_183:}播放器也是想着改试试看，结果还成了。懵懂中。。。 雨中悄然 发表于 2023-2-20 21:36
播放器也是想着改试试看，结果还成了。懵懂中。。。
悄然慢慢来，一步步自己修改，会成功的 雨中悄然 发表于 2023-2-20 21:35
我做完还一脸懵，标题都是问号
所以我以前老瞎蒙，黑黑老要我去领会再操作{:4_170:} 雨中悄然 发表于 2023-2-20 21:34
感谢小辣椒肯定，真是描出来的
这个肯定是花时间的。悄然肯动脑子的{:4_199:} 悄然真棒，这个原始歌词加上了新的播放器效果，这个皇冠放在这里真漂亮{:4_199:} 雨中悄然 发表于 2023-2-20 21:03
@马黑黑 交份作业
3D效果没有出来。原因：缺了景深设置。下面代码中，红色的这句要补上：
#papa {
margin: -30px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: gray url('https://pic.imgdb.cn/item/63f36e65f144a01007d8b9ed.jpg') no-repeat center/cover;
box-shadow: 8px 4px 20px hsla(0,0%,0%,.65);
user-select: none;
perspective: 3000px;
position: relative;
z-index: 1;
}
欣赏美好。 小辣椒 发表于 2023-2-20 21:40
悄然慢慢来，一步步自己修改，会成功的
{:4_187:}好的，慢慢来不急
页:
[1]
2