绿·山水吟（测试audlrc模块）

马黑黑 发表于 2024-11-20 20:48

马黑黑 发表于 2024-11-20 20:49

<h2>代码：</h2>
<div id="hEdiv"><pre id="hEpre">
<style>
@import 'https://638183.freep.cn/638183/web/css/audlrc.css';
#mama { margin: 30px 0 30px calc(50% - 593px); background: black url('https://638183.freep.cn/638183/small/opic.jpg') no-repeat center/ cover; }
#player { left: calc(50% - 130px); }
#prog { bottom: 30px; width: 280px; --bg1: lightgreen; --bg2: green; --color: lightgreen; }
#lrc { top: 20px; --bg: linear-gradient(rgba(0,128,0,.25),rgba(0,128,0,.75)); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
</style>

<div id="mama" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=33760107"></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/13/50/06/video6363568e47b1f.mp4" autoplay loop muted></video>
<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
<img id="player" class="player" src="https://638183.freep.cn/638183/web/svg/ccf.svg" alt="" />
<div id="prog" class="prog" data-tt="00:00 00:00"></div>
</div>

<script type="module">
import { lrc2ar } from 'https://638183.freep.cn/638183/web/mod/lrc2ar.js';
import { Aud } from 'https://638183.freep.cn/638183/web/mod/audlrc.js';
var geci = `绿·山水吟\n钟子期/俞伯牙\n竹笛/箫：水玥儿\n演唱/和声：五色石南叶/慕寒\n人物绘画及MV绘制：梅鹿君\nMV制作：耶Aya叁\nMV题字：粽子\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`;
var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: lrc2ar(geci) };
var audio = new Aud(mDatas);
audio.play();
</script>
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>

花飞飞 发表于 2024-11-20 20:55

神速啊白老师，刚聊到可加歌词，转身十分钟就看到了。。{:4_173:}

马黑黑 发表于 2024-11-20 20:55

本帖最后由马黑黑于 2024-11-20 21:01 编辑

参数配置做了减法。作为代价，① 要求 audio 标签必须放在帖子元素里面，否则插件查询不到，② 管理CSS动画的CSS变量定性使用 --state。下面是简单配置说明：

var mDatas = {
pa: mama, /* 帖子容器id标识 */
btn: player, /* 按钮id标识 */
prog: prog, /* 进度条id标识 */
lrc: lrc, /* lrc歌词标签id标识 */
lrcAr: lrc2ar(geci) /* 歌词数组（这里用了转换函数，后续有说明） */
};

lrc:指显示lrc歌词的标签
lrcAr: 指歌词数组，默认支持花潮格式。如果是原生格式的lrc歌词，请用 lrc2ar(歌词变量) 来表示（如本例），lrc2ar() 函数需要先引入资源（第19行），函数支持另外两个参数，skip 和 aver，前者是歌词提前或延后，后者是平均值补偿，不提供时默认都是 0，若需要提供，酱紫写：

lrc2ar(geci, 0.5, 0.8)

花飞飞 发表于 2024-11-20 20:58

import { lrc2ar }
import { Aud }
这两个不一样。
audlrc.js
audlrc.css
这个封装的名字也与昨天不同，里面加歌词之后应该改变比较大吧。。

花飞飞 发表于 2024-11-20 21:00

马黑黑发表于 2024-11-20 20:55
参数配置做了减法：

