西风（问好千羽）

马黑黑 · 发表于 2022-9-29 07:24

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

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

x

本帖最后由马黑黑于 2022-10-29 12:20 编辑

花潮论坛lrc在线

00:00 | 00:00

马黑黑 · 发表于 2022-9-29 07:30

欣赏羽羽的《西风》，为之惊艳，也非常喜欢阿鲁阿卓的倾情演唱（芈月传没有看过，因为不想被影视作品破坏我脆弱的历史知识体系）。所以也粗制滥造一帖，向羽图致意。

马黑黑 · 发表于 2022-9-29 07:35

枫叶和小鸟的定位，首先由 #papa 盒子的 display: grid; place-items: center; 两个属性将其定位在了中央，然后，二者设为绝对定位，并使用 transform: translate(x,y) 快速进行物理定位，枫叶还需要 rotate 旋转；translate （xy）的取值，参照其原始位置，亦即帖子的正中央。当然，translate(x,y) 也可以用 left、top 来代替实现，left、top取值参照 #papa 左上角的（xy）坐标系。

马黑黑 · 发表于 2022-9-29 07:41

本帖最后由马黑黑于 2022-9-29 07:42 编辑

关于歌词有的字拉的很长的处理：

细心的朋友可能已经发现，有几句歌词的末尾加了符号 ~ ，符号 ~ 前还有一个空格。这是针对歌词某个字拉的较长而做出的临时性处置，以获得歌词逐字同步得以较好模拟的效果：因 ~ 的合理加入，逐字同步的步伐得到调节，整体均衡性也因此得到相对完美的调整。

马黑黑 · 发表于 2022-9-29 07:44

@千羽

马黑黑 · 发表于 2022-9-29 07:49

本帖最后由马黑黑于 2022-9-29 12:27 编辑

全帖代码（CSS和JS各句以行的形式书写，但不会怎么影响修改关键部分）：

<style>
#papa { left: -214px; width: 1024px; height: 640px; background: #ccc url('https://638183.freep.cn/638183/Pic/81/xifeng.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
#mplayer { position: absolute; left: 20px; bottom: 0; width: 300px; height: 80px; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { background: linear-gradient(to top right, green, purple); border-radius: 50%; opacity: .75; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .7s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border-radius: 6px; opacity: 0; }
#btnplay { width: 20px; height: 20px; transform: translateX(3px); background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, rgba(0,0,0,.65), rgba(160,200,40,.8) 100%, transparent 0); border: 1px solid rgba(255,255,255,.45); font: normal 14px / 16px sans-serif; color: purple; }
#lrc { position: absolute; top: 20px; font: bold 2.6em sans-serif; color: rgba(255,255,255,.95); text-shadow: 1px 1px 1px #000; --motion: cover2; --tt: 6s; --state: running; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 0; height: 100%; left: 0; top: 0; color: rgba(160,200,40,.8); overflow: hidden; white-space: nowrap; 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%; } }
</style>
<div id="papa">
<img src="https://638183.freep.cn/638183/Pic/81/leaf2.png" alt="" style="position: absolute; transform: translate(-10px,-5px) rotate(120deg);" />
<img src="https://638183.freep.cn/638183/Pic/81/bird7.gif" alt="" style="position: absolute; transform: translate(-200px,280px); mix-blend-mode: multiply;" />
<div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>
<script>
let mKey = 0, mSeek = false, mFlag = true, aud = new Audio();
let lrcAr = [[6.00,"西风 - 阿鲁阿卓",6.0],[12.00,"电视剧《芈月传》片尾曲插曲",4.0],[16.00,"作词：陈涛作曲：王备",4.0],[20.00,"我今身披彩衣",5.1],[27.00,"我见繁花如许",5.7],[34.90,"我嫁与山河千乘万骑",7.9],[42.06,"我却追忆孩提",5.6],[50,"想过无猜无忌",4.9],[57.64,"想与云梦相许",6.0],[65.09,"想任你劫夺红尘知遇",7.2],[73.07,"永生不得离去",5.4],[82.03,"西风向孤独的人吟唱",7.5],[90.01,"是谁在拿捏心里的伤",6.5],[97.05,"将欢情推离片刻时光",8.0],[106.03,"琴箫已在夜中央",6.1],[112.08,"花潮LRC在线",35.0],[147.87,"想过无猜无忌",5.0],[155.02,"想与云梦相许",5.1],[163.00,"想任你劫夺红尘知遇",6.2],[170.01,"永生不得离去 ~",6.0],[180.03,"西风向孤独的人吟唱",7.0],[187.07,"是谁在拿捏心里的伤 ~",7.0],[195.01,"将欢情推离片刻时光",7.0],[204.00,"琴箫已在夜中央",5.1],[210.01,"西风向孤独的人吟唱",7.0],[217.06,"是谁在拿捏心里的伤 ~",7.0],[225.08,"将欢情推离片刻时光",8.6],[234,"琴箫已在夜中央",5.1],[240.01,"将欢情推离片刻时光",7.0],[249.01,"柳枝微扬夜中央",8.3],[258.05,"感谢欣赏",6]];
aud.src = 'http://www.kumeiwp.com/sub/filestores/2021/09/21/b0c8608bfe3871863bf63ff3eb95161a.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, rgba(0,0,0,.65), rgba(160,200,40,.8) ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr[j][0]) {if(mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr[mKey][1];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 < 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 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;};
</script>