爱河（测试横竖排歌词二合一模块）

马黑黑 · 发表于 2025-3-26 22:04

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

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

x

马黑黑 · 发表于 2025-3-26 22:04

<style>
	@import 'https://638183.freep.cn/638183/web/ku/yslrc_range_player2in1.css';
	#papa { margin: 30px 0 30px calc(50% - 593px); background: #ccc url('https://img1.qunarzz.com/travel/d2/1509/73/2231e3934cf7d.jpg') no-repeat center/cover; border-radius: 6px; overflow: hidden; }
	#mplayer { --prog: snow; --track: tan; bottom: 20px; width: 40%; }
	#lrcDiv {  --hlcolor: gold; color: lightyellow; top: 25%; /*writing-mode: vertical-rl;*/ text-shadow: 1px 1px 1px rgba(0,0,0,.5); }
	#fsbtn { top: 60px; }
	#flower { position: absolute; bottom: 50px; width: 120px; cursor: pointer; z-index: 4; animation: rot 8s linear infinite var(--state); }
</style>

<div id="papa" class="pa">
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/01/54/04/video6364003c5d4ef.mp4" autoplay loop muted></video>
	<img id="flower" src="https://638183.freep.cn/638183/small/f001.png" alt="" title="Alt+X" />
	<audio src="https://music.163.com/song/media/outer/url?id=2090289961" autoplay loop></audio>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/ku/yslrc_range_player2in1.js';
	var geci = `[00:00.25]爱河 - 沈川绮\n[00:15.01]听 我在这世界\n[00:18.67]为爱许下了好多夙愿\n[00:24.59]靠近点 告诉你\n[00:29.03]又一次覆灭\n[00:31.94]手中的花依然向你倾斜\n[00:37.58]可爱神 看不见\n[00:42.52]我向山丘发问\n[00:45.79]穿越群象寻人\n[00:49.08]去鼹鼠家敲门\n[00:52.30]追麋鹿的早晨\n[00:55.07]塔上的祈愿签\n[01:00.13]拜托你\n[01:03.65]回答我\n[01:07.25]神啊\n[01:08.97]抛向那爱河吗\n[01:12.38]抛向那爱河吧\n[01:15.56]抛向那爱河吧\n[01:18.82]对吗\n[01:20.44]神啊\n[01:22.17]抛向那爱河吗\n[01:25.27]抛向那爱河吧\n[01:28.23]抛向那爱河吧\n[01:34.69]梦 千万个结局\n[01:37.87]来来回回着 与我痴缠\n[01:43.56]为什么 要平行\n[01:48.43]签上的名讳\n[01:50.76]整齐的排列了你我宿命\n[01:56.27]就这样 在一起\n[02:01.25]能爱半生余年\n[02:04.32]天空长出红线\n[02:07.53]河流消磨尘缘\n[02:10.96]运送执念犹怜\n[02:13.66]塔上的祈愿签\n[02:18.67]拜托你\n[02:22.08]成全我\n[02:25.87]神啊\n[02:27.66]抛向那爱河吗\n[02:30.75]抛向那爱河吧\n[02:34.04]抛向那爱河吧\n[02:37.33]对吗\n[02:38.98]神啊\n[02:40.80]抛向那爱河吗\n[02:43.96]抛向那爱河吧\n[02:47.17]抛向那爱河吧\n[02:52.63]突然之间\n[02:53.98]河上多了一座桥 和他的虚影\n[02:58.42]是突然之间\n[03:00.27]群鸟归栖 落下余晖 奏请雷雨\n[03:05.39]我的神明啊我请求你\n[03:18.25]神啊\n[03:20.11]抛向那爱河吗\n[03:23.00]抛向那爱河吧\n[03:26.86]抛向那爱河吧\n[03:30.29]对吗\n[03:32.00]神啊\n[03:33.21]抛向那爱河吗\n[03:36.35]抛向那爱河吧\n[03:39.64]抛向那爱河吧`;
	hcplay(papa, geci, 7);
	flower.onclick = () => btnPlay.click();
</script>

马黑黑 · 发表于 2025-3-26 22:05

本帖最后由马黑黑于 2025-3-26 22:19 编辑

@红影提到可否让 range 播放器横排、竖排歌词的模块集合在一起。当时我想，模块里会有很多地方做分支，CSS资源也需要改动，本意是不想做的。今天病休，睡够了还是觉得可以试试，于是就有这个模块，改变动作还不算太大，加几个检测和判断，小改动一下CSS资源文档。

这个二合一的模块使用起来非常方便，默认是横排，想要竖排效果，可以参考帖子代码第 5 行被注释的属性设置，解开注释，就是竖排，这是自右向左写行的竖排，需要自左向右竖排的，把 rl 改为 lr 便可。

应该注意的是，尽量不要去设置字号和行高，因为这些因素是歌词翻滚计算的依据，如果非设置不可，请保持字号不大于28px，行高就不要去动了，它是滚动歌词最关键的一项设置。另外，也是非常重要的，模块会自动设置歌词盒子的尺寸，帖子里 #lrcDiv {} 选择器的宽高不要去设置。高亮、位置可以随意设置。

【预告】不久将会推出经典版花朝原生LRC歌词播放器ES模块，以此作为对使用ES模块写播放器的总结，更是对大家一直以来对我的支持与鼓励的回报。