天問 - 马黑黑教程专版 - 花潮论坛

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

天問

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

<div id="hEdiv"><pre id="hEpre">
<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 = `
演唱人 : 信樂團
製作人: Keith Stuart
詞: 武雄
曲: 傅超華/劉曉華/Keith Stuart
是誰砍去了森林種下高樓
霓虹燈閃爍照亮了什麼
是誰融化了冰雪灌溉誘惑
慾望的漩渦淹沒了什麼
天和地已經在怒吼
風和雨不會沈默
你和我可曾想過
還想毀滅什麼呢
我們已經闖了多少禍
如果不懂回頭會有什麼後果
還想得到什麼呢
得到是否真的就擁有
如果你還愛我就請你告訴我
是誰點燃了衝突漫天飛舞
燃燒的理智將落向何處
是誰埋葬了祝福引爆憤怒
末世的音符該向誰哭訴
天和地已經在倒數
風和雨即將反撲
你和我可曾覺悟
還能留下什麼呢
距離末日還剩下多久
如果現在回頭你是否還愛我
還能相信什麼呢還能靠誰來拯救
如果你還愛我就請你告訴我
路的盡頭該怎麼走
如果你還愛我就請你告訴我
`;
hcplay(papa, lrc);
</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-20 12:20

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

帖子测试歌词与播放器分离的原生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

黑黑今天的新分享，先赞一下{:4_199:}

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

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

{:4_190:}

杨帆发表于 2025-3-20 13:06

辛苦了！祝贺马老师再出新作，谢谢马老师无私分享{:4_191:}

朵拉发表于 2025-3-20 14:11

漂亮制作，欣赏学习了{:4_178:}

梦江南 发表于 2025-3-20 15:36

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

马黑黑 发表于 2025-3-20 18:10

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

这背后是模块

马黑黑 发表于 2025-3-20 18:10

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

{:4_190:}

南无月 发表于 2025-3-20 18:38

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

南无月 发表于 2025-3-20 18:41

本帖最后由南无月于 2025-3-20 18:43 编辑

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

南无月 发表于 2025-3-20 18:42

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

南无月 发表于 2025-3-20 18:44

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

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

南无月 发表于 2025-3-20 18:47

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

#mplayer: { ......

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

红影发表于 2025-3-20 19:32

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

红影发表于 2025-3-20 19:33

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

红影发表于 2025-3-20 19:40

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

红影发表于 2025-3-20 19:41

有一个封装好的可以和播放器分离的代码，真好{:4_199:}

小辣椒 发表于 2025-3-20 21:21

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

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

页: [1] 2 3 4 5 6 7

花潮论坛's Archiver

天問