跳转到内容

DomLyricPlayer

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

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

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

new DomLyricPlayer(): DomLyricPlayer;

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

DomLyricPlayer

LyricPlayerBase.constructor

PropertyModifierTypeDefault valueDescriptionOverridesInherited fromDefined in
alignAnchorprotected"center" | "bottom" | "top""center"--LyricPlayerBase.alignAnchorpackages/core/src/lyric-player/base.ts:55
alignPositionprotectednumber0.35--LyricPlayerBase.alignPositionpackages/core/src/lyric-player/base.ts:56
allowScrollprotectedbooleantrue--LyricPlayerBase.allowScrollpackages/core/src/lyric-player/base.ts:59
bottomLineprotectedBottomLineElundefined--LyricPlayerBase.bottomLinepackages/core/src/lyric-player/base.ts:45
bufferedLinesprotectedSet<number>undefined--LyricPlayerBase.bufferedLinespackages/core/src/lyric-player/base.ts:38
currentLyricLineObjectspublicLyricLineEl[][]-LyricPlayerBase.currentLyricLineObjects-packages/core/src/lyric-player/dom/index.ts:40
currentLyricLinesprotectedLyricLine[][]--LyricPlayerBase.currentLyricLinespackages/core/src/lyric-player/base.ts:33
currentTimeprotectednumber0--LyricPlayerBase.currentTimepackages/core/src/lyric-player/base.ts:28
disableSpringprotectedbooleanfalse--LyricPlayerBase.disableSpringpackages/core/src/lyric-player/base.ts:42
elementprotectedHTMLElementundefined--LyricPlayerBase.elementpackages/core/src/lyric-player/base.ts:25
enableBlurprotectedbooleantrue--LyricPlayerBase.enableBlurpackages/core/src/lyric-player/base.ts:46
enableScaleprotectedbooleantrue--LyricPlayerBase.enableScalepackages/core/src/lyric-player/base.ts:47
hasDuetLineprotectedbooleanfalse--LyricPlayerBase.hasDuetLinepackages/core/src/lyric-player/base.ts:40
hidePassedLinesprotectedbooleanfalse--LyricPlayerBase.hidePassedLinespackages/core/src/lyric-player/base.ts:50
hotLinesprotectedSet<number>undefined--LyricPlayerBase.hotLinespackages/core/src/lyric-player/base.ts:37
initialLayoutFinishedprotectedbooleanfalse--LyricPlayerBase.initialLayoutFinishedpackages/core/src/lyric-player/base.ts:63
innerSizereadonly[number, number]undefined---packages/core/src/lyric-player/dom/index.ts:50
interludeDotsprotectedInterludeDotsundefined--LyricPlayerBase.interludeDotspackages/core/src/lyric-player/base.ts:44
interludeDotsSizeprotected[number, number]undefined--LyricPlayerBase.interludeDotsSizepackages/core/src/lyric-player/base.ts:43
isNonDynamicprotectedbooleanfalse--LyricPlayerBase.isNonDynamicpackages/core/src/lyric-player/base.ts:39
isPageVisibleprotectedbooleantrue--LyricPlayerBase.isPageVisiblepackages/core/src/lyric-player/base.ts:60
isPlayingprotectedbooleantrue--LyricPlayerBase.isPlayingpackages/core/src/lyric-player/base.ts:1008
isScrolledprotectedbooleanfalse--LyricPlayerBase.isScrolledpackages/core/src/lyric-player/base.ts:105
isSeekingprotectedbooleanfalse--LyricPlayerBase.isSeekingpackages/core/src/lyric-player/base.ts:53
isUserScrollingprotectedbooleanfalse标记用户是否正在进行滚动交互-LyricPlayerBase.isUserScrollingpackages/core/src/lyric-player/base.ts:68
lastCurrentTimeprotectednumber0--LyricPlayerBase.lastCurrentTimepackages/core/src/lyric-player/base.ts:54
lyricLineElementMappublicWeakMap<Element, LyricLineBase>undefinedInternal-LyricPlayerBase.lyricLineElementMappackages/core/src/lyric-player/base.ts:32
lyricLinesIndexesprotectedWeakMap<LyricLineBase, number>undefined--LyricPlayerBase.lyricLinesIndexespackages/core/src/lyric-player/base.ts:36
lyricLinesSizepublicWeakMap<LyricLineBase, [number, number]>undefinedInternal-LyricPlayerBase.lyricLinesSizepackages/core/src/lyric-player/base.ts:30
maskObsceneWordCharprotectedstring"*"--LyricPlayerBase.maskObsceneWordCharpackages/core/src/lyric-player/base.ts:49
maskObsceneWordsprotectedMaskObsceneWordsModeMaskObsceneWordsMode.Disabled--LyricPlayerBase.maskObsceneWordspackages/core/src/lyric-player/base.ts:48
optimizeOptionsprotectedOptimizeLyricOptions{}--LyricPlayerBase.optimizeOptionspackages/core/src/lyric-player/base.ts:61
overscanPxprotectednumber300视图额外预渲染(overscan)距离,单位:像素。 用于决定在视口之外多少距离内也认为是“可见”,以便提前创建/保留行元素。-LyricPlayerBase.overscanPxpackages/core/src/lyric-player/base.ts:75
posXSpringParamsprotectedPartial<SpringParams>undefined--LyricPlayerBase.posXSpringParamspackages/core/src/lyric-player/base.ts:77
posYSpringParamsprotectedPartial<SpringParams>undefined--LyricPlayerBase.posYSpringParamspackages/core/src/lyric-player/base.ts:82
processedLinesprotectedLyricLine[][]--LyricPlayerBase.processedLinespackages/core/src/lyric-player/base.ts:35
resizeObserverpublicResizeObserverundefinedInternal-LyricPlayerBase.resizeObserverpackages/core/src/lyric-player/base.ts:107
scaleForBGSpringParamsprotectedPartial<SpringParams>undefined--LyricPlayerBase.scaleForBGSpringParamspackages/core/src/lyric-player/base.ts:92
scaleSpringParamsprotectedPartial<SpringParams>undefined--LyricPlayerBase.scaleSpringParamspackages/core/src/lyric-player/base.ts:87
scrollBoundaryprotectednumber[]undefined--LyricPlayerBase.scrollBoundarypackages/core/src/lyric-player/base.ts:51
scrollOffsetprotectednumber0--LyricPlayerBase.scrollOffsetpackages/core/src/lyric-player/base.ts:57
scrollToIndexprotectednumber0--LyricPlayerBase.scrollToIndexpackages/core/src/lyric-player/base.ts:41
sizereadonly[number, number]undefined--LyricPlayerBase.sizepackages/core/src/lyric-player/base.ts:58
supportMaskImagereadonlybooleanundefined---packages/core/src/lyric-player/dom/index.ts:49
supportPlusLighterreadonlybooleanundefined---packages/core/src/lyric-player/dom/index.ts:48
targetAlignIndexprotectednumber0--LyricPlayerBase.targetAlignIndexpackages/core/src/lyric-player/base.ts:158
wheelTimeoutprotectednumber | undefinedundefined--LyricPlayerBase.wheelTimeoutpackages/core/src/lyric-player/base.ts:69
wordFadeWidthprotectednumber0.5--LyricPlayerBase.wordFadeWidthpackages/core/src/lyric-player/base.ts:157

