DomLyricPlayer

This content is not available in your language yet.

Defined in: packages/core/src/lyric-player/dom/index.ts:60

歌词播放组件，本框架的核心组件

尽可能贴切 Apple Music for iPad 的歌词效果设计，且做了力所能及的优化措施

Extends

LyricPlayerBase

Constructors

Constructor

new DomLyricPlayer(): DomLyricPlayer;

Defined in: packages/core/src/lyric-player/dom/index.ts:117

Returns

DomLyricPlayer

Overrides

LyricPlayerBase.constructor

Properties

Property	Modifier	Type	Default value	Description	Overrides	Inherited from	Defined in
`alwaysPostpositionBackground`	`protected`	`boolean`	`false`	是否强制让背景人声行始终后置（即始终在主歌词下方显示，不前置背景人声）	-	`LyricPlayerBase`.`alwaysPostpositionBackground`	packages/core/src/lyric-player/base/index.ts:101
`bottomLine`	`protected`	`BottomLineEl`	`undefined`	-	-	`LyricPlayerBase`.`bottomLine`	packages/core/src/lyric-player/base/index.ts:80
`currentLyricGroups`	`public`	`LyricLineGroup`[]	`[]`	-	`LyricPlayerBase`.`currentLyricGroups`	-	packages/core/src/lyric-player/dom/index.ts:62
`currentLyricLines`	`protected`	`LyricLine`[]	`[]`	-	-	`LyricPlayerBase`.`currentLyricLines`	packages/core/src/lyric-player/base/index.ts:65
`disableSpring`	`protected`	`boolean`	`false`	-	-	`LyricPlayerBase`.`disableSpring`	packages/core/src/lyric-player/base/index.ts:70
`element`	`protected`	`HTMLElement`	`undefined`	-	-	`LyricPlayerBase`.`element`	packages/core/src/lyric-player/base/index.ts:49
`enableBlur`	`protected`	`boolean`	`true`	-	-	`LyricPlayerBase`.`enableBlur`	packages/core/src/lyric-player/base/index.ts:81
`enableScale`	`protected`	`boolean`	`true`	-	-	`LyricPlayerBase`.`enableScale`	packages/core/src/lyric-player/base/index.ts:82
`hasDuetLine`	`protected`	`boolean`	`false`	-	-	`LyricPlayerBase`.`hasDuetLine`	packages/core/src/lyric-player/base/index.ts:69
`hidePassedLines`	`protected`	`boolean`	`false`	-	-	`LyricPlayerBase`.`hidePassedLines`	packages/core/src/lyric-player/base/index.ts:86
`innerSize`	`readonly`	[`number`, `number`]	`undefined`	-	-	-	packages/core/src/lyric-player/dom/index.ts:75
`interludeDots`	`protected`	`InterludeDots`	`undefined`	-	-	`LyricPlayerBase`.`interludeDots`	packages/core/src/lyric-player/base/index.ts:79
`isNonDynamic`	`protected`	`boolean`	`false`	-	-	`LyricPlayerBase`.`isNonDynamic`	packages/core/src/lyric-player/base/index.ts:68
`isPageVisible`	`protected`	`boolean`	`true`	-	-	`LyricPlayerBase`.`isPageVisible`	packages/core/src/lyric-player/base/index.ts:97
`layoutState`	`protected`	`PlayerLayoutState`	`undefined`	-	-	`LyricPlayerBase`.`layoutState`	packages/core/src/lyric-player/base/index.ts:71
`lyricGroupElementMap`	`public`	`WeakMap`<`Element`, `LyricLineGroupBase`<`LyricLineBase`>>	`undefined`	`Internal`	-	`LyricPlayerBase`.`lyricGroupElementMap`	packages/core/src/lyric-player/base/index.ts:64
`lyricGroupSize`	`public`	`WeakMap`<`LyricLineGroupBase`<`LyricLineBase`>, [`number`, `number`]>	`undefined`	-	-	`LyricPlayerBase`.`lyricGroupSize`	packages/core/src/lyric-player/base/index.ts:95
`lyricLinesIndexes`	`protected`	`WeakMap`<`LyricLineBase`, `number`>	`undefined`	-	-	`LyricPlayerBase`.`lyricLinesIndexes`	packages/core/src/lyric-player/base/index.ts:67
`maskObsceneWordChar`	`protected`	`string`	`"*"`	-	-	`LyricPlayerBase`.`maskObsceneWordChar`	packages/core/src/lyric-player/base/index.ts:85
`maskObsceneWords`	`protected`	`MaskObsceneWordsMode`	`MaskObsceneWordsMode.Disabled`	-	-	`LyricPlayerBase`.`maskObsceneWords`	packages/core/src/lyric-player/base/index.ts:83
`optimizeOptions`	`protected`	`OptimizeLyricOptions`	`{}`	-	-	`LyricPlayerBase`.`optimizeOptions`	packages/core/src/lyric-player/base/index.ts:98
`posXSpringParams`	`protected`	`Partial`<`SpringParams`>	`undefined`	-	-	`LyricPlayerBase`.`posXSpringParams`	packages/core/src/lyric-player/base/index.ts:103
`posYSpringParams`	`protected`	`Partial`<`SpringParams`>	`undefined`	-	-	`LyricPlayerBase`.`posYSpringParams`	packages/core/src/lyric-player/base/index.ts:108
`processedLines`	`protected`	`LyricLine`[]	`[]`	-	-	`LyricPlayerBase`.`processedLines`	packages/core/src/lyric-player/base/index.ts:66
`resizeObserver`	`public`	`ResizeObserver`	`undefined`	`Internal`	-	`LyricPlayerBase`.`resizeObserver`	packages/core/src/lyric-player/base/index.ts:132
`scaleForBGSpringParams`	`protected`	`Partial`<`SpringParams`>	`undefined`	-	-	`LyricPlayerBase`.`scaleForBGSpringParams`	packages/core/src/lyric-player/base/index.ts:118
`scaleSpringParams`	`protected`	`Partial`<`SpringParams`>	`undefined`	-	-	`LyricPlayerBase`.`scaleSpringParams`	packages/core/src/lyric-player/base/index.ts:113
`scrollState`	`protected`	`PlayerScrollState`	`undefined`	-	-	`LyricPlayerBase`.`scrollState`	packages/core/src/lyric-player/base/index.ts:87
`size`	`readonly`	[`number`, `number`]	`undefined`	-	-	`LyricPlayerBase`.`size`	packages/core/src/lyric-player/base/index.ts:96
`supportMaskImage`	`readonly`	`boolean`	`undefined`	-	-	-	packages/core/src/lyric-player/dom/index.ts:74
`supportPlusLighter`	`readonly`	`boolean`	`undefined`	-	-	-	packages/core/src/lyric-player/dom/index.ts:70
`timelineState`	`protected`	`PlayerTimelineState`	`undefined`	播放时间线状态	-	`LyricPlayerBase`.`timelineState`	packages/core/src/lyric-player/base/index.ts:53
`wordFadeWidth`	`protected`	`number`	`0.5`	-	-	`LyricPlayerBase`.`wordFadeWidth`	packages/core/src/lyric-player/base/index.ts:183

