LyricPlayerProps
歌词播放组件的属性
Properties
alignAnchor?
optional
alignAnchor:"center"
|"bottom"
|"top"
设置歌词行的对齐方式,如果为 undefined
则默认为 center
- 设置成
top
的话将会向目标歌词行的顶部对齐 - 设置成
bottom
的话将会向目标歌词行的底部对齐 - 设置成
center
的话将会向目标歌词行的垂直中心对齐
Defined in
packages/react/src/lyric-player.tsx:41
alignPosition?
optional
alignPosition:number
设置默认的歌词行对齐位置,相对于整个歌词播放组件的大小位置,如果为 undefined
则默认为 0.5
可以设置一个 [0.0-1.0]
之间的任意数字,代表组件高度由上到下的比例位置
Defined in
packages/react/src/lyric-player.tsx:48
bottomLine?
optional
bottomLine:ReactNode
在一个特殊的底栏元素内加入指定元素,默认是空白的,可以往内部添加任意元素
这个元素始终在歌词的底部,可以用于显示歌曲创作者等信息
Defined in
packages/react/src/lyric-player.tsx:116
currentTime?
optional
currentTime:number
设置当前播放进度,单位为毫秒且必须是整数,此时将会更新内部的歌词进度信息 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词,所以这个的调用频率越快越准确越好
Defined in
packages/react/src/lyric-player.tsx:81
disabled?
optional
disabled:boolean
是否禁用歌词播放组件,默认为 false
,歌词组件启用后将会开始逐帧更新歌词的动画效果,并对传入的其他参数变更做出反馈。
如果禁用了歌词组件动画,你也可以通过引用取得原始渲染组件实例,手动逐帧调用其 update
函数来更新动画效果。
Defined in
packages/react/src/lyric-player.tsx:29
enableBlur?
optional
enableBlur:boolean
设置是否启用歌词行的模糊效果,默认为 true
Defined in
packages/react/src/lyric-player.tsx:60
enableScale?
optional
enableScale:boolean
设置是否使用物理弹簧算法实现歌词动画效果,默认启用
如果启用,则会通过弹簧算法实时处理歌词位置,但是需要性能足够强劲的电脑方可流畅运行
如果不启用,则会回退到基于 transition
的过渡效果,对低性能的机器比较友好,但是效果会比较单一
Defined in
packages/react/src/lyric-player.tsx:68
enableSpring?
optional
enableSpring:boolean
设置是否使用物理弹簧算法实现歌词动画效果,默认启用
如果启用,则会通过弹簧算法实时处理歌词位置,但是需要性能足够强劲的电脑方可流畅运行
如果不启用,则会回退到基于 transition
的过渡效果,对低性能的机器比较友好,但是效果会比较单一
Defined in
packages/react/src/lyric-player.tsx:56
hidePassedLines?
optional
hidePassedLines:boolean
设置是否隐藏已经播放过的歌词行,默认不隐藏
Defined in
packages/react/src/lyric-player.tsx:72
isSeeking?
optional
isSeeking:boolean
Defined in
packages/react/src/lyric-player.tsx:82
linePosXSpringParams?
optional
linePosXSpringParams:Partial
<SpringParams
>
设置所有歌词行在横坐标上的弹簧属性,包括重量、弹力和阻力。
Param
需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样
Defined in
packages/react/src/lyric-player.tsx:98
linePosYSpringParams?
optional
linePosYSpringParams:Partial
<SpringParams
>
设置所有歌词行在纵坐标上的弹簧属性,包括重量、弹力和阻力。
Param
需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样
Defined in
packages/react/src/lyric-player.tsx:104
lineScaleSpringParams?
optional
lineScaleSpringParams:Partial
<SpringParams
>
设置所有歌词行在缩放大小上的弹簧属性,包括重量、弹力和阻力。
Param
需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样
Defined in
packages/react/src/lyric-player.tsx:110
lyricLines?
optional
lyricLines:LyricLine
[]
设置当前播放歌词,要注意传入后这个数组内的信息不得修改,否则会发生错误
Defined in
packages/react/src/lyric-player.tsx:76
lyricPlayer()?
optional
lyricPlayer: (…args
) =>LyricPlayerBase
需要用于创建歌词播放组件的类实例
Parameters
• …args: []
Returns
LyricPlayerBase
Defined in
packages/react/src/lyric-player.tsx:120
onLyricLineClick()?
optional
onLyricLineClick: (line
) =>void
当某个歌词行被左键点击时触发的事件
Parameters
• line: LyricLineMouseEvent
歌词行的事件对象,可以访问到对应的歌词行信息和歌词行索引
Returns
void
Defined in
packages/react/src/lyric-player.tsx:129
onLyricLineContextMenu()?
optional
onLyricLineContextMenu: (line
) =>void
当某个歌词行被右键点击时触发的事件
Parameters
• line: LyricLineMouseEvent
歌词行的事件对象,可以访问到对应的歌词行信息和歌词行索引
Returns
void
Defined in
packages/react/src/lyric-player.tsx:134
playing?
optional
playing:boolean
是否演出部分效果,目前会控制播放间奏点的动画的播放暂停与否,默认为 true
Defined in
packages/react/src/lyric-player.tsx:33
wordFadeWidth?
optional
wordFadeWidth:number
设置文字动画的渐变宽度,单位以歌词行的主文字字体大小的倍数为单位,默认为 0.5,即一个全角字符的一半宽度
如果要模拟 Apple Music for Android 的效果,可以设置为 1
如果要模拟 Apple Music for iPad 的效果,可以设置为 0.5
如果想要近乎禁用渐变效果,可以设置成非常接近 0 的小数(例如 0.0001
),但是不可以为 0