---
title: LyricPlayer组件
---

# LyricPlayer组件

## 概述

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

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

LyricPlayer的快速入门，你可以在[AMLL React快速入门](./quick-start)中找到。

## 使用

请参考[AMLL React快速入门](./quick-start)中的教程。

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