Accessors

baseFontSize

Get Signature

get baseFontSize(): number;

Defined in: packages/core/src/lyric-player/dom/index.ts:114

Returns

number

Overrides

LyricPlayerBase.baseFontSize

Methods

_getIsNonDynamic()

_getIsNonDynamic(): boolean;

Defined in: packages/core/src/lyric-player/dom/index.ts:108

Internal

是否为非逐词歌词

Returns

boolean

addEventListener()

addEventListener(
   type,
   callback,
   options?): void;

Defined in: node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/lib/lib.dom.d.ts:14380

The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

MDN Reference

Parameters

Parameter	Type
`type`	`string`
`callback`	`EventListenerOrEventListenerObject` \| `null`
`options?`	`boolean` \| `AddEventListenerOptions`

Returns

void

Inherited from

LyricPlayerBase.addEventListener

calcLayout()

calcLayout(sync?, force?): Promise<void>;

Defined in: packages/core/src/lyric-player/base/index.ts:538

重新布局定位歌词行的位置，调用完成后再逐帧调用 update 函数即可让歌词通过动画移动到目标位置。

函数有一个 force 参数，用于指定是否强制修改布局，也就是不经过动画直接调整元素位置和大小。

此函数还有一个 reflow 参数，用于指定是否需要重新计算布局

