私奔（range播放器集成LRC测试）
<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 = `
曾轶可 - 私奔
词曲 : 曾轶可
跨越时间
跨越空间
跨越寻常的遇见
没有自己
没有目的
没有预料的爱恋
进退两难
难以双全
举步维艰的画面
不敢宣言
不敢见面
不敢透风的想念
跨越时间
跨越空间
跨越寻常的遇见
没有自己
没有目的
没有预料的爱恋
进退两难
难以双全
举步维艰的画面
不敢宣言
不敢见面
不敢透风的想念
跟我走吧
我们去巴黎铁塔
我们去布拉格桥下
我们去最浪漫最动人但别人不知道的地方啊
那张照片中的岛屿是你最想要去的吗
如果是这样的话
We will be there
Yes we will be there
只要你愿意跟我走
只要你愿意不回头
只要你愿意在一片怀疑声中牵起我的手
只要你在我因等待而疲倦的时候朝我点点头
我多想和你厮守
进退两难
难以双全
举步维艰的画面
不敢宣言
不敢见面
不敢透风的想念
我们去巴黎铁塔
我们去布拉格桥下
我们去最浪漫最动人但别人不知道的地方啊
那张照片中的岛屿是你最想要去的吗
如果是这样的话
We will be there
Yes we will be there
只要你愿意跟我走
只要你愿意不回头
只要你愿意在一片怀疑声中牵起我的手
只要你在我因等待而疲倦的时候朝我点点头
我多想和你厮守`;
hcplay(papa, geci, 5);
flower.onclick = () => btnPlay.click();
</script>
<div id="hEdiv"><pre id="hEpre">
<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 = `
曾轶可 - 私奔
词曲 : 曾轶可
跨越时间
跨越空间
。。。`;
hcplay(papa, geci, 5);
flower.onclick = () => btnPlay.click();
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script>
本帖最后由 马黑黑 于 2025-3-24 17:54 编辑
模块的用法这里不多说，看看二楼提供的帖子代码就能明白。这里讲讲原生LRC歌词的整理问题：
原生LRC歌词用到Web页中来需要做一些迁移工作，取出必要的部分，即含有时间和歌词信息的内容行，像下面的两段原生LRC歌词：
只要有你
谁能告诉我，有没有这样的笔
如果是这样，我可以安慰自己
生命中只要有你，什么都变了可以
所有永恒承诺
或者长成这样：
{"songStatus":1,"lyricVersion":5,"lyric":"跨越时间 \n跨越空间 \n跨越寻常的遇见\n\n没有自己 \n没有目的\n没有预料的爱恋\n\n进退两难
我们实际上只要红色部分，其余的，要么是LRC歌词其它相关信息、要么是空歌词行等断句性质的信息行，都要剔除掉。红色部分内容中，可能会存在一行歌词有两个或N多的时间信息，它们代表这句歌词在整首歌中要唱两次或N多次，也要做处理Web页的播放器才会识别。手动修改歌词比较麻烦，所以我写了一个LRC歌词整理小工具，有需要的可以访问这里：
LRC歌词整理
该工具能够将多余的信息删除掉，并准确处理有多个时间信息的歌词行，同时还对整理出来的歌词做排序（以减轻LRC播放器模块的工作）。工具提供的最终歌词可以写在一行，也可以分行写，随你喜欢。
不过如果原始歌词中存在格式合法但实属多余的歌词内容，工具不能识别，例如像下面的内容：
{"code: 100"}
结构上，它是合法的歌词，但“歌词”内容其实是私有性质的信息，这样的信息只能手动整体删除。
【提示】可以将本楼的所有文字都复制给整理工具，检测一下它的表现是否可以。
{:4_170:}看到有新贴，来点个卯。。标题吸引眼球，一看就是叛逆期。。 小播色彩漂亮，高级。。去掉自闪效果更稳重大方。。滑块立体感超强。。。
多了一个心形小播，同时可控。。
不过这心花花的是也是特别得很{:4_170:} 这个带歌词了，而且是封装好的，那颗转动的心和播放器按钮都能同时控制呢{:4_187:} 这颗心形按钮和视频形状相配，和滑块颜色相配，设计得真巧妙{:4_187:} 歌词是五行，如果不说明就是默认的3行吧。
这个帖子标题有趣，想结婚就结婚好了，现在鼓励结婚啊，咋还私奔啊{:4_173:} 马黑黑 发表于 2025-3-24 12:48
模块的用法这里不多说，看看二楼提供的帖子代码就能明白。这里讲讲原生LRC歌词的整理问题：
太好了 ，这个歌词整理还没用过？
比如我之前老错的那个歌词是不是过一下这个整理就可以了。
这会有事，晚点动手试一试。。 马黑黑 发表于 2025-3-24 12:48
模块的用法这里不多说，看看二楼提供的帖子代码就能明白。这里讲讲原生LRC歌词的整理问题：
网上快搜了一个原生歌 词试了一下，整理完很干净，
前四行直接删掉不见了。好用。。。{:4_199:}
造福全人类的好程序，先溜，晚上收 好好研究，学习一下{:4_178:} 花飞飞 发表于 2025-3-24 18:13
网上快搜了一个原生歌 词试了一下，整理完很干净，
造福全人类的说法夸张了，特朗普2.0都不敢讲的 花飞飞 发表于 2025-3-24 18:09
太好了 ，这个歌词整理还没用过？
比如我之前老错的那个歌词是不是过一下这个整理就可以了。
这会有事 ...
44944 红影 发表于 2025-3-24 17:07
歌词是五行，如果不说明就是默认的3行吧。
这个帖子标题有趣，想结婚就结婚好了，现在鼓励结婚啊，咋还私 ...
你看看那个是不是大叔形象 红影 发表于 2025-3-24 17:06
这颗心形按钮和视频形状相配，和滑块颜色相配，设计得真巧妙
谢巧 红影 发表于 2025-3-24 17:04
这个带歌词了，而且是封装好的，那颗转动的心和播放器按钮都能同时控制呢
关键在三楼 花飞飞 发表于 2025-3-24 13:05
看到有新贴，来点个卯。。标题吸引眼球，一看就是叛逆期。。
谢点 花飞飞 发表于 2025-3-24 13:09
小播色彩漂亮，高级。。去掉自闪效果更稳重大方。。滑块立体感超强。。。
多了一个心形小播，同时可控。。 ...
有这么夸张？ 朵拉 发表于 2025-3-24 20:19
好好研究，学习一下
{:4_191:} 花飞飞 发表于 2025-3-24 13:09
小播色彩漂亮，高级。。去掉自闪效果更稳重大方。。滑块立体感超强。。。
多了一个心形小播，同时可控。。 ...
这里面有故事