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

马黑黑

HCPlayer

马黑黑

代码：

<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 = `[00:04.00]绿·山水吟\n[00:16.60]钟子期/俞伯牙\n[00:26.18]竹笛/箫：水玥儿\n[00:31.41]演唱/和声：五色石南叶/慕寒\n[00:41.98]人物绘画及MV绘制：梅鹿君\n[00:46.51]MV制作：耶Aya叁\n[00:51.31]MV题字：粽子\n[00:56.68]\n[01:05.31]空山无人处 闲花自开落\n[01:12.14]寄身天地间 抚琴与山河\n[01:18.96]罅隙生青松 鹤唳白云过\n[01:25.85]然日居月诸 唯应以沉默\n[01:32.49]\n[01:32.73]涧底尘事远 束薪隐约现\n[01:39.46]斧声无深浅 浮云时聚散\n[01:46.34]忽闻有琴音 渡水穿林来\n[01:53.22]高山会流水 天然一楹联\n[01:59.87]\n[02:00.14]在人间折转 于天涯寻觅\n[02:07.02]这无根之痛 可有人领悟\n[02:13.79]草木枯荣时 你落笔结字\n[02:20.70]这一啄一饮 均是前生定\n[02:27.83]\n[02:34.44]绿·山水吟·钟子期/俞伯牙\n[02:41.12]\n[02:55.04]生死了无期 不许陪左右\n[03:01.81]悲雪乘风起 片片落心头\n[03:08.74]曾素酒论琴 浑不知岁月\n[03:15.57]碧空白云飞 青山影欲流\n[03:22.44]你心入我心 自在无拘束\n[03:29.26]如月出东隅 照山河大地\n[03:36.15]人生何其幸 能与你同渡\n[03:43.02]水流花开间 竟大美如斯\n[03:49.87]你心入我心 自在无拘束\n[03:56.73]如月出东隅 照山河大地\n[04:03.58]人生何其幸 能与你同渡\n[04:10.46]水流花开间 竟大美如斯\n[04:17.25]诀别未了事 谁为你打谱\n[04:24.90]余生不必弹 摔琴谢知音\n[04:36.46]\n`;
	var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: lrc2ar(geci) };
	var audio = new Aud(mDatas);
	audio.play();
</script>

花飞飞

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

马黑黑

参数配置做了减法。作为代价，① 要求 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)

花飞飞

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

花飞飞

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

var mDatas = {

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

马黑黑

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

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

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

花飞飞

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

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

马黑黑

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

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

马黑黑

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

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

红影

马黑黑 发表于 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:44
无论歌词还是视频，都是一键全控，而且代码越来越简洁了，真棒

前台代码少了不少吧

马黑黑

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

一切可以自定义。原理：

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

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

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

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

马黑黑

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

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

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

梦江南

谢谢老师对代码的详细讲解，辛苦了！

红影

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

是啊，看着那么简洁清爽呢

红影

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

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

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