原生lrc歌词同步JS封装
本帖最后由 马黑黑 于 2024-6-20 23:27 编辑这是一个简单的原生lrc歌词同步脚本封装，约定：
/*yslrc.js by Mahei on 2024-6-20
约定：
帖子 id="tz" data-lrc="xxx"
伪元素 ::before 或 ::after 用于显示歌词 → content: attr(data-lrc);
audio id="aud"
video class="vid"
播放控制按钮 id="player"
lrc歌词变量(可用分行替代\n) var lrc=`歌词一\n[]歌词二\n`;
*/
就是说，帖子id、音频播放器id、视频class、播放器id是固定的，同时，歌词的显示使用 #tz 的一个伪元素（该伪元素需要指定 content 属性值为 attr(data-lrc)，还有，需要提供lrc原生歌词，变量名为 lrc。
下面是一个实例代码：
<style>
#tz { margin: auto; width: 740px; height: 400px; background: #eee; box-shadow: 2px 2px 3px gray; position: relative; }
#tz::before { content: attr(data-lrc); position: absolute; top: 10px; width: 100%; height: 60px; font: bold 32px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to right, red, green, blue, green, red) 50%/200px 60px; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px black); text-align: center; }
#player { position: absolute; left: calc(50% - 30px); bottom: 15px; width: 60px; height: 60px; cursor: pointer; animation: rot 6s linear infinite var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="tz" data-lrc="HUACHAO">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=325583" autoplay loop></audio>
<img id="player" title="播放/暂停" alt="" src="https://638183.freep.cn/638183/t23/btn/disc.png" />
</div>
<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js/yslrc.js';
document.body.appendChild(sf);
var lrc = `
云朵 - 云朵
我一定回来 越过那一片海
阿妈呼唤 萦绕耳畔
那年我离开像一朵云彩
单单的飘向天外
风拉着我的衣带
像阿妈慈母情怀
等着我回来 吻你双鬓洁白
向你倾吐 爱以及爱
年少读不懂亲人的关怀
傻傻的执着未来
痴迷在天外的色彩
不见你心泪似海
你笑着问我要什么
我要你紧紧搂着我
我就像天上漂泊的云朵
飞向天际辽阔
我搂着阿妈的爱
从此后再不要分开
我登上圣洁琉璃的天台
还是你的小孩
你笑着问我要什么
我要你紧紧搂着我
我就像天上漂泊的云朵
飞向天际辽阔
我搂着阿妈的爱
从此后再不要分开
我登上圣洁琉璃的天台
还是你的小孩
还是你的小孩
`;
</script>yslrc.js 文档我将在二楼提供
yslrc.js源码
/*yslrc.js by Mahei on 2024-6-20
约定：
帖子 id="tz" data-lrc="xxx"
伪元素 ::before 或 ::after 用于显示歌词 → content: attr(data-lrc);
audio id="aud"
video class="vid"
播放控制按钮 id="player"
lrc歌词变量(可用分行替代\n) var lrc=`歌词一\n[]歌词二\n`;
*/
var vids = tz.querySelectorAll('.vid');
var curkey = 0;
var generateLrcAr = (text) => {
var lrcAr = [];
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
var result = item.match(reg);
var tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr ? lrcAr : ;
};
var mState = () => {
tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
if(vids.length > 0) vids.forEach(vid => { aud.paused ? vid.pause() : vid.play(); });
player.title = ['暂停','播放'][+aud.paused];
};
aud.loop = false;
aud.onended = () => {
curkey = 0;
aud.play();
}
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr) {
tz.dataset.lrc = lrcAr;
curkey ++;
}
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var lrcAr = generateLrcAr(lrc);
本帖最后由 马黑黑 于 2024-6-20 21:18 编辑
无法匹配的某一行歌词将被忽略。例如，下面这一行歌词将不会被显示：
[**&……%%]歌词甲乙丙丁 本帖最后由 马黑黑 于 2024-6-20 23:27 编辑 <br /><br /><style>
#tz { margin: auto; width: 740px; height: 400px; background: #eee; box-shadow: 2px 2px 3px gray; position: relative; }
#tz::before { content: attr(data-lrc); position: absolute; top: 10px; width: 100%; height: 60px; font: bold 32px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to right, red, green, blue, green, red) 50%/200px 60px; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px black); text-align: center; }
#player { position: absolute; left: calc(50% - 30px); bottom: 15px; width: 60px; height: 60px; cursor: pointer; animation: rot 6s linear infinite var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<h2>二楼代码效果：</h2>
<div id="tz" data-lrc="HUACHAO">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=325583" autoplay loop></audio>
<img id="player" title="播放/暂停" alt="" src="https://638183.freep.cn/638183/t23/btn/disc.png" />
</div>
<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js/yslrc.js';
document.body.appendChild(sf);
var lrc = `
云朵 - 云朵
我一定回来 越过那一片海
阿妈呼唤 萦绕耳畔
那年我离开像一朵云彩
单单的飘向天外
风拉着我的衣带
像阿妈慈母情怀
等着我回来 吻你双鬓洁白
向你倾吐 爱以及爱
年少读不懂亲人的关怀
傻傻的执着未来
痴迷在天外的色彩
不见你心泪似海
你笑着问我要什么
我要你紧紧搂着我
我就像天上漂泊的云朵
飞向天际辽阔
我搂着阿妈的爱
从此后再不要分开
我登上圣洁琉璃的天台
还是你的小孩
你笑着问我要什么
我要你紧紧搂着我
我就像天上漂泊的云朵
飞向天际辽阔
我搂着阿妈的爱
从此后再不要分开
我登上圣洁琉璃的天台
还是你的小孩
还是你的小孩
`;
</script> 这个太厉害了~~直接封好。。
我第一个想的是：网站里不用三个反斜杠的重新处理了吧。。{:4_170:} 加上视频.vid和<video class="vid"，完美显示，
同时小播可控视频暂停。
这个考虑的太周到了。{:4_199:} 这样做贴简直不要太方便了。。{:4_199:}
https://www.90lrc.cn/
留个原生歌词网站~
原生歌词同步也封装了，太好了，黑黑辛苦了{:4_187:} 这个还可以任意加视频呢，真是太好了{:4_199:} 红影 发表于 2024-6-20 22:15
这个还可以任意加视频呢，真是太好了
{:4_190:} 本帖最后由 马黑黑 于 2024-6-20 22:47 编辑
南无月 发表于 2024-6-20 21:30
这个太厉害了~~直接封好。。
我第一个想的是：网站里不用三个反斜杠的重新处理了吧。。
不用了。其实也不止三个呢：
正则表达式里就有五个，还有一个拆分lrc歌词的 \n，如果歌词不分行，N多个 红影 发表于 2024-6-20 22:14
原生歌词同步也封装了，太好了，黑黑辛苦了
这个简单了，加个判断啥的而已 南无月 发表于 2024-6-20 21:36
这样做贴简直不要太方便了。。
https://www.90lrc.cn/
留个原生歌词网站~
有一些站点不准的，不知道你这个咋样 马黑黑 发表于 2024-6-20 22:44
不用了。其实也不知三个呢：
正则表达式里就有五个，还有一个拆分lrc歌词的 \n，如果歌词不分行，N多 ...
这个简直是小白福音啊。白老师你真伟 大{:4_170:} 南无月 发表于 2024-6-20 21:35
加上视频.vid和
管理 #tz 元素级别的变量 --state，这个忘了说
马黑黑 发表于 2024-6-20 22:45
有一些站点不准的，不知道你这个咋样
我用了一首，啥也没改也很准。。
别的还没试。。
还有别的站么。。我只找到这个 南无月 发表于 2024-6-20 22:46
这个简直是小白福音啊。白老师你真伟 大
伟大说的太重了。尾大不掉差不多。 南无月 发表于 2024-6-20 22:47
我用了一首，啥也没改也很准。。
别的还没试。。
还有别的站么。。我只找到这个
一抓一大把 马黑黑 发表于 2024-6-20 22:46
管理 #tz 元素级别的变量 --state，这个忘了说
这个封装预设真是太好了，留了好多能用的东东{:4_199:} 马黑黑 发表于 2024-6-20 22:47
伟大说的太重了。尾大不掉差不多。
超级伟大，我不知道你意识中的伟 大是多大，多重。
小白的伟 大就是你这样子的。{:4_170:}