爱河（测试横竖排歌词二合一模块）
<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 = `爱河 - 沈川绮\n听 我在这世界\n为爱许下了好多夙愿\n靠近点 告诉你\n又一次覆灭\n手中的花依然向你倾斜\n可爱神 看不见\n我向山丘发问\n穿越群象寻人\n去鼹鼠家敲门\n追麋鹿的早晨\n塔上的祈愿签\n拜托你\n回答我\n神啊\n抛向那爱河吗\n抛向那爱河吧\n抛向那爱河吧\n对吗\n神啊\n抛向那爱河吗\n抛向那爱河吧\n抛向那爱河吧\n梦 千万个结局\n来来回回着 与我痴缠\n为什么 要平行\n签上的名讳\n整齐的排列了你我宿命\n就这样 在一起\n能爱半生余年\n天空长出红线\n河流消磨尘缘\n运送执念犹怜\n塔上的祈愿签\n拜托你\n成全我\n神啊\n抛向那爱河吗\n抛向那爱河吧\n抛向那爱河吧\n对吗\n神啊\n抛向那爱河吗\n抛向那爱河吧\n抛向那爱河吧\n突然之间\n河上多了一座桥 和他的虚影\n是突然之间\n群鸟归栖 落下余晖 奏请雷雨\n我的神明啊我请求你\n神啊\n抛向那爱河吗\n抛向那爱河吧\n抛向那爱河吧\n对吗\n神啊\n抛向那爱河吗\n抛向那爱河吧\n抛向那爱河吧`;
hcplay(papa, geci, 7);
flower.onclick = () => btnPlay.click();
</script> <div id="hEdiv"><pre id="hEpre">
<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 = `爱河 - 沈川绮\n听 我在这世界\n为爱许下了好多夙愿\n靠近点 告诉你\n又一次覆灭\n手中的花依然向你倾斜\n可爱神 看不见\n我向山丘发问\n穿越群象寻人\n去鼹鼠家敲门\n追麋鹿的早晨\n塔上的祈愿签\n拜托你\n回答我\n神啊\n抛向那爱河吗\n抛向那爱河吧\n抛向那爱河吧\n对吗\n神啊\n抛向那爱河吗\n抛向那爱河吧\n抛向那爱河吧\n梦 千万个结局\n来来回回着 与我痴缠\n为什么 要平行\n签上的名讳\n整齐的排列了你我宿命\n就这样 在一起\n能爱半生余年\n天空长出红线\n河流消磨尘缘\n运送执念犹怜\n塔上的祈愿签\n拜托你\n成全我\n神啊\n抛向那爱河吗\n抛向那爱河吧\n抛向那爱河吧\n对吗\n神啊\n抛向那爱河吗\n抛向那爱河吧\n抛向那爱河吧\n突然之间\n河上多了一座桥 和他的虚影\n是突然之间\n群鸟归栖 落下余晖 奏请雷雨\n我的神明啊我请求你\n神啊\n抛向那爱河吗\n抛向那爱河吧\n抛向那爱河吧\n对吗\n神啊\n抛向那爱河吗\n抛向那爱河吧\n抛向那爱河吧`;
hcplay(papa, geci, 7);
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-26 22:19 编辑
@红影 提到可否让 range 播放器横排、竖排歌词的模块集合在一起。当时我想，模块里会有很多地方做分支，CSS资源也需要改动，本意是不想做的。今天病休，睡够了还是觉得可以试试，于是就有这个模块，改变动作还不算太大，加几个检测和判断，小改动一下CSS资源文档。
这个二合一的模块使用起来非常方便，默认是横排，想要竖排效果，可以参考帖子代码第 5 行被注释的属性设置，解开注释，就是竖排，这是自右向左写行的竖排，需要自左向右竖排的，把 rl 改为 lr 便可。
应该注意的是，尽量不要去设置字号和行高，因为这些因素是歌词翻滚计算的依据，如果非设置不可，请保持字号不大于28px，行高就不要去动了，它是滚动歌词最关键的一项设置。另外，也是非常重要的，模块会自动设置歌词盒子的尺寸，帖子里 #lrcDiv {} 选择器的宽高不要去设置。高亮、位置可以随意设置。
【预告】不久将会推出经典版花朝原生LRC歌词播放器ES模块，以此作为对使用ES模块写播放器的总结，更是对大家一直以来对我的支持与鼓励的回报。
马黑黑 发表于 2025-3-26 22:05
@红影 提到可否让 range 播放器横排、竖排歌词的模块集合在一起。当时我想，模块里会有很多地方做分支，CSS ...
影子这个提议太好了，这样可以根据贴子结构任意切换横排或者竖排。。。更加灵活。。{:4_199:}
你这横竖的歌词大小和间距看样子是设计好的，刚好可以等会试试。。 马黑黑 发表于 2025-3-26 22:05
@红影 提到可否让 range 播放器横排、竖排歌词的模块集合在一起。当时我想，模块里会有很多地方做分支，CSS ...
期待你说的经典版花朝原生LRC歌词播放器ES模块，应该谢谢你才对~~{:4_173:} 花飞飞 发表于 2025-3-26 22:28
影子这个提议太好了，这样可以根据贴子结构任意切换横排或者竖排。。。更加灵活。。
你这横竖 ...
不必也不要自己设置 #lrcDiv 的宽高，测试一下 writting-mode 属性就好 这个是二合一了，横排竖排都集中在一个封装里，太好了{:4_199:} 花飞飞 发表于 2025-3-26 22:30
期待你说的经典版花朝原生LRC歌词播放器ES模块，应该谢谢你才对~~
那个主要是用div做吧，不用range之类的。过去我们有过插件，但不打算参考那个插件，性质不太一样 红影 发表于 2025-3-26 22:31
这个是二合一了，横排竖排都集中在一个封装里，太好了
我测试了一下，暂时发现能正常运行 看到黑黑说今天病休，黑黑怎么了，身体不舒服么？{:4_184:} 这个心形的小播搭配这样的梦幻时空之门，构思巧妙，色彩整得流光溢彩，金光闪闪的。。{:4_170:}
看着就心情大好。。赞。。 红影 发表于 2025-3-26 22:32
看到黑黑说今天病休，黑黑怎么了，身体不舒服么？
也没啥，有点低烧，刚去跑步出了一身汗，现在轻松了 花飞飞 发表于 2025-3-26 22:33
这个心形的小播搭配这样的梦幻时空之门，构思巧妙，色彩整得流光溢彩，金光闪闪的。。
看着就心 ...
{:4_189:} “模块会自动设置歌词盒子的尺寸，帖子里 #lrcDiv {} 选择器的宽高不要去设置。”
嗯，记下了{:4_204:} 马黑黑 发表于 2025-3-26 22:30
不必也不要自己设置 #lrcDiv 的宽高，测试一下 writting-mode 属性就好
{:4_199:}不必要设置的好，对懒人小白特别友好。。 马黑黑 发表于 2025-3-26 22:32
那个主要是用div做吧，不用range之类的。过去我们有过插件，但不打算参考那个插件，性质不太一样
{:4_173:}越来越多的样式，期待期待 红影 发表于 2025-3-26 22:34
“模块会自动设置歌词盒子的尺寸，帖子里 #lrcDiv {} 选择器的宽高不要去设置。”
嗯，记下了
不过做帖子时如果设置了，会发现不正常，还有交给模块去自动处理 花飞飞 发表于 2025-3-26 22:35
不必要设置的好，对懒人小白特别友好。。
包干了{:4_170:} 花飞飞 发表于 2025-3-26 22:35
越来越多的样式，期待期待
基本样式不会有大变化，就是做着做着吧，总得小结一下，div拖曳的也得练练手 马黑黑 发表于 2025-3-26 22:33
也没啥，有点低烧，刚去跑步出了一身汗，现在轻松了
{:4_173:}运动量跟平时差不多也没少