我们的时光

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

本帖最后由马黑黑于 2022-10-2 13:22 编辑 <br /><br /><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 = [,,,,,,,,,,,,,,,,,,,,];

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) {
if (mKey === j) showLrc(lrcAr);
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;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
</script>

马黑黑 发表于 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 = [,,,,,,,,,,,,,,,,,,,,];

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) {
if (mKey === j) showLrc(lrcAr);
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;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
</script>

马黑黑 发表于 2022-10-2 08:07

赵雷这支曲子，有郑智化的风格。郑智化以相对简短而明快且前后基本一致的节奏演绎每一支歌，非常适合励志类主题。赵雷本曲，歌唱青春，用这类风格很恰当，能给人以积极向上的力量。

赵雷的声腔有极好的感染力，自带共鸣器并略带磁性，自然朴实中有天真漫烂的成分。

红影发表于 2022-10-2 08:42

看到这个模拟光碟，第一反应就是刚学习的HSL色盘{:4_173:}

起个网名好难 发表于 2022-10-2 08:43

mKey 没回零，一次性同步

红影发表于 2022-10-2 08:58

看到黑黑都是HLS或HLSA的配色，忍不住一边看一边想应该是什么颜色，想不出的去色盘工具里查，然后再对照帖子看颜色效果，觉得很有意思的过程{:4_173:}

马黑黑 发表于 2022-10-2 09:01

起个网名好难发表于 2022-10-2 08:43
mKey 没回零，一次性同步

这是一种机制：唱到的那一句歌词先一次性显示，再用覆盖方式模拟逐字同步。

马黑黑 发表于 2022-10-2 09:03

红影发表于 2022-10-2 08:42
看到这个模拟光碟，第一反应就是刚学习的HSL色盘

也是的，只是颜色用的更少，就四个

马黑黑 发表于 2022-10-2 09:04

红影发表于 2022-10-2 08:58
看到黑黑都是HLS或HLSA的配色，忍不住一边看一边想应该是什么颜色，想不出的去色盘工具里查，然后再对照帖 ...

弄懂hsl原理后，一看就知道是什么颜色额

起个网名好难 发表于 2022-10-2 09:04

马黑黑发表于 2022-10-2 09:01
这是一种机制：唱到的那一句歌词先一次性显示，再用覆盖方式模拟逐字同步。

你大概没整首歌听完吧，mKey 不回零第二遍歌词同步就不会启动，歌曲倒是唱个不停。

马黑黑 发表于 2022-10-2 09:05

起个网名好难发表于 2022-10-2 09:04
你大概没整首歌听完吧，mKey 不回零第二遍歌词同步就不会启动，歌曲倒是唱个不停。

额，你说的是这个，这是我的失误

红影发表于 2022-10-2 09:10

马黑黑发表于 2022-10-2 09:03
也是的，只是颜色用的更少，就四个

嗯嗯，有4个就足够了。

红影发表于 2022-10-2 09:12

马黑黑发表于 2022-10-2 09:04
弄懂hsl原理后，一看就知道是什么颜色额

色相倒是弄明白了，再加上饱和度和亮度的变化，凭空想象就比较难了呢。

朵拉发表于 2022-10-2 09:27

马师又出新品了，改天学一学{:4_190:}

马黑黑 发表于 2022-10-2 13:18

朵拉发表于 2022-10-2 09:27
马师又出新品了，改天学一学

这个还不完善， @起个网名好难发现了以个重大问题

马黑黑 发表于 2022-10-2 13:19

红影发表于 2022-10-2 09:12
色相倒是弄明白了，再加上饱和度和亮度的变化，凭空想象就比较难了呢。

饱和度加灰，亮度加黑白。

马黑黑 发表于 2022-10-2 13:20

红影发表于 2022-10-2 09:10
嗯嗯，有4个就足够了。

也可以考虑对称化，俩俩互补色对应

马黑黑 发表于 2022-10-2 13:46

起个网名好难发表于 2022-10-2 13:31
模仿一个

刚才通过对 ended的监听，seeked 在这里也可以，来重置 mKey 值

起个网名好难 发表于 2022-10-2 13:51

马黑黑发表于 2022-10-2 13:46
刚才通过对 ended的监听，seeked 在这里也可以，来重置 mKey 值

歌曲播完后重置直接且简单明了

马黑黑 发表于 2022-10-2 13:54

起个网名好难发表于 2022-10-2 13:51
歌曲播完后重置直接且简单明了

是的，ended 是最好的。触发 seeked 事件有进度改变、播放结束、页面出现局部刷新等等，条件相对复杂。

页: [1] 2 3 4 5

花潮论坛's Archiver

我们的时光