天問

马黑黑

马黑黑

<style>
	@import 'https://638183.freep.cn/638183/web/ku/yslrc_player_01.css';
	#papa { margin: 30px 0 30px calc(50% - 591px); background: #000 url('https://638183.freep.cn/638183/t24/webp3/tmwf.webp') no-repeat center/cover; }
	#mplayer { --track: #ddd; --prog: #ff22ee; color: #eee; bottom: 10px; width: 50%; }
	#lrcDiv { --hlcolor: #fff; color: #ccc; right: 10px; top: 20px; }
	#fsbtn { top: 20px; left: 20px; }
</style>

<div id="papa" class="pa">
	<audio src="https://music.163.com/song/media/outer/url?id=2674408960" autoplay loop></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/13/50/12/video6363569454a33.mp4" autoplay loop muted></video>
</div>

<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/yslrc_player_01.js';
var lrc = `
	[00:01.45]演唱人 : 信樂團
	[00:03.60]製作人: Keith Stuart
	[00:06.31]詞: 武雄
	[00:08.93]曲: 傅超華/劉曉華/Keith Stuart
	[00:18.60]是誰砍去了森林 種下高樓
	[00:23.74]霓虹燈閃爍 照亮了什麼
	[00:31.06]是誰融化了冰雪 灌溉誘惑
	[00:36.25]慾望的漩渦 淹沒了什麼
	[00:43.59]天和地 已經在怒吼
	[00:49.80]風和雨 不會沈默
	[00:56.04]你和我 可曾想過
	[01:05.48]還想毀滅什麼呢
	[01:11.70]我們已經闖了多少禍
	[01:19.12]如果不懂回頭 會有什麼後果
	[01:30.46]還想得到什麼呢
	[01:36.62]得到是否真的就擁有
	[01:44.01]如果你還愛我 就請你告訴我
	[02:07.84]是誰點燃了衝突 漫天飛舞
	[02:12.90]燃燒的理智 將落向何處
	[02:20.23]是誰埋葬了祝福 引爆憤怒
	[02:25.31]末世的音符 該向誰哭訴
	[02:32.70]天和地 已經在倒數
	[02:38.91]風和雨 即將反撲
	[02:45.11]你和我 可曾覺悟
	[02:54.57]還能留下什麼呢
	[03:00.73]距離末日還剩下多久
	[03:08.07]如果現在回頭 你是否還愛我
	[03:49.48]還能相信什麼呢 還能靠誰來拯救
	[04:00.78]如果你還愛我 就請你告訴我
	[04:13.23]路的盡頭 該怎麼走
	[04:25.63]如果你還愛我 就請你告訴我
`;
hcplay(papa, lrc);
</script>

马黑黑

帖子测试歌词与播放器分离的原生LRC歌词播放器。具体UI设置在CSS中配置播放器和歌词：

#mplayer: { ... }

    --track: gray; /* 进度条底色 */
    --prog: red; /* 进度指示色、按钮颜色 */
    color:  /* 前景色（时间信息使用 */
    /* width: 50%; 宽度也可以在这里设置 */


#lrcDiv { ... }

    --hlcolor:  red; /* 歌词高亮颜色 */
    color: silver; /* 歌词底色 */
    width: 500px; /* lrc区域宽度，默认400px，可根据歌句长短进行设置 */
    height:  150px; /* lrc区域高度，默认90px，会影响歌词显示行数，建议 30px、90px、150px 这样的高度，对应 1行、3行、5行 */

另外，播放器和歌词显示区域都支持通过 left、top、bottom、right 等配套属性进行具体定位。


歌词变量方面

主要讲讲写法，可以分行写，可以用 \n 表示分行将全部歌词写在一行内，同时模块支持 \r 或 \r\n 分行。每句歌词都应符合LRC歌词书写规范，模块没有对歌词做排错检查，如果歌词不规范读到的数据将是不能正常工作的。

小辣椒

黑黑今天的新分享，先赞一下

马黑黑

小辣椒 发表于 2025-3-20 12:46
黑黑今天的新分享，先赞一下

杨帆

辛苦了！祝贺马老师再出新作，谢谢马老师无私分享

朵拉

漂亮制作，欣赏学习了

梦江南

这么简洁的代码做出这么漂亮的音画，真正佩服了！

马黑黑

梦江南 发表于 2025-3-20 15:36
这么简洁的代码做出这么漂亮的音画，真正佩服了！

这背后是模块

马黑黑

朵拉 发表于 2025-3-20 14:11
漂亮制作，欣赏学习了

南无月

这个作品，从标题到歌词全是繁体字。。
繁体字有一种魔性，它写出来的字非常好看。。。。
平时做贴常常要用到种类不同的繁体，用来做装饰。。只是有些字库时并不显示~~很可惜。。
这里的都显示完美，大爱大赞

南无月

这个跟昨天那个歌词和小播绑定的不同，它是可以分离的。。放在任意需要的位置。。
歌词三行显示，当下行高亮，随唱随显，很漂亮。。
这样的设计本身就有一定的装饰性，
无论歌词还是小播，都依然选择了透明，更好与大背景融合。。
歌词选择三句同色，与昨天不同，高亮部分用大小区分。。。
昨天跟贴的时候改过相关设置，灵活又方便

南无月

小播自成一景，在下方。简单的一点一横，细线进度条怎么看都相当美观。。

南无月

马黑黑 发表于 2025-3-20 12:20
帖子测试歌词与播放器分离的原生LRC歌词播放器。具体UI设置在CSS中配置播放器和歌词：

#mplayer: { ...  ...

除了LRC高度可以更改行数。
昨天试贴的时候发现调整字体大小也可以更改行数。。
这种办法虽可看到五行，但字体显示有点小~~适用范围不是很大

南无月

马黑黑 发表于 2025-3-20 12:20
帖子测试歌词与播放器分离的原生LRC歌词播放器。具体UI设置在CSS中配置播放器和歌词：

#mplayer: { ...  ...

那个歌词昨晚我费老大劲了。。花了好长时间调。。
等会我去比一下昨晚原稿，还有根据你的提示看看下回要注意哪里。。
可不能老踩坑了

红影

这个好，可以让歌词和播放器分离了，想放在哪就放在哪，有更多的自主性

红影

这首歌内涵很深，如果我们这样继续破坏自然，一定会被惩罚。
伴奏音里有很奇特的声音，头一次听到这歌，忍不住全部听完再来回帖的

红影

这样的天问，对人世的胡作非为做了谴责，人类什么时候才能醒悟，什么时候才能尊重自然，与自然和谐共处呢

红影

有一个封装好的可以和播放器分离的代码，真好

小辣椒

马黑黑 发表于 2025-3-20 12:53

看看二个播放器差不多的我按图界面做了昨天的那个效果