get baseFontSize(): number;

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

number

LyricPlayerBase.baseFontSize

_getIsNonDynamic(): boolean;

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

Internal

是否为非逐词歌词

boolean


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.

MDN Reference

ParameterType
typestring
callbackEventListenerOrEventListenerObject | null
options?boolean | AddEventListenerOptions

void

LyricPlayerBase.addEventListener


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

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

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

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

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

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

  1. 歌词页面大小发生改变时(这个组件会自行处理)
  2. 加载了新的歌词时(不论前后歌词是否完全一样)
  3. 用户自行跳转了歌曲播放位置(不论距离远近)
ParameterTypeDefault valueDescription
syncbooleanfalse是否同步执行,通常用于初始化或 Resize 时立即布局
forcebooleanfalse是否绕过弹簧效果强制更新位置

Promise<void>

LyricPlayerBase.calcLayout


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.

MDN Reference

ParameterType
eventEvent

boolean

LyricPlayerBase.dispatchEvent


dispose(): void;

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

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

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

void

LyricPlayerBase.dispose


getBottomLineElement(): HTMLElement;

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

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

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

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

HTMLElement

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

LyricPlayerBase.getBottomLineElement


protected getCurrentInterlude(): [number, number, number, boolean] | undefined;

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

获取当前播放时间里是否处于间奏区间 如果是则会返回单位为毫秒的始末时间 否则返回 undefined

这个只允许内部调用

[number, number, number, boolean] | undefined

[开始时间,结束时间,大概处于的歌词行ID,下一句是否为对唱歌词] 或 undefined 如果不处于间奏区间

LyricPlayerBase.getCurrentInterlude


getCurrentTime(): number;

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

获取当前歌词的播放位置

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

number

当前播放位置

LyricPlayerBase.getCurrentTime


getElement(): HTMLElement;

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

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

HTMLElement

LyricPlayerBase.getElement


getEnableScale(): boolean;

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

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

boolean

是否启用歌词行缩放效果

LyricPlayerBase.getEnableScale


getEnableSpring(): boolean;

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

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

boolean

是否启用物理弹簧

LyricPlayerBase.getEnableSpring


getIsPlaying(): boolean;

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

获取当前是否在播放

boolean

当前是否在播放

LyricPlayerBase.getIsPlaying


getLyricLines(): LyricLine[];

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

获取当前歌词数组

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

LyricLine[]

当前歌词数组

LyricPlayerBase.getLyricLines


getOverscanPx(): number;

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

获取当前 overscan 像素距离

number

LyricPlayerBase.getOverscanPx


getWordFadeWidth(): number;

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

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

number

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

