跳转到内容
Apple Music-like Lyrics

LyricPlayerProps

Defined in: react/src/lyric-player.tsx:22

歌词播放组件的属性

Properties

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