因为计算布局必定会导致浏览器重排布局，所以会大幅度影响流畅度和性能，故请只在以下情况下将其设置为 true：

歌词页面大小发生改变时（这个组件会自行处理）
加载了新的歌词时（不论前后歌词是否完全一样）
用户自行跳转了歌曲播放位置（不论距离远近）

Parameters

Parameter	Type	Default value	Description
`sync`	`boolean`	`false`	是否同步执行，通常用于初始化或 Resize 时立即布局
`force`	`boolean`	`false`	是否绕过弹簧效果强制更新位置

Returns

Promise<void>

Inherited from

LyricPlayerBase.calcLayout

dispatchEvent()

dispatchEvent(event): boolean;

Defined in: node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/lib/lib.dom.d.ts:14386

The dispatchEvent() method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent().

MDN Reference

Parameters

Parameter	Type
`event`	`Event`

Returns

boolean

Inherited from

LyricPlayerBase.dispatchEvent

dispose()

dispose(): void;

Defined in: packages/core/src/lyric-player/dom/index.ts:233

销毁实现了该接口的对象实例，释放占用的资源

一般情况下，调用本函数后就不可以再调用对象的任何函数了

Returns

void

Overrides

LyricPlayerBase.dispose

getAlwaysPostpositionBackground()

getAlwaysPostpositionBackground(): boolean;

Defined in: packages/core/src/lyric-player/base/index.ts:839

获取当前是否设置了让背景人声行始终后置显示

Returns

boolean

Inherited from

LyricPlayerBase.getAlwaysPostpositionBackground

getBottomLineElement()

getBottomLineElement(): HTMLElement;

Defined in: packages/core/src/lyric-player/base/index.ts:789

获取一个特殊的底栏元素，默认是空白的，可以往内部添加任意元素

这个元素始终在歌词的底部，可以用于显示歌曲创作者等信息

但是请勿删除该元素，只能在内部存放元素

Returns

HTMLElement

一个元素，可以往内部添加任意元素

Inherited from

LyricPlayerBase.getBottomLineElement

getCurrentTime()

getCurrentTime(): number;

Defined in: packages/core/src/lyric-player/base/index.ts:816

获取当前歌词的播放位置

一般和最后调用 setCurrentTime 给予的参数一样

Returns

number

当前播放位置

Inherited from

LyricPlayerBase.getCurrentTime

getElement()

getElement(): HTMLElement;

Defined in: packages/core/src/lyric-player/base/index.ts:843

获取这个类所对应的 HTML 元素实例

Returns

HTMLElement

Inherited from

LyricPlayerBase.getElement

getEnableScale()

getEnableScale(): boolean;

Defined in: packages/core/src/lyric-player/base/index.ts:253

获取当前是否启用了歌词行缩放效果

Returns

boolean

是否启用歌词行缩放效果

Inherited from

LyricPlayerBase.getEnableScale

getEnableSpring()

getEnableSpring(): boolean;

Defined in: packages/core/src/lyric-player/base/index.ts:407

获取当前是否启用了物理弹簧

Returns

boolean

是否启用物理弹簧

Inherited from

LyricPlayerBase.getEnableSpring

getIsPlaying()

getIsPlaying(): boolean;

Defined in: packages/core/src/lyric-player/base/index.ts:468

获取当前是否在播放

Returns

boolean

当前是否在播放

Inherited from

LyricPlayerBase.getIsPlaying

getLyricLines()

getLyricLines(): LyricLine[];

