原生LRC歌词播放器（初稿）

马黑黑 · 发表于 2025-3-19 14:27

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

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

x

00:00

马黑黑 · 发表于 2025-3-19 14:27

代码：

<style>
#mplayer { --prg: 0%; margin: 20px auto; padding: 10px; display: flex; gap: 10px; flex-direction: column; align-items: center; width: 400px; background: rgba(0,0,0,.7); color: white; }
#lrcDiv { padding: 8px 0; width: 100%; height: 80px; overflow: hidden; text-align: center; box-sizing: border-box; }
#lrcDiv > p { margin: 0; padding: 0; font: normal 18px/26px simsun, arial, serif; transition: .5s; }
#lrcDiv p.hlight { color: yellow; font-size: 24px; font-weight: bold; }
#btns-area { width: 100%; display: flex; justify-content: space-between; }
#btn-play { width: 20px; height: 20px; cursor: pointer; position: relative; }
#btn-play::after { position: absolute; content: ''; width: 100%; height: 100%; background: red; clip-path: var(--clip); }
#progDiv { width: 100%; height: 10px; background: linear-gradient(to right, red var(--prg), gray var(--prg), gray 0) no-repeat 0 50% / 100% 2px; cursor: pointer; }
.play { --clip: polygon(10% 0, 100% 50%, 10% 100%); }
.pause { --clip: polygon(40% 0, 40% 100%, 20% 100%, 20% 0, 80% 0, 80% 100%, 60% 100%, 60% 0); }
</style>
<div id="mplayer">
<div id="lrcDiv"></div>
<div id="btns-area">
<div id="time1">00:00</div>
<div id="btn-play" class="pause"></div>
<div id="time2">00:00</div>
</div>
<div id="progDiv"></div>
</div>
<audio src="https://music.163.com/song/media/outer/url?id=1985126304" autoplay loop></audio>
<script>
const mplayer = document.querySelector('#mplayer');
const aud = document.querySelector('audio');
const lrcDiv = document.querySelector('#lrcDiv');
const progDiv = document.querySelector('#progDiv');
const btnPlay = document.querySelector('#btn-play');
const vids = document.querySelectorAll('video');
let lrcAr = [];
//处理LRC歌词
const getLrcAr = (text) => {
const ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
let result = item.match(reg);
let tmsg = parseInt(result[1]) * 60 + parseInt(result[2]) + parseInt(result[3]) / 1000;
lrcAr.push([tmsg, result[4].trim()]);
let p = document.createElement('p');
p.innerText = result[4].trim();
lrcDiv.appendChild(p);
});
};
//渲染播放器
const updatePlayerDatas = () => {
const hh = lrcDiv.offsetHeight / 2 + 20;
const prg = (aud.currentTime / aud.duration) * 100;
time1.innerText = formatTime(aud.currentTime);
time2.innerText = formatTime(aud.duration);
mplayer.style.setProperty('--prg', prg + '%');
for (let i = 0; i < lrcAr.length; i ++) {
const lrc = {time: lrcAr[i][0], text: lrcAr[i][1]};
const next = i < lrcAr.length - 1 ? lrcAr[i + 1][0] : null;
const p = lrcDiv.children[i];
if (aud.currentTime >= lrc.time && (!next || aud.currentTime < next)) {
p.classList.add('hlight');
lrcDiv.scroll({left: 0, top: p.offsetTop - hh, behavior: 'smooth'});
} else {
p.classList.remove('hlight');
}
}
};
//时间格式化输出
const formatTime = (seconds) => {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};
//联动管控机制
const mState = () => {
if (aud.paused) {
btnPlay.className = 'play';
btnPlay.title = '点击播放';
playvids(false);
} else {
btnPlay.className = 'pause';
btnPlay.title = '点击暂停';
playvids(true);
}
};
//播放视频
const playvids = (flag) => {
if(!vids) return;
vids.forEach(vid => flag ? vid.play() : vid.pause());
};
//进度条操作
progDiv.addEventListener('click', (e) => aud.currentTime = e.offsetX / progDiv.offsetWidth * aud.duration);
progDiv.addEventListener('mousemove', (e) => progDiv.title = formatTime(e.offsetX / progDiv.offsetWidth * aud.duration));
const lrc = `[00:01.140]好不舍得连呼吸都变得苦涩\n[00:06.800]热情过头换来的却只有冷漠\n[00:12.220]你只会装可怜人设\n[00:16.280]而我才是受害者\n[00:22.710]我是撞了南墙都不回头的人\n[00:28.570]明明已遍体鳞伤还不肯承认\n[00:34.140]我讨厌你谎话里虚构的身份\n[00:38.820]以为的天真其实是愚蠢\n[00:45.270]我是撞了南墙都不回头的人\n[00:50.290]还以为等待我的总有一扇门\n[00:55.950]门里的人会用温柔的口吻\n[01:00.660]能让我安稳\n[01:23.340]好不舍得连呼吸都变得苦涩\n[01:28.520]热情过头换来的却只有冷漠\n[01:34.140]你只会装可怜人设\n[01:38.070]而我才是受害者\n[01:44.620]我是撞了南墙都不回头的人\n[01:50.360]明明已遍体鳞伤还不肯承认\n[01:55.900]我讨厌你谎话里虚构的身份\n[02:00.610]以为的天真其实是愚蠢\n[02:07.160]我是撞了南墙都不回头的人\n[02:12.270]还以为等待我的总有一扇门\n[02:17.740]门里的人会用温柔的口吻\n[02:22.540]能让我安稳\n[02:28.300]如今和你一起的回忆都化作泡沫\n[02:34.180]我却还是不忍心戳破\n[02:39.220]你的轮廓慢慢的慢慢的消逝褪色\n[02:45.030]却还是没有放过我\n[02:50.820]我是撞了南墙都不回头的人\n[02:55.860]还以为等待我的总有一扇门\n[03:01.400]门里的人会用温柔的口吻\n[03:06.200]能让我安稳`;
getLrcAr(lrc);
aud.addEventListener('timeupdate', updatePlayerDatas);
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
btnPlay.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

复制代码

马黑黑 · 发表于 2025-3-19 14:36

歌词滚动机制采用元素级别的 scroll 机制，不像 scrollIntoview API 那样强制回到歌词所在区域，播放器可以放在帖子里。

播放器UI采用 flex 弹性布局，应该完美兼容现代浏览器。

LRC歌词的解析采用我们之前的巧妙做法，利用精心设计的正则表达式，以较少的开销读取到原生LRC歌词信息。

要求所提供的 LRC 歌词不能有误，因为读取歌词处理机制中没有做排错处理。