var mDatas = {

我的天，居然还支持原生歌词，我说为啥看着lrc2ar 这个写法有点不一样{:4_173:}

马黑黑 发表于 2024-11-20 21:05

花飞飞发表于 2024-11-20 20:58
import { lrc2ar }
import { Aud }
这两个不一样。

原生lrc歌词需要引用一个转换函数进行处理，lrc2ar 资源封装的是转换原生lrc歌词为花潮格式的函数。如果歌词直接是花潮格式的lrc歌词数组，就不需要引用这个资源。

Aud 的引用与之前的大同小异，没有多大变化，仅在配置上各有不同。

花飞飞 发表于 2024-11-20 21:11

马黑黑发表于 2024-11-20 21:05
原生lrc歌词需要引用一个转换函数进行处理，lrc2ar 资源封装的是转换原生lrc歌词为花潮格式的函数。如果 ...

原来如此，import { lrc2ar } from 'https://638183.freep.cn/638183/web/mod/lrc2ar.js';
这句是原生歌词专用的。
连调整参数都考虑到了，这个是真够细致的。{:4_199:}

醉美水芙蓉 发表于 2024-11-20 21:28

马黑黑 发表于 2024-11-20 22:03

醉美水芙蓉发表于 2024-11-20 21:28
老师好神速！同步歌词出来了！

移植而已，不是重新造轮子，没啥难度

马黑黑 发表于 2024-11-20 22:04

花飞飞发表于 2024-11-20 21:11
原来如此，import { lrc2ar } from 'https://638183.freep.cn/638183/web/mod/lrc2ar.js';
这句是原生歌 ...

调整参数还是需要的，不过默认可以不要

红影发表于 2024-11-20 22:38

马黑黑发表于 2024-11-20 20:55
参数配置做了减法。作为代价，① 要求 audio 标签必须放在帖子元素里面，否则插件查询不到，② 管理CSS动画 ...

“函数支持另外两个参数，skip 和 aver，前者是歌词提前或延后”

如果要用到，就是19行变成import { lrc2ar(geci, 0.5, 0.8) } from 'https://638183.freep.cn/638183/web/mod/lrc2ar.js';

或者单独加？

红影发表于 2024-11-20 22:40

这个封装了音乐联动和进度条以及歌词同步，太好了。{:4_199:}
歌词同步里能改其他的内容么，比如字体大小之类的。

红影发表于 2024-11-20 22:44

无论歌词还是视频，都是一键全控，而且代码越来越简洁了，真棒{:4_199:}

马黑黑 发表于 2024-11-20 23:07

红影发表于 2024-11-20 22:44
无论歌词还是视频，都是一键全控，而且代码越来越简洁了，真棒

前台代码少了不少吧

马黑黑 发表于 2024-11-20 23:15

红影发表于 2024-11-20 22:40
这个封装了音乐联动和进度条以及歌词同步，太好了。
歌词同步里能改其他的内容么，比如字体大小 ...

一切可以自定义。原理：

@import CSS资源在先，资源里以 .选择器设置了一些属性，而自己的 #选择器在后，所做的相同属性设置会覆盖前边的设置。

以帖子宽高尺寸为例，资源里的 .pa 选择器设定为 1024*640，若不满意这个尺寸，在你的 #选择器中重新设定宽高值。

而有一些设定因为涉及到伪元素，使用了 --CSS变量来设置，你可以在相应 #选择器重新给这些变量重新赋值。以 lrc 为例：

--bg 变量是lrc歌词同步颜色，底色则使用常规CSS的 color 属性，在 #lrc 里设置就可以。字体大小就是font类别的设置，一样在 #lrc 里设置。

马黑黑 发表于 2024-11-20 23:18

红影发表于 2024-11-20 22:38
“函数支持另外两个参数，skip 和 aver，前者是歌词提前或延后”

如果要用到，就是19行变成import { l ...

引用语句不能放参数，因为这是从模块资源中引用 lrc2ar 这个函数，而不是在这里运行函数。你看代码 21 行，那里才开始声明歌词变量 geci，这个歌词是原生lrc歌词，要用函数 lrc2ar 做处理，变量必须在声明之后才能做处理，具体放在配置参数那部分代码里，22行，注意观察歌词参数的处理。

梦江南 发表于 2024-11-21 09:02

谢谢老师对代码的详细讲解，辛苦了！{:4_190:}

红影发表于 2024-11-21 16:31

马黑黑发表于 2024-11-20 23:07
前台代码少了不少吧

是啊，看着那么简洁清爽呢{:4_187:}

红影发表于 2024-11-21 16:33

马黑黑发表于 2024-11-20 23:15
一切可以自定义。原理：

@import CSS资源在先，资源里以 .选择器设置了一些属性，而自己的 #选择器...

嗯嗯，后面的设置可以覆盖前面的，想直接用也可以，想修改也可以，这个太方便了。{:4_187:}

页: [1] 2 3 4

花潮论坛's Archiver

绿·山水吟（测试audlrc模块）