Defined in: packages/core/src/lyric-player/base/index.ts:807

获取当前歌词数组

一般和最后调用 setLyricLines 给予的参数一样

Returns

LyricLine[]

当前歌词数组

Inherited from

LyricPlayerBase.getLyricLines

getOverscanPx()

getOverscanPx(): number;

Defined in: packages/core/src/lyric-player/base/index.ts:384

获取当前 overscan 像素距离

Returns

number

Inherited from

LyricPlayerBase.getOverscanPx

getWordFadeWidth()

getWordFadeWidth(): number;

Defined in: packages/core/src/lyric-player/base/index.ts:261

获取当前文字动画的渐变宽度，单位以歌词行的主文字字体大小的倍数为单位

Returns

number

当前文字动画的渐变宽度，单位以歌词行的主文字字体大小的倍数为单位

Inherited from

LyricPlayerBase.getWordFadeWidth

onResize()

onResize(): void;

Defined in: packages/core/src/lyric-player/dom/index.ts:64

Returns

void

Overrides

LyricPlayerBase.onResize

pause()

pause(): void;

Defined in: packages/core/src/lyric-player/dom/index.ts:197

暂停部分效果演出，目前会暂停播放间奏点的动画，且将背景歌词显示出来

Returns

void

Overrides

LyricPlayerBase.pause

processObsceneWord()

processObsceneWord(word): string;

Defined in: packages/core/src/lyric-player/base/index.ts:322

Internal

根据当前配置处理不雅用语单词

Parameters

Parameter	Type	Description
`word`	`LyricWord`	单词对象

Returns

string

Inherited from

LyricPlayerBase.processObsceneWord

rebuildLyricLines()

rebuildLyricLines(): void;

Defined in: packages/core/src/lyric-player/base/index.ts:312

Returns

void

Inherited from

LyricPlayerBase.rebuildLyricLines

removeEventListener()

removeEventListener(
   type,
   callback,
   options?): void;

Defined in: node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/lib/lib.dom.d.ts:14392

The removeEventListener() method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal.

MDN Reference

Parameters

Parameter	Type
`type`	`string`
`callback`	`EventListenerOrEventListenerObject` \| `null`
`options?`	`boolean` \| `EventListenerOptions`

Returns

void

Inherited from

LyricPlayerBase.removeEventListener

resetScroll()

resetScroll(): void;

Defined in: packages/core/src/lyric-player/base/index.ts:797

重置用户滚动状态

请在用户完成滚动点击跳转歌词时调用本事件再调用 calcLayout 以正确滚动到目标位置

Returns

void

Inherited from

LyricPlayerBase.resetScroll

resume()

resume(): void;

Defined in: packages/core/src/lyric-player/dom/index.ts:207

恢复部分效果演出，目前会恢复播放间奏点的动画

Returns

void

Overrides

LyricPlayerBase.resume

setAlignAnchor()

setAlignAnchor(alignAnchor): void;

Defined in: packages/core/src/lyric-player/base/index.ts:365

设置目标歌词行的对齐方式，默认为 center

设置成 top 的话将会向目标歌词行的顶部对齐
设置成 bottom 的话将会向目标歌词行的底部对齐
设置成 center 的话将会向目标歌词行的垂直中心对齐

Parameters

Parameter	Type	Description
`alignAnchor`	`LayoutAlignAnchor`	歌词行对齐方式，详情见函数说明

Returns

void

Inherited from

LyricPlayerBase.setAlignAnchor

setAlignPosition()

setAlignPosition(alignPosition): void;

Defined in: packages/core/src/lyric-player/base/index.ts:372

设置默认的歌词行对齐位置，相对于整个歌词播放组件的大小位置，默认为 0.5

Parameters

Parameter	Type	Description
`alignPosition`	`number`	一个 `[0.0-1.0]` 之间的任意数字，代表组件高度由上到下的比例位置

Returns

void

Inherited from

LyricPlayerBase.setAlignPosition

setAlwaysPostpositionBackground()

setAlwaysPostpositionBackground(enable): void;

