单标签原生lrc歌词帖子模板
本帖最后由 马黑黑 于 2024-6-19 21:44 编辑代码来源于拙作《烛影》，修改后除了必不可少的音频标签，整个帖子模板就一个div标签，其伪元素 ::before 做歌词显示平台、::after 标签做播放器控制按钮。可扩展，就是说，可以添加其他修饰元素。具体代码尽量分行写，便于大家研究学习：
<style>
#tz {
margin: 30px 0 30px calc(50% - 641px);
width: 1280px;
height: 720px;
background: url('https://638183.freep.cn/638183/t24/2/vuyk.jpg') no-repeat center/cover;
box-shadow: 3px 3px 12px black;
z-index: 1;
pointer-events: none;
position: relative;
}
#tz::before, #tz::after {
position: absolute;
content: '';
}
#tz::before {
content: attr(data-lrc);
bottom: 10px; width: 100%;
height: 60px;
text-align: center;
font: normal 32px/60px sans-serif;
color: transparent;
background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px;
background-clip: text;
-webkit-background-clip: text;
filter: drop-shadow(-1px -3px 2px cyan);
}
#tz::after {
left: calc(50% - 50px);
bottom: 80px;
width: 100px;
height: 100px;
background: url('https://638183.freep.cn/638183/t23/btn/12f.png') no-repeat center/cover;
filter: drop-shadow(0 0 40px cyan);
pointer-events: auto;
cursor: pointer;
transition: .5s;
animation: rot 8s linear infinite var(--state);
}
#tz:hover::after {
width: 110px;
height: 110px;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="tz" data-lrc="烛影" title="播放/暂停">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1995785157" autoplay loop></audio>
</div>
<script>
var curkey = 0, lrcAr = [];
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
});
};
var mState = () => {
tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
tz.title = ['暂停','播放'][+aud.paused];
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr) {
tz.dataset.lrc = lrcAr;
curkey ++;
}
};
tz.onclick = () => aud.paused ? aud.play() : aud.pause();
getAr(lrc);
var lrc = `WENDY·白 - 烛影\nhey babe你不用太着急\nwe got time\n屋外又下起了小雨\n倒一杯红酒\n窝进沙发里\n轻晃的烛影藏着我们的秘密\nBing bing闪烁装有我的眼睛\n纤细的手指不止能弹钢琴\ndo re mi fa so la si如果你想听\n找部电影其实你早看过了\n管他呢谁不世界的过客\n反正到最后也没几人会记得\nyoudon't have to say sorry\n怎么会有那么多顾虑\n我们之间已经隔了太多的事情\n不止玻璃流下雨滴\n什么工具能留住香气\nclose get close to紧扣的掌心\n我的耳朵只听得见你的声音\n统一的心率连着呼吸\n像棉花糖融化进了水里\n（ only u）在我身边调动情绪才是安心\nplease back my butterfly\n第一眼的喜欢你让我怎么释怀\n我试着调整了没有你的生活状态\n看起来多彩\n对我而言还是黑白\nplease back my butterfly\n只有把你变成记忆才不会被人打败\n你是否也会在某个时间突然想起我来\n顺风入怀＞三十六度温暖\n回忆不攻自破\n带着花纹心的脉络\n他们劝我忘了\n忘了这本不该发生的\n（ how can i do that）\n怎么忘了挂着小兔子的（蓝色）毛衣\n怎么忘了你那闪烁装有我的眼睛\n怎么忘了烛影里藏着我们的秘密\n不止玻璃流下雨滴\n什么工具能留住香气\nclose紧扣的掌心\n统一的心率连着呼吸\n我的耳朵快要忘记（你的声音）`;
</script>
这个直接给了个小花播的图片，不用那么复杂的绕圈圈，使用更方便啦。{:4_199:} 两个伪元素，一个按钮一个歌词，最精简的应用，很赞{:4_199:} “整个帖子模板就一个div标签”这话咋有点那么显摆呢{:4_173:}
不过的确很简洁，而且这个帖子的歌词阴影效果特别好{:4_187:} 红影 发表于 2024-6-19 23:11
两个伪元素，一个按钮一个歌词，最精简的应用，很赞
不过代码看起来也不是很少 南无月 发表于 2024-6-19 22:53
这个直接给了个小花播的图片，不用那么复杂的绕圈圈，使用更方便啦。
圈圈也是很好看的 红影 发表于 2024-6-19 23:13
“整个帖子模板就一个div标签”这话咋有点那么显摆呢
不过的确很简洁，而且这个帖子的歌词阴影效 ...
CSS做了很多工作 马黑黑 发表于 2024-6-19 23:13
圈圈也是很好看的
变身的圈圈更好看，刚看到一个效果。。真是绝了{:4_170:} 思路很巧妙。
82和84 要对调一下吧，歌词似乎不动啊。 起个网名好难 发表于 2024-6-20 09:00
思路很巧妙。
82和84 要对调一下吧，歌词似乎不动啊。
嗯，一般是先赋值再调用 马黑黑 发表于 2024-6-19 23:13
不过代码看起来也不是很少
能用原生歌词的，应该是最少量的代码了呢{:4_187:} 马黑黑 发表于 2024-6-19 23:14
CSS做了很多工作
是的，可以让歌词变成各种想要的效果{:4_187:} 红影 发表于 2024-6-20 18:36
是的，可以让歌词变成各种想要的效果
{:4_190:} 红影 发表于 2024-6-20 18:35
能用原生歌词的，应该是最少量的代码了呢
不会呀。花潮格式的lrc最好，代码量更少，唯一麻烦的是多个制作歌词流程，很多人包括资深做帖人 @小辣椒 都不太愿意去做。花潮格式的lrc还能轻松实现逐字模拟功能，这个原生的就比较麻烦了：它通常是通过空歌词告诉执行系统，这是我上一句结束的时间，通常还没有或不准确，然后就需要一个笼统的算法（我曾经做过，也发布在论坛里）去测算，得个大致的结果而已。 马黑黑 发表于 2024-6-20 18:49
这些效果都好美呢{:4_187:} 马黑黑 发表于 2024-6-20 18:54
不会呀。花潮格式的lrc最好，代码量更少，唯一麻烦的是多个制作歌词流程，很多人包括资深做帖人 @小辣 ...
是的，最准确的还是花潮歌词，但是原生歌词对用的人来说更省力{:4_173:} 红影 发表于 2024-6-20 22:04
是的，最准确的还是花潮歌词，但是原生歌词对用的人来说更省力
有得有失 红影 发表于 2024-6-20 22:02
这些效果都好美呢
还不差 马黑黑 发表于 2024-6-20 22:20
有得有失
我倒是挺喜欢自己去弄歌词，比较放心，搜来的有时是不对的。 马黑黑 发表于 2024-6-20 22:20
还不差
黑黑的东西怎可能差呢，你是我们心目中神一样的存在{:4_199:}