私奔（range播放器集成LRC测试）

马黑黑 · 发表于 2025-3-24 12:47

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

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

x

马黑黑 · 发表于 2025-3-24 12:48

<style>
	@import 'https://638183.freep.cn/638183/web/ku/yslrc_range_player.css';
	#papa { margin: 30px 0 30px calc(50% - 593px); background: url('https://638183.freep.cn/638183/t24/5/sibf.jpg') no-repeat center/cover; border-radius: 8px; overflow: hidden; }
	#mplayer { --prog: peru; --track: seashell; bottom: 20px; right: 20px; width: 40%; }
	#lrcDiv {  top: 100px; width: fit-content; text-shadow: 1px 1px 1px rgba(0,0,0,.5); }
	#fsbtn { top: 20px; }
	#flower { position: absolute; right: calc(20% - 60px); bottom: 60px; width: 120px; cursor: pointer; transform: rotate(-10deg); animation: swear .5s linear infinite alternate var(--state); }
	@keyframes swear { to { transform: rotate(10deg); } }
</style>

<div id="papa" class="pa">
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/09/13/27/video6365b8b76bf11.mp4" autoplay loop muted></video>
	<img id="flower" src="https://638183.freep.cn/638183/small/f001.png" alt="" />
	<audio src="https://music.163.com/song/media/outer/url?id=530986063" autoplay loop></audio>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/ku/yslrc_range_player.js';
	var geci = `
[00:00.100]曾轶可 - 私奔
[00:10.433]词曲 : 曾轶可
[00:19.997]跨越时间
[00:23.717]跨越空间
[00:27.493]。。。`;
	hcplay(papa, geci, 5);
	flower.onclick = () => btnPlay.click();
</script>

马黑黑 · 发表于 2025-3-24 12:48

本帖最后由马黑黑于 2025-3-24 17:54 编辑

模块的用法这里不多说，看看二楼提供的帖子代码就能明白。这里讲讲原生LRC歌词的整理问题：

原生LRC歌词用到Web页中来需要做一些迁移工作，取出必要的部分，即含有时间和歌词信息的内容行，像下面的两段原生LRC歌词：

[ti:最美的意外]
[ar:林凡]
[al:眼泪流回去]
[by:tocy]
[offset:0]
[00:12.00][00:19.52]只要有你
[00:17.20]谁能告诉我，有没有这样的笔
[00:21.10]如果是这样，我可以安慰自己
[00:24.00]
[00:28.25]生命中只要有你，什么都变了可以
[00:29.02]所有永恒承诺

或者长成这样：

{"songStatus":1,"lyricVersion":5,"lyric":"[01:48.94][00:20.28]跨越时间 \n[01:52.53][00:23.91]跨越空间 \n[01:56.07][00:26.99]跨越寻常的遇见\n[02:02.86][00:31.74]\n[02:03.57][00:35.21]没有自己 \n[02:07.01][00:38.21]没有目的\n[02:10.82][00:41.91]没有预料的爱恋\n[02:17.20][00:47.42]\n[03:58.10][02:17.75][00:49.16]进退两难

我们实际上只要红色部分，其余的，要么是LRC歌词其它相关信息、要么是空歌词行等断句性质的信息行，都要剔除掉。红色部分内容中，可能会存在一行歌词有两个或N多的时间信息，它们代表这句歌词在整首歌中要唱两次或N多次，也要做处理Web页的播放器才会识别。手动修改歌词比较麻烦，所以我写了一个LRC歌词整理小工具，有需要的可以访问这里：

LRC歌词整理

该工具能够将多余的信息删除掉，并准确处理有多个时间信息的歌词行，同时还对整理出来的歌词做排序（以减轻LRC播放器模块的工作）。工具提供的最终歌词可以写在一行，也可以分行写，随你喜欢。

不过如果原始歌词中存在格式合法但实属多余的歌词内容，工具不能识别，例如像下面的内容：

[05:50.09][03:44.49]{"code: 100"}

结构上，它是合法的歌词，但“歌词”内容其实是私有性质的信息，这样的信息只能手动整体删除。

【提示】可以将本楼的所有文字都复制给整理工具，检测一下它的表现是否可以。