原生lrc歌词同步JS封装

马黑黑 · 发表于 2024-6-20 21:12

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

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

x

本帖最后由马黑黑于 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=`[00:12:900]歌词一\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 = `
[00:00.600]云朵 - 云朵
[00:31.778]我一定回来越过那一片海
[00:40.507]阿妈呼唤萦绕耳畔
[00:50.477]那年我离开像一朵云彩
[00:58.947]单单的飘向天外
[01:05.937]风拉着我的衣带
[01:13.568]像阿妈慈母情怀
[01:29.228]等着我回来吻你双鬓洁白
[01:35.768]向你倾吐爱以及爱
[01:46.518]年少读不懂亲人的关怀
[01:54.900]傻傻的执着未来
[02:01.808]痴迷在天外的色彩
[02:10.389]不见你心泪似海
[02:18.590]你笑着问我要什么
[02:25.899]我要你紧紧搂着我
[02:33.439]我就像天上漂泊的云朵
[02:40.509]飞向天际辽阔
[02:47.719]我搂着阿妈的爱
[02:56.599]从此后再不要分开
[03:04.769]我登上圣洁琉璃的天台
[03:12.439]还是你的小孩
[04:14.290]你笑着问我要什么
[04:21.379]我要你紧紧搂着我
[04:29.490]我就像天上漂泊的云朵
[04:37.190]飞向天际辽阔
[04:44.389]我搂着阿妈的爱
[04:53.590]从此后再不要分开
[05:00.790]我登上圣洁琉璃的天台
[05:08.609]还是你的小孩
[05:19.479]还是你的小孩
`;
</script>

复制代码

yslrc.js 文档我将在二楼提供

马黑黑 · 发表于 2024-6-20 21:13

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=`[00:12:900]歌词一\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[1]) * 60 + parseInt(result[2]) + parseInt(result[3]) / 1000;
lrcAr.push([tmsg, result[4].trim()]);
}
});
return lrcAr ? lrcAr : [0, 'HUACHAO'];
};
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[curkey][0]) {
tz.dataset.lrc = lrcAr[curkey][1];
curkey ++;
}
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var lrcAr = generateLrcAr(lrc);