LyricPlayerBase.getWordFadeWidth


onResize(): void;

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

void

LyricPlayerBase.onResize


pause(): void;

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

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

void

LyricPlayerBase.pause


processObsceneWord(word): string;

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

Internal

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

ParameterTypeDescription
wordLyricWord单词对象

string

LyricPlayerBase.processObsceneWord


rebuildLyricLines(): void;

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

void

LyricPlayerBase.rebuildLyricLines


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.

MDN Reference

ParameterType
typestring
callbackEventListenerOrEventListenerObject | null
options?boolean | EventListenerOptions

void

LyricPlayerBase.removeEventListener


resetScroll(): void;

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

重置用户滚动状态

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

void

LyricPlayerBase.resetScroll


resume(): void;

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

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

void

LyricPlayerBase.resume


setAlignAnchor(alignAnchor): void;

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

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

  • 设置成 top 的话将会向目标歌词行的顶部对齐
  • 设置成 bottom 的话将会向目标歌词行的底部对齐
  • 设置成 center 的话将会向目标歌词行的垂直中心对齐
ParameterTypeDescription
alignAnchor"center" | "bottom" | "top"歌词行对齐方式,详情见函数说明

void

LyricPlayerBase.setAlignAnchor


setAlignPosition(alignPosition): void;

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

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

ParameterTypeDescription
alignPositionnumber一个 [0.0-1.0] 之间的任意数字,代表组件高度由上到下的比例位置

void

LyricPlayerBase.setAlignPosition


setCurrentTime(time, isSeek?): void;

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

设置当前播放进度,单位为毫秒且必须是整数,此时将会更新内部的歌词进度信息 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词,所以这个的调用频率越快越准确越好

调用完成后,可以每帧调用 update 函数来执行歌词动画效果

ParameterTypeDefault valueDescription
timenumberundefined当前播放进度,单位为毫秒
isSeekbooleanfalse-

void

LyricPlayerBase.setCurrentTime


setEnableBlur(enable): void;

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

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

ParameterTypeDescription
enableboolean是否启用

void

LyricPlayerBase.setEnableBlur


setEnableScale(enable?): void;

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

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

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

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

ParameterTypeDefault valueDescription
enablebooleantrue是否启用歌词行缩放效果

void

LyricPlayerBase.setEnableScale


setEnableSpring(enable?): void;

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

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

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

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

ParameterTypeDefault value
enablebooleantrue

void

LyricPlayerBase.setEnableSpring


setHidePassedLines(hide): void;

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

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

ParameterTypeDescription
hideboolean是否隐藏已经播放过的歌词行,默认不隐藏

void

LyricPlayerBase.setHidePassedLines


setIsSeeking(isSeeking): void;

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

ParameterType
isSeekingboolean

void

LyricPlayerBase.setIsSeeking


setLinePosXSpringParams(_params?): void;

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

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

ParameterType
_paramsPartial<SpringParams>

void

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

LyricPlayerBase.setLinePosXSpringParams


setLinePosYSpringParams(params?): void;

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

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

ParameterTypeDescription
paramsPartial<SpringParams>需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样

void

LyricPlayerBase.setLinePosYSpringParams


setLineScaleSpringParams(params?): void;

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

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

ParameterTypeDescription
paramsPartial<SpringParams>需要设置的弹簧属性,提供的属性将会覆盖原来的属性,未提供的属性将会保持原样

void

LyricPlayerBase.setLineScaleSpringParams


setLyricLines(lines, initialTime?): void;

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

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

ParameterTypeDefault valueDescription
linesLyricLine[]undefined歌词数组
initialTimenumber0初始时间,默认为 0

void

LyricPlayerBase.setLyricLines


setMaskObsceneWordChar(char): void;

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

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

ParameterTypeDescription
charstring单个字符,用于替换不雅用语中的字符

void

LyricPlayerBase.setMaskObsceneWordChar


setMaskObsceneWords(mode): void;

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

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

ParameterTypeDescription
modeMaskObsceneWordsMode掩码模式

void

MaskObsceneWordsMode

LyricPlayerBase.setMaskObsceneWords


setOptimizeOptions(options): void;

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

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

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

ParameterTypeDescription
optionsOptimizeLyricOptions优化配置选项

void

OptimizeLyricOptions

LyricPlayerBase.setOptimizeOptions


setOverscanPx(px): void;

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

设置 overscan(视图上下额外缓冲渲染区)距离,单位:像素。

ParameterTypeDescription
pxnumber像素值,默认 300

void

LyricPlayerBase.setOverscanPx


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

ParameterTypeDefault valueDescription
valuenumber0.5需要设置的渐变宽度,单位以歌词行的主文字字体大小的倍数为单位,默认为 0.5

void

LyricPlayerBase.setWordFadeWidth


update(delta?): void;

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

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

  1. 刚刚调用完设置歌词函数的时候
ParameterTypeDefault valueDescription
deltanumber0距离上一次被调用到现在的时长,单位为毫秒(可为浮点数)

void

LyricPlayerBase.update