Defined in: packages/core/src/lyric-player/base/index.ts:827

设置是否让背景人声行始终后置显示

默认情况下，如果背景歌词开始时间早于主歌词，会在主歌词上方展示；如果设置为 true，则无论时间顺序如何，背景歌词都会始终在主歌词下方展示

Parameters

Parameter	Type	Description
`enable`	`boolean`	是否启用始终后置

Returns

void

Inherited from

LyricPlayerBase.setAlwaysPostpositionBackground

setCurrentTime()

setCurrentTime(time, isSeek?): void;

Defined in: packages/core/src/lyric-player/base/index.ts:480

设置当前播放进度，此时将会更新内部的歌词进度信息。

内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词，所以这个的调用频率越快越准确越好。调用完成后，应每帧调用 update 方法来执行歌词动画效果。此函数本身不会触发动画效果。

Parameters

Parameter	Type	Default value	Description
`time`	`number`	`undefined`	当前播放进度，单位为毫秒
`isSeek`	`boolean`	`false`	-

Returns

void

Inherited from

LyricPlayerBase.setCurrentTime

setEnableBlur()

setEnableBlur(enable): void;

Defined in: packages/core/src/lyric-player/base/index.ts:280

设置是否启用歌词行的模糊效果

Parameters

Parameter	Type	Description
`enable`	`boolean`	是否启用

Returns

void

Inherited from

LyricPlayerBase.setEnableBlur

setEnableScale()

setEnableScale(enable?): void;

Defined in: packages/core/src/lyric-player/base/index.ts:245

是否启用歌词行缩放效果，默认启用

如果启用，非选中的歌词行会轻微缩小以凸显当前播放歌词行效果

此效果对性能影响微乎其微，推荐启用

Parameters

Parameter	Type	Default value	Description
`enable`	`boolean`	`true`	是否启用歌词行缩放效果

Returns

void

Inherited from

LyricPlayerBase.setEnableScale

setEnableSpring()

setEnableSpring(enable?): void;

Defined in: packages/core/src/lyric-player/base/index.ts:394

设置是否使用物理弹簧算法实现歌词动画效果，默认启用

如果启用，则会通过弹簧算法实时处理歌词位置，但是需要性能足够强劲的电脑方可流畅运行

如果不启用，则会回退到基于 transition 的过渡效果，对低性能的机器比较友好，但是效果会比较单一

Parameters

Parameter	Type	Default value
`enable`	`boolean`	`true`

Returns

void

Inherited from

LyricPlayerBase.setEnableSpring

setHidePassedLines()

setHidePassedLines(hide): void;

Defined in: packages/core/src/lyric-player/base/index.ts:272

设置是否隐藏已经播放过的歌词行，默认不隐藏

Parameters

Parameter	Type	Description
`hide`	`boolean`	是否隐藏已经播放过的歌词行，默认不隐藏

Returns

void

Inherited from

LyricPlayerBase.setHidePassedLines

setIsSeeking()

setIsSeeking(isSeeking): void;

Defined in: packages/core/src/lyric-player/base/index.ts:265

Parameters

Parameter	Type
`isSeeking`	`boolean`

Returns

void

Inherited from

LyricPlayerBase.setIsSeeking

setLinePosXSpringParams()

setLinePosXSpringParams(_params?): void;

Defined in: packages/core/src/lyric-player/base/index.ts:707

设置所有歌词行在横坐标上的弹簧属性，包括重量、弹力和阻力。

Parameters

Parameter	Type
`_params`	`Partial`<`SpringParams`>

Returns

void

Deprecated

考虑到横向弹簧效果并不常见，所以这个函数将会在未来的版本中移除

Inherited from

LyricPlayerBase.setLinePosXSpringParams

setLinePosYSpringParams()

setLinePosYSpringParams(params?): void;

Defined in: packages/core/src/lyric-player/base/index.ts:713

设置所有歌词行在纵坐标上的弹簧属性，包括重量、弹力和阻力。

Parameters

