LyricPlayer 组件
LyricPlayer是AMLL的核心组件之一。AMLL的歌词演出(即歌词滚动、逐词歌词高亮、歌词辉光等效果)由LyricPlayer完成。
AMLL对LyricPlayer进行了React绑定,因此你可以方便的在React项目中使用LyricPlayer。
LyricPlayer的快速入门,你可以在AMLL React快速入门中找到。
请参考AMLL React快速入门中的教程。
Props参数
Section titled “Props参数”AMLL LyricPlayer已进行React绑定,通过Props即可进行自定义配置。
Lyric Player提供以下Props:
| Props | 类型 | 默认 | 作用 |
|---|---|---|---|
| disabled | 布尔值 | true | 是否演出部分效果,目前会控制播放间奏点的动画的播放暂停与否 |
| playing | 布尔值 | true | 是否演出部分效果,目前会控制播放间奏点的动画的播放暂停与否 |
| alignAnchor | top/bottom/center | center | 设置歌词行的对齐方式,分别向目标歌词行的顶部/底部/垂直中心对齐 |
| alignPosition | 数字 | 0.5 | 设置默认的歌词行对齐位置,相对于整个歌词播放组件的大小位置。可以设置一个 0.0-1.0 之间的任意数字,代表组件高度由上到下的比例位置 |
| enableSpring | 布尔值 | true | 设置是否使用物理弹簧算法实现歌词动画效果。如果启用,则会通过弹簧算法实时处理歌词位置,但是需要性能足够强劲的电脑方可流畅运行;如果不启用,则会回退到基于 transition 的过渡效果,对低性能的机器比较友好,但是效果会比较单一 |
| enableBlur | 布尔值 | true | 设置是否启用歌词行的模糊效果 |
| enableScale | 布尔值 | true | 设置是否使用物理弹簧算法实现歌词动画效果。如果启用,则会通过弹簧算法实时处理歌词位置,但是需要性能足够强劲的电脑方可流畅运行; 如果不启用,则会回退到基于 transition 的过渡效果,对低性能的机器比较友好,但是效果会比较单一 |
| hidePassedLines | 布尔值 | false | 设置是否隐藏已经播放过的歌词行 |
| lyricLines | LyricLine[] | null | 设置当前播放歌词,要注意传入后这个数组内的信息不得修改,否则会发生错误 |
| currentTime | 数字 | null | 设置当前播放进度,单位为毫秒且必须是整数,此时将会更新内部的歌词进度信息。内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词,所以这个的调用频率越快越准确越好 |
| linePosXSpringParams | Partial[spring.SpringParams] | null | 设置所有歌词行在纵坐标上的弹簧属性,包括重量、弹力和阻力。params 需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样 |
| linePosYSpringParams | Partial[spring.SpringParams] | null | 设置所有歌词行在纵坐标上的弹簧属性,包括重量、弹力和阻力。params 需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样 |
| lineScaleSpringParams | Partial[spring.SpringParams] | null | 设置所有歌词行在缩放大小上的弹簧属性,包括重量、弹力和阻力。 params 需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样 |
| bottomLine | ReactNode | null | 在一个特殊的底栏元素内加入指定元素,默认是空白的,可以往内部添加任意元素。这个元素始终在歌词的底部,可以用于显示歌曲创作者等信息 |
| onLyricLineClick | (line: LyricLineMouseEvent) => void | null | 当某个歌词行被左键点击时触发的事件。line 歌词行的事件对象,可以访问到对应的歌词行信息和歌词行索引 |
| onLyricLineContextMenu | (line: LyricLineMouseEvent) => void | null | 当某个歌词行被右键点击时触发的事件。line 歌词行的事件对象,可以访问到对应的歌词行信息和歌词行索引 |