DomLyricPlayer
Defined in: packages/core/src/lyric-player/dom/index.ts:39
歌词播放组件,本框架的核心组件
尽可能贴切 Apple Music for iPad 的歌词效果设计,且做了力所能及的优化措施
Extends
Section titled “Extends”Constructors
Section titled “Constructors”Constructor
Section titled “Constructor”new DomLyricPlayer(): DomLyricPlayer;Defined in: packages/core/src/lyric-player/dom/index.ts:76
Returns
Section titled “Returns”DomLyricPlayer
Overrides
Section titled “Overrides”Properties
Section titled “Properties”Accessors
Section titled “Accessors”baseFontSize
Section titled “baseFontSize”Get Signature
Section titled “Get Signature”get baseFontSize(): number;Defined in: packages/core/src/lyric-player/dom/index.ts:73
Returns
Section titled “Returns”number
Overrides
Section titled “Overrides”Methods
Section titled “Methods”_getIsNonDynamic()
Section titled “_getIsNonDynamic()”_getIsNonDynamic(): boolean;Defined in: packages/core/src/lyric-player/dom/index.ts:67
Internal
是否为非逐词歌词
Returns
Section titled “Returns”boolean
addEventListener()
Section titled “addEventListener()”addEventListener( type, callback, options?): void;Defined in: node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.dom.d.ts:11569
The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
type | string |
callback | EventListenerOrEventListenerObject | null |
options? | boolean | AddEventListenerOptions |
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”LyricPlayerBase.addEventListener
calcLayout()
Section titled “calcLayout()”calcLayout(sync?, force?): Promise<void>;Defined in: packages/core/src/lyric-player/base.ts:797
重新布局定位歌词行的位置,调用完成后再逐帧调用 update
函数即可让歌词通过动画移动到目标位置。
函数有一个 force 参数,用于指定是否强制修改布局,也就是不经过动画直接调整元素位置和大小。
此函数还有一个 reflow 参数,用于指定是否需要重新计算布局
因为计算布局必定会导致浏览器重排布局,所以会大幅度影响流畅度和性能,故请只在以下情况下将其设置为 true:
- 歌词页面大小发生改变时(这个组件会自行处理)
- 加载了新的歌词时(不论前后歌词是否完全一样)
- 用户自行跳转了歌曲播放位置(不论距离远近)
Parameters
Section titled “Parameters”| Parameter | Type | Default value | Description |
|---|---|---|---|
sync | boolean | false | 是否同步执行,通常用于初始化或 Resize 时立即布局 |
force | boolean | false | 是否绕过弹簧效果强制更新位置 |
Returns
Section titled “Returns”Promise<void>
Inherited from
Section titled “Inherited from”dispatchEvent()
Section titled “dispatchEvent()”dispatchEvent(event): boolean;Defined in: node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.dom.d.ts:11575
The dispatchEvent() method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
event | Event |
Returns
Section titled “Returns”boolean
Inherited from
Section titled “Inherited from”dispose()
Section titled “dispose()”dispose(): void;Defined in: packages/core/src/lyric-player/dom/index.ts:180
销毁实现了该接口的对象实例,释放占用的资源
一般情况下,调用本函数后就不可以再调用对象的任何函数了
Returns
Section titled “Returns”void
Overrides
Section titled “Overrides”getBottomLineElement()
Section titled “getBottomLineElement()”getBottomLineElement(): HTMLElement;Defined in: packages/core/src/lyric-player/base.ts:1052
获取一个特殊的底栏元素,默认是空白的,可以往内部添加任意元素
这个元素始终在歌词的底部,可以用于显示歌曲创作者等信息
但是请勿删除该元素,只能在内部存放元素
Returns
Section titled “Returns”HTMLElement
一个元素,可以往内部添加任意元素
Inherited from
Section titled “Inherited from”LyricPlayerBase.getBottomLineElement
getCurrentInterlude()
Section titled “getCurrentInterlude()”protected getCurrentInterlude(): [number, number, number, boolean] | undefined;Defined in: packages/core/src/lyric-player/base.ts:537
获取当前播放时间里是否处于间奏区间 如果是则会返回单位为毫秒的始末时间 否则返回 undefined
这个只允许内部调用
Returns
Section titled “Returns”[number, number, number, boolean] | undefined
[开始时间,结束时间,大概处于的歌词行ID,下一句是否为对唱歌词] 或 undefined 如果不处于间奏区间
Inherited from
Section titled “Inherited from”LyricPlayerBase.getCurrentInterlude
getCurrentTime()
Section titled “getCurrentTime()”getCurrentTime(): number;Defined in: packages/core/src/lyric-player/base.ts:1081
获取当前歌词的播放位置
一般和最后调用 setCurrentTime 给予的参数一样
Returns
Section titled “Returns”number
当前播放位置
Inherited from
Section titled “Inherited from”LyricPlayerBase.getCurrentTime
getElement()
Section titled “getElement()”getElement(): HTMLElement;Defined in: packages/core/src/lyric-player/base.ts:1085
获取这个类所对应的 HTML 元素实例
Returns
Section titled “Returns”HTMLElement
Inherited from
Section titled “Inherited from”getEnableScale()
Section titled “getEnableScale()”getEnableScale(): boolean;Defined in: packages/core/src/lyric-player/base.ts:371
获取当前是否启用了歌词行缩放效果
Returns
Section titled “Returns”boolean
是否启用歌词行缩放效果
Inherited from
Section titled “Inherited from”LyricPlayerBase.getEnableScale
getEnableSpring()
Section titled “getEnableSpring()”getEnableSpring(): boolean;Defined in: packages/core/src/lyric-player/base.ts:525
获取当前是否启用了物理弹簧
Returns
Section titled “Returns”boolean
是否启用物理弹簧
Inherited from
Section titled “Inherited from”LyricPlayerBase.getEnableSpring
getIsPlaying()
Section titled “getIsPlaying()”getIsPlaying(): boolean;Defined in: packages/core/src/lyric-player/base.ts:628
获取当前是否在播放
Returns
Section titled “Returns”boolean
当前是否在播放
Inherited from
Section titled “Inherited from”getLyricLines()
Section titled “getLyricLines()”getLyricLines(): LyricLine[];Defined in: packages/core/src/lyric-player/base.ts:1072
获取当前歌词数组
一般和最后调用 setLyricLines 给予的参数一样
Returns
Section titled “Returns”当前歌词数组
Inherited from
Section titled “Inherited from”getOverscanPx()
Section titled “getOverscanPx()”getOverscanPx(): number;Defined in: packages/core/src/lyric-player/base.ts:502
获取当前 overscan 像素距离
Returns
Section titled “Returns”number
Inherited from
Section titled “Inherited from”getWordFadeWidth()
Section titled “getWordFadeWidth()”getWordFadeWidth(): number;Defined in: packages/core/src/lyric-player/base.ts:379
获取当前文字动画的渐变宽度,单位以歌词行的主文字字体大小的倍数为单位
Returns
Section titled “Returns”number
当前文字动画的渐变宽度,单位以歌词行的主文字字体大小的倍数为单位
Inherited from
Section titled “Inherited from”LyricPlayerBase.getWordFadeWidth
onResize()
Section titled “onResize()”onResize(): void;Defined in: packages/core/src/lyric-player/dom/index.ts:42
Returns
Section titled “Returns”void
Overrides
Section titled “Overrides”pause()
Section titled “pause()”pause(): void;Defined in: packages/core/src/lyric-player/dom/index.ts:144
暂停部分效果演出,目前会暂停播放间奏点的动画,且将背景歌词显示出来
Returns
Section titled “Returns”void
Overrides
Section titled “Overrides”processObsceneWord()
Section titled “processObsceneWord()”processObsceneWord(word): string;Defined in: packages/core/src/lyric-player/base.ts:440
Internal
根据当前配置处理不雅用语单词
Parameters
Section titled “Parameters”| Parameter | Type | Description |
|---|---|---|
word | LyricWord | 单词对象 |
Returns
Section titled “Returns”string
Inherited from
Section titled “Inherited from”LyricPlayerBase.processObsceneWord
rebuildLyricLines()
Section titled “rebuildLyricLines()”rebuildLyricLines(): void;Defined in: packages/core/src/lyric-player/base.ts:430
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”LyricPlayerBase.rebuildLyricLines
removeEventListener()
Section titled “removeEventListener()”removeEventListener( type, callback, options?): void;Defined in: node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.dom.d.ts:11581
The removeEventListener() method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
type | string |
callback | EventListenerOrEventListenerObject | null |
options? | boolean | EventListenerOptions |
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”LyricPlayerBase.removeEventListener
resetScroll()
Section titled “resetScroll()”resetScroll(): void;Defined in: packages/core/src/lyric-player/base.ts:1060
重置用户滚动状态
请在用户完成滚动点击跳转歌词时调用本事件再调用 calcLayout 以正确滚动到目标位置
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”resume()
Section titled “resume()”resume(): void;Defined in: packages/core/src/lyric-player/dom/index.ts:153
恢复部分效果演出,目前会恢复播放间奏点的动画
Returns
Section titled “Returns”void
Overrides
Section titled “Overrides”setAlignAnchor()
Section titled “setAlignAnchor()”setAlignAnchor(alignAnchor): void;Defined in: packages/core/src/lyric-player/base.ts:483
设置目标歌词行的对齐方式,默认为 center
- 设置成
top的话将会向目标歌词行的顶部对齐 - 设置成
bottom的话将会向目标歌词行的底部对齐 - 设置成
center的话将会向目标歌词行的垂直中心对齐
Parameters
Section titled “Parameters”| Parameter | Type | Description |
|---|---|---|
alignAnchor | "center" | "bottom" | "top" | 歌词行对齐方式,详情见函数说明 |
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”LyricPlayerBase.setAlignAnchor
setAlignPosition()
Section titled “setAlignPosition()”setAlignPosition(alignPosition): void;Defined in: packages/core/src/lyric-player/base.ts:490
设置默认的歌词行对齐位置,相对于整个歌词播放组件的大小位置,默认为 0.5
Parameters
Section titled “Parameters”| Parameter | Type | Description |
|---|---|---|
alignPosition | number | 一个 [0.0-1.0] 之间的任意数字,代表组件高度由上到下的比例位置 |
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”LyricPlayerBase.setAlignPosition
setCurrentTime()
Section titled “setCurrentTime()”setCurrentTime(time, isSeek?): void;Defined in: packages/core/src/lyric-player/base.ts:639
设置当前播放进度,单位为毫秒且必须是整数,此时将会更新内部的歌词进度信息 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词,所以这个的调用频率越快越准确越好
调用完成后,可以每帧调用 update 函数来执行歌词动画效果
Parameters
Section titled “Parameters”| Parameter | Type | Default value | Description |
|---|---|---|---|
time | number | undefined | 当前播放进度,单位为毫秒 |
isSeek | boolean | false | - |
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”LyricPlayerBase.setCurrentTime
setEnableBlur()
Section titled “setEnableBlur()”setEnableBlur(enable): void;Defined in: packages/core/src/lyric-player/base.ts:398
设置是否启用歌词行的模糊效果
Parameters
Section titled “Parameters”| Parameter | Type | Description |
|---|---|---|
enable | boolean | 是否启用 |
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”setEnableScale()
Section titled “setEnableScale()”setEnableScale(enable?): void;Defined in: packages/core/src/lyric-player/base.ts:363
是否启用歌词行缩放效果,默认启用
如果启用,非选中的歌词行会轻微缩小以凸显当前播放歌词行效果
此效果对性能影响微乎其微,推荐启用
Parameters
Section titled “Parameters”| Parameter | Type | Default value | Description |
|---|---|---|---|
enable | boolean | true | 是否启用歌词行缩放效果 |
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”LyricPlayerBase.setEnableScale
setEnableSpring()
Section titled “setEnableSpring()”setEnableSpring(enable?): void;Defined in: packages/core/src/lyric-player/base.ts:512
设置是否使用物理弹簧算法实现歌词动画效果,默认启用
如果启用,则会通过弹簧算法实时处理歌词位置,但是需要性能足够强劲的电脑方可流畅运行
如果不启用,则会回退到基于 transition 的过渡效果,对低性能的机器比较友好,但是效果会比较单一
Parameters
Section titled “Parameters”| Parameter | Type | Default value |
|---|---|---|
enable | boolean | true |
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”LyricPlayerBase.setEnableSpring
setHidePassedLines()
Section titled “setHidePassedLines()”setHidePassedLines(hide): void;Defined in: packages/core/src/lyric-player/base.ts:390
设置是否隐藏已经播放过的歌词行,默认不隐藏
Parameters
Section titled “Parameters”| Parameter | Type | Description |
|---|---|---|
hide | boolean | 是否隐藏已经播放过的歌词行,默认不隐藏 |
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”LyricPlayerBase.setHidePassedLines
setIsSeeking()
Section titled “setIsSeeking()”setIsSeeking(isSeeking): void;Defined in: packages/core/src/lyric-player/base.ts:383
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
isSeeking | boolean |
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”setLinePosXSpringParams()
Section titled “setLinePosXSpringParams()”setLinePosXSpringParams(_params?): void;Defined in: packages/core/src/lyric-player/base.ts:970
设置所有歌词行在横坐标上的弹簧属性,包括重量、弹力和阻力。
Parameters
Section titled “Parameters”| Parameter | Type |
|---|---|
_params | Partial<SpringParams> |
Returns
Section titled “Returns”void
Deprecated
Section titled “Deprecated”考虑到横向弹簧效果并不常见,所以这个函数将会在未来的版本中移除
Inherited from
Section titled “Inherited from”LyricPlayerBase.setLinePosXSpringParams
setLinePosYSpringParams()
Section titled “setLinePosYSpringParams()”setLinePosYSpringParams(params?): void;Defined in: packages/core/src/lyric-player/base.ts:976
设置所有歌词行在纵坐标上的弹簧属性,包括重量、弹力和阻力。
Parameters
Section titled “Parameters”| Parameter | Type | Description |
|---|---|---|
params | Partial<SpringParams> | 需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样 |
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”LyricPlayerBase.setLinePosYSpringParams
setLineScaleSpringParams()
Section titled “setLineScaleSpringParams()”setLineScaleSpringParams(params?): void;Defined in: packages/core/src/lyric-player/base.ts:991
设置所有歌词行在缩放大小上的弹簧属性,包括重量、弹力和阻力。
Parameters
Section titled “Parameters”| Parameter | Type | Description |
|---|---|---|
params | Partial<SpringParams> | 需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样 |
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”LyricPlayerBase.setLineScaleSpringParams
setLyricLines()
Section titled “setLyricLines()”setLyricLines(lines, initialTime?): void;Defined in: packages/core/src/lyric-player/dom/index.ts:107
设置当前播放歌词,要注意传入后这个数组内的信息不得修改,否则会发生错误
Parameters
Section titled “Parameters”| Parameter | Type | Default value | Description |
|---|---|---|---|
lines | LyricLine[] | undefined | 歌词数组 |
initialTime | number | 0 | 初始时间,默认为 0 |
Returns
Section titled “Returns”void
Overrides
Section titled “Overrides”setMaskObsceneWordChar()
Section titled “setMaskObsceneWordChar()”setMaskObsceneWordChar(char): void;Defined in: packages/core/src/lyric-player/base.ts:420
设置不雅用语掩码使用的字符,默认为 *
Parameters
Section titled “Parameters”| Parameter | Type | Description |
|---|---|---|
char | string | 单个字符,用于替换不雅用语中的字符 |
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”LyricPlayerBase.setMaskObsceneWordChar
setMaskObsceneWords()
Section titled “setMaskObsceneWords()”setMaskObsceneWords(mode): void;Defined in: packages/core/src/lyric-player/base.ts:409
设置歌词中不雅用语的掩码模式
Parameters
Section titled “Parameters”| Parameter | Type | Description |
|---|---|---|
mode | MaskObsceneWordsMode | 掩码模式 |
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”LyricPlayerBase.setMaskObsceneWords
setOptimizeOptions()
Section titled “setOptimizeOptions()”setOptimizeOptions(options): void;Defined in: packages/core/src/lyric-player/base.ts:579
设置歌词的优化配置项,这些配置项默认全部开启
注意,如果在 setLyricLines 之后修改此配置,需要重新调用 setLyricLines() 才能对当前歌词生效
Parameters
Section titled “Parameters”| Parameter | Type | Description |
|---|---|---|
options | OptimizeLyricOptions | 优化配置选项 |
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”LyricPlayerBase.setOptimizeOptions
setOverscanPx()
Section titled “setOverscanPx()”setOverscanPx(px): void;Defined in: packages/core/src/lyric-player/base.ts:498
设置 overscan(视图上下额外缓冲渲染区)距离,单位:像素。
Parameters
Section titled “Parameters”| Parameter | Type | Description |
|---|---|---|
px | number | 像素值,默认 300 |
Returns
Section titled “Returns”void
Inherited from
Section titled “Inherited from”setWordFadeWidth()
Section titled “setWordFadeWidth()”setWordFadeWidth(value?): void;Defined in: packages/core/src/lyric-player/dom/index.ts:95
设置文字动画的渐变宽度,单位以歌词行的主文字字体大小的倍数为单位,默认为 0.5,即一个全角字符的一半宽度
如果要模拟 Apple Music for Android 的效果,可以设置为 1
如果要模拟 Apple Music for iPad 的效果,可以设置为 0.5
如果想要近乎禁用渐变效果,可以设置成非常接近 0 的小数(例如 0.0001 ),但是不可以为 0
Parameters
Section titled “Parameters”| Parameter | Type | Default value | Description |
|---|---|---|---|
value | number | 0.5 | 需要设置的渐变宽度,单位以歌词行的主文字字体大小的倍数为单位,默认为 0.5 |
Returns
Section titled “Returns”void
Overrides
Section titled “Overrides”LyricPlayerBase.setWordFadeWidth
update()
Section titled “update()”update(delta?): void;Defined in: packages/core/src/lyric-player/dom/index.ts:162
更新动画,这个函数应该被逐帧调用或者在以下情况下调用一次:
- 刚刚调用完设置歌词函数的时候
Parameters
Section titled “Parameters”| Parameter | Type | Default value | Description |
|---|---|---|---|
delta | number | 0 | 距离上一次被调用到现在的时长,单位为毫秒(可为浮点数) |
Returns
Section titled “Returns”void