Parameter	Type	Description
`params`	`Partial`<`SpringParams`>	需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样

Returns

void

Inherited from

LyricPlayerBase.setLinePosYSpringParams

setLineScaleSpringParams()

setLineScaleSpringParams(params?): void;

Defined in: packages/core/src/lyric-player/base/index.ts:729

设置所有歌词行在缩放大小上的弹簧属性，包括重量、弹力和阻力。

Parameters

Parameter	Type	Description
`params`	`Partial`<`SpringParams`>	需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样

Returns

void

Inherited from

LyricPlayerBase.setLineScaleSpringParams

setLyricLines()

setLyricLines(lines, initialTime?): void;

Defined in: packages/core/src/lyric-player/dom/index.ts:156

设置当前播放歌词，要注意传入后这个数组内的信息不得修改，否则会发生错误

Parameters

Parameter	Type	Default value	Description
`lines`	`LyricLine`[]	`undefined`	歌词数组
`initialTime`	`number`	`0`	初始时间，默认为 0

Returns

void

Overrides

LyricPlayerBase.setLyricLines

setMaskObsceneWordChar()

setMaskObsceneWordChar(char): void;

Defined in: packages/core/src/lyric-player/base/index.ts:302

设置不雅用语掩码使用的字符，默认为 *

Parameters

Parameter	Type	Description
`char`	`string`	单个字符，用于替换不雅用语中的字符

Returns

void

Inherited from

LyricPlayerBase.setMaskObsceneWordChar

setMaskObsceneWords()

setMaskObsceneWords(mode): void;

Defined in: packages/core/src/lyric-player/base/index.ts:291

设置歌词中不雅用语的掩码模式

Parameters

Parameter	Type	Description
`mode`	`MaskObsceneWordsMode`	掩码模式

Returns

void

See

MaskObsceneWordsMode

Inherited from

LyricPlayerBase.setMaskObsceneWords

setOptimizeOptions()

setOptimizeOptions(options): void;

Defined in: packages/core/src/lyric-player/base/index.ts:418

设置歌词的优化配置项，这些配置项默认全部开启

注意，如果在 setLyricLines 之后修改此配置，需要重新调用 setLyricLines() 才能对当前歌词生效

Parameters

Parameter	Type	Description
`options`	`OptimizeLyricOptions`	优化配置选项

Returns

void

See

OptimizeLyricOptions

Inherited from

LyricPlayerBase.setOptimizeOptions

setOverscanPx()

setOverscanPx(px): void;

Defined in: packages/core/src/lyric-player/base/index.ts:380

设置 overscan（视图上下额外缓冲渲染区）距离，单位：像素。

Parameters

Parameter	Type	Description
`px`	`number`	像素值，默认 300

Returns

void

Inherited from

LyricPlayerBase.setOverscanPx

setWordFadeWidth()

setWordFadeWidth(value?): void;

Defined in: packages/core/src/lyric-player/dom/index.ts:143

设置文字动画的渐变宽度，单位以歌词行的主文字字体大小的倍数为单位，默认为 0.5，即一个全角字符的一半宽度

如果要模拟 Apple Music for Android 的效果，可以设置为 1

如果要模拟 Apple Music for iPad 的效果，可以设置为 0.5

如果想要近乎禁用渐变效果，可以设置成非常接近 0 的小数（例如 0.0001 ），但是不可以为 0

Parameters

Parameter	Type	Default value	Description
`value`	`number`	`0.5`	需要设置的渐变宽度，单位以歌词行的主文字字体大小的倍数为单位，默认为 0.5

Returns

void

Overrides

LyricPlayerBase.setWordFadeWidth

update()

update(delta?): void;

Defined in: packages/core/src/lyric-player/dom/index.ts:217

更新动画，这个函数应该被逐帧调用或者在以下情况下调用一次：

刚刚调用完设置歌词函数的时候

Parameters

Parameter	Type	Default value	Description
`delta`	`number`	`0`	距离上一次被调用到现在的时长，单位为毫秒（可为浮点数）

Returns

void