[其他] 叹

马黑黑 · 发表于 2025-3-21 19:31

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

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

x

马黑黑 · 发表于 2025-3-21 19:31

<style>
	@import 'https://638183.freep.cn/638183/web/ku/yslrc_player_02.css';
	#papa { margin: 30px 0 30px calc(50% - 593px); background: #000 url('https://638183.freep.cn/638183/t24/webp3/tan.webp') no-repeat center/cover; }
	#mplayer { --prog: gold; bottom: 10px; width: 40%; }
	#lrcDiv { --hlcolor:orange; color: wheat; text-shadow: 1px 1px 1px black; top: 20%; width: 50%; }
	#fsbtn { top: 20px; }
</style>

<div id="papa" class="pa">
	<audio src="https://music.163.com/song/media/outer/url?id=1921641347" autoplay loop></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/09/25/19/45/45/video651172e941c2d.mp4" autoplay loop muted></video>
</div>

<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/yslrc_player_02.js';
var lrc = `[00:01.740]叹 - 电视剧《锦衣之下》插曲\n[00:07.420]演唱 ：叶青、赵天宇\n[00:15.100]梦萦中心若浮萍的漂泊\n[00:21.330]恍若乎孑然中凋落\n[00:27.540]可偏偏你像一席的烟波\n[00:33.630]划出了涟漪的花朵\n[00:38.220]量渊：\n[00:39.840]倘若爱燃尽了寂寞\n[00:45.990]我宁愿做焚世的火\n[00:50.580]此生眼眸全都为你镌刻\n[00:56.760]哪怕最后你眸中消散我\n[01:02.610]合：\n[01:02.670]叹命途要辗转多少次蹉跎\n[01:12.210]余生才修来岁月的正果\n[01:18.420]懒蘫：\n[01:18.510]再孤独单飞的鸟\n[01:21.060]终归要降落\n[01:24.090]合：\n[01:24.150]告诉我两颗心\n[01:28.650]交汇错落是什么结果\n[01:33.750]人总要历尽碎落\n[01:36.360]失去后才懂\n[01:39.090]情又是为何\n[01:41.040]懒蘫：\n[01:41.130]恪守到几何\n[01:44.370]相伴才最不负你我\n[01:47.790]量渊：\n[02:12.240]该如何能替你苦痛\n[02:18.300]我愿意承受到湮没\n[02:22.920]红尘茫茫世间太多离愁\n[02:28.950]韶华倾尽只求情深不朽\n[02:38.400]合：\n[02:38.460]叹命途要辗转多少次蹉跎\n[02:44.550]余生才修来岁月的\n[02:47.940]懒蘫：\n[02:48.510]正果\n[02:50.610]再孤独单飞的鸟\n[02:53.370]终归要降落\n[02:55.800]量渊：\n[02:55.950]最远的是守候\n[02:59.700]懒蘫：\n[02:59.790]告诉我\n[02:59.970]合：\n[03:00.030]两颗心\n[03:00.990]交汇错落是什么结果\n[03:06.030]人总要历尽碎落\n[03:08.640]失去后才懂\n[03:11.370]情又是为何\n[03:13.380]懒蘫：\n[03:13.500]恪守到几何\n[03:16.650]相伴才最不负你我`;
hcplay(papa, lrc, 5);
</script>

马黑黑 · 发表于 2025-3-21 19:31

本帖最后由马黑黑于 2025-3-21 21:20 编辑

一、播放器和歌词UI设置：

（一）播放器

CSS选择器 #mplayer { ... } 可以通过CSS变量或属性设定：

--track: gray;
--prog: red;
color: silver;
width: 50%;

（二）LRC歌词

--hlcolor: yellow;
color: lightgreen;

二、模块的引用

（一）CSS ：参考帖子代码第 2 行；

（二）HTML：

帖子容器需要 class="pa" 属性（参考帖子代码第 9 行）；
视频如果需要模块的联动控制，需要将其置于帖子容器之内，同时，如果需要挖空中心，请在视频标签 video 加入 class="vid" 属性，若自行设置视频相关CSS或HTML属性，不要使用 class="vid" 属性。
音频标签 audio 请自设 autoplay、loop 属性，模块为对之进行设置。

（三）JS：

需要 script 标签指定模块类型 type="module"（参阅帖子代码第 14 行）,script 标签内的所有变量需要声明再使用（var、let或const）；
引入 JS 模块：参阅帖子代码第 15 行；

配置模块参数：hcplay(帖子父容器变量, LRC歌词变量, 歌词显示行数)，参阅帖子代码第 17 行。

形参中，歌词显示行数可以省略，若省略，则默认显示 3 行。

【提示】本模块支持 ALT+X 暂停/播放音乐，F11 切换全屏/常规模式