我们的时光

马黑黑 · 发表于 2022-10-2 07:52

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

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

x

本帖最后由马黑黑于 2022-10-2 13:22 编辑

花潮论坛lrc在线

马黑黑 · 发表于 2022-10-2 08:00

本帖最后由马黑黑于 2022-10-2 13:29 编辑

本帖，演示如何使用之前做的简易播放器（这里是模拟光碟），与现在的新歌词同步方式相结合。全帖代码：

<style>
#papa { left: -214px; width: 1024px; height: 640px; background: #ccc url('/data/attachment/forum/202210/02/074853qvvjcuqyunbnsusu.jpg') 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; width: 50px; height: 50px; left: 20px; top: 20px; border-radius: 50%; background: conic-gradient(hsla(0,100%,50%,.7),hsla(120,100%,50%,.7),hsla(240,100%,50%,.7),hsla(300,100%,50%,.7)); mask: radial-gradient(transparent 3px,red 0); -webkit-mask: radial-gradient(transparent 3px,red 0); cursor: pointer; animation: rot 4s linear infinite; animation-play-state: paused; }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; top: 15px; font: bold 2.4em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); } #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(120,85%,40%,.75),hsla(0,70%,50%,.65)); 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 rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<img src="/data/attachment/forum/202210/02/075010yyxllzknx5yxfx3o.gif" alt="" style="position: absolute; left: 25px; top: 8px; mix-blend-mode: multiply;" />
<div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
<div id="mplayer"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29567193.mp3" autoplay= "autoplay"></audio>
<script>
let mKey = 0, mFlag = true;
let lrcAr = [[0.60,"我们的时光 - （词曲唱）赵雷",27.4],[33.85,"头顶的太阳燃烧着青春的余热",5.1],[39.37,"它从来不会放弃照耀着我们行进",5.2],[45,"寒冬不经过这里那只是迷雾的山林",5.3],[50.82,"走完苍老的石桥感到潮湿的味道",5.0],[56.64,"翻过了青山你说你看头顶斗笠的人们",5.2],[62.2,"海风拂过椰树吹散一路的风尘",5.0],[67.95,"这里就像与闹市隔绝的又一个世界",4.9],[73.64,"让我们疲倦的身体在这里长久地停歇",4.8],[102.66,"翻过了青山你说你看头顶斗笠的人们",4.9],[108,"海风拂过椰树吹散一路的风尘",5.0],[113.72,"这里就像与闹市隔绝的又一个世界",5.0],[119.37,"让我们疲倦的身体在这里长久地停歇",5.1],[125.4,"厦门的时光是我们的时光",5.0],[131.1,"大海的波浪翻滚着我们的向往",5.1],[136.86,"山谷里何时会再传来我们的歌声",4.9],[142.22,"那一些欢笑已过去那些往昔会铭记",5.3],[148.44,"我们的时光是无忧的时光",5.0],[153.93,"精彩的年月不会被什么改写",4.7],[159.92,"放纵的笑语时常回荡在我们耳旁",4.8],[165.16,"那些路上的脚印永远不会被掩藏",4.9]];
aud.loop = false;
mplayer.onclick = () => {
aud.paused ? aud.play() : aud.pause();
}
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {
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 ? (mplayer.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (mplayer.style.animationPlayState = 'running', 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;
};
</script>