LyricPlayer 组件

概述

LyricPlayer是AMLL的核心组件之一。AMLL的歌词演出（即歌词滚动、逐词歌词高亮、歌词辉光等效果）由LyricPlayer完成。

AMLL对LyricPlayer进行了React绑定，因此你可以方便的在React项目中使用LyricPlayer。

LyricPlayer的快速入门，你可以在AMLL React快速入门中找到。

使用

请参考AMLL React快速入门中的教程。

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 歌词行的事件对象，可以访问到对应的歌词行信息和歌词行索引