@applemusic-like-lyrics/core 0.5.0 → 0.5.1

package/dist/amll-core.cjs

@@ -1731,6 +1731,10 @@ var BackgroundRender = class BackgroundRender {
 //#region src/styles/lyric-player.module.css
 var lyric_player_module_default = {
 	"active": "FmKaba_active",
+	"bgWrapper": "FmKaba_bgWrapper",
+	"bgWrapperActive": "FmKaba_bgWrapperActive",
+	"bgWrapperHidden": "FmKaba_bgWrapperHidden",
+	"bgWrapperTop": "FmKaba_bgWrapperTop",
 	"bottomLine": "FmKaba_bottomLine",
 	"dirty": "FmKaba_dirty",
 	"disableSpring": "FmKaba_disableSpring",
@@ -1743,8 +1747,10 @@ var lyric_player_module_default = {
 	"lyricBgLine": "FmKaba_lyricBgLine",
 	"lyricDuetLine": "FmKaba_lyricDuetLine",
 	"lyricLine": "FmKaba_lyricLine",
+	"lyricLineWrapper": "FmKaba_lyricLineWrapper",
 	"lyricMainLine": "FmKaba_lyricMainLine",
 	"lyricSubLine": "FmKaba_lyricSubLine",
+	"playing": "FmKaba_playing",
 	"romanWord": "FmKaba_romanWord",
 	"rubyWord": "FmKaba_rubyWord",
 	"tmpDisableTransition": "FmKaba_tmpDisableTransition",
@@ -1845,27 +1851,31 @@ function cleanUnintentionalOverlaps(lines) {
 * 尝试让歌词提前最多 600ms 开始，如果有重叠则尝试最多提前 400ms 或上一行时长的 30%
 */
 function tryAdvanceStartTime(lines) {
-	for (let i = lines.length - 1; i >= 0; i--) {
+	const defaultAdvanceAmount = 600;
+	const fallbackAdvanceAmount = 400;
+	const fallbackAdvanceRatio = .3;
+	let prevLineStartTime = 0;
+	let prevLineEndTime = 0;
+	let prevMainGroupStartTime = 0;
+	let prevMainGroupEndTime = 0;
+	let hasPrevLine = false;
+	for (let i = 0; i < lines.length; i++) {
 		const line = lines[i];
 		if (line.isBG) continue;
-		let prevLine = null;
-		if (i > 0) {
-			let prevIdx = i - 1;
-			if (lines[prevIdx].isBG) prevIdx--;
-			if (prevIdx >= 0) prevLine = lines[prevIdx];
-		}
+		const originalStartTime = line.startTime;
+		const originalEndTime = line.endTime;
 		let targetAdvanceAmount = 0;
 		let safeBoundary = 0;
-		if (prevLine) if (line.startTime >= prevLine.endTime) {
-			targetAdvanceAmount = 600;
-			safeBoundary = prevLine.endTime;
+		if (hasPrevLine) if (originalStartTime >= prevLineEndTime) {
+			targetAdvanceAmount = defaultAdvanceAmount;
+			safeBoundary = prevMainGroupEndTime;
 		} else {
-			targetAdvanceAmount = 400;
-			const prevDuration = prevLine.endTime - prevLine.startTime;
-			safeBoundary = prevLine.startTime + prevDuration * .3;
+			targetAdvanceAmount = fallbackAdvanceAmount;
+			const prevDuration = prevLineEndTime - prevLineStartTime;
+			safeBoundary = prevLineStartTime + prevDuration * fallbackAdvanceRatio;
 		}
 		else {
-			targetAdvanceAmount = 600;
+			targetAdvanceAmount = defaultAdvanceAmount;
 			safeBoundary = 0;
 		}
 		const targetTime = line.startTime - targetAdvanceAmount;
@@ -1873,6 +1883,20 @@ function tryAdvanceStartTime(lines) {
 		if (newStartTime < line.startTime) line.startTime = newStartTime;
 		const nextLine = lines[i + 1];
 		if (nextLine?.isBG) nextLine.startTime = line.startTime;
+		if (hasPrevLine) if (originalStartTime < prevMainGroupEndTime && originalEndTime > prevMainGroupStartTime) {
+			prevMainGroupStartTime = Math.min(prevMainGroupStartTime, originalStartTime);
+			prevMainGroupEndTime = Math.max(prevMainGroupEndTime, originalEndTime);
+		} else {
+			prevMainGroupStartTime = originalStartTime;
+			prevMainGroupEndTime = originalEndTime;
+		}
+		else {
+			prevMainGroupStartTime = originalStartTime;
+			prevMainGroupEndTime = originalEndTime;
+		}
+		prevLineStartTime = originalStartTime;
+		prevLineEndTime = originalEndTime;
+		hasPrevLine = true;
 	}
 }
 /**
@@ -2272,19 +2296,19 @@ const LayoutAlignAnchor = {
 function computeCurrentInterlude(input) {
 	const currentTime = input.currentTime + 20;
 	const currentIndex = input.scrollToIndex;
-	const lines = input.processedLines;
+	const groups = input.currentGroups;
 	const checkGap = (k) => {
-		if (k < -1 || k >= lines.length - 1) return void 0;
-		const prevLine = k === -1 ? null : lines[k];
-		const nextLine = lines[k + 1];
-		const gapStart = prevLine ? prevLine.endTime : 0;
-		const gapEnd = Math.max(gapStart, nextLine.startTime - 250);
-		if (gapEnd - gapStart < 4e3) return;
+		if (k < -1 || k >= groups.length - 1) return void 0;
+		const prevGroup = k === -1 ? null : groups[k];
+		const nextGroup = groups[k + 1];
+		const gapStart = prevGroup ? prevGroup.endTime : 0;
+		const gapEnd = Math.max(gapStart, nextGroup.startTime - 250);
+		if (gapEnd - gapStart < 4e3) return void 0;
 		if (gapEnd > currentTime && gapStart < currentTime) return {
 			startTime: Math.max(gapStart, currentTime),
 			endTime: gapEnd,
 			anchorLineIndex: k,
-			isNextDuet: nextLine.isDuet
+			isNextDuet: nextGroup.mainLine.getLine().isDuet
 		};
 	};
 	return checkGap(currentIndex - 1) || checkGap(currentIndex) || checkGap(currentIndex + 1);
@@ -2297,8 +2321,8 @@ function computeCurrentInterlude(input) {
 * - 普通播放时根据相邻歌词的时间间隔动态调整 stiffness / damping
 */
 function computeLinePosYSpringParams(input) {
-	const { enabled, processedLines, scrollToIndex, isSeeking, isInterludeActive } = input;
-	if (!enabled || processedLines.length === 0) return { shouldUpdate: false };
+	const { enabled, currentGroups, scrollToIndex, isSeeking, isInterludeActive } = input;
+	if (!enabled || currentGroups.length === 0) return { shouldUpdate: false };
 	if (isSeeking || isInterludeActive) return {
 		shouldUpdate: true,
 		params: {
@@ -2306,10 +2330,10 @@ function computeLinePosYSpringParams(input) {
 			damping: 15
 		}
 	};
-	const currentLine = processedLines[scrollToIndex];
-	const prevLine = processedLines[scrollToIndex - 1];
-	if (!currentLine || !prevLine) return { shouldUpdate: false };
-	const interval = currentLine.startTime - (prevLine.words[0]?.startTime ?? prevLine.startTime);
+	const currentGroup = currentGroups[scrollToIndex];
+	const prevGroup = currentGroups[scrollToIndex - 1];
+	if (!currentGroup || !prevGroup) return { shouldUpdate: false };
+	const interval = currentGroup.startTime - prevGroup.startTime;
 	const MIN_INTERVAL = 100;
 	const MAX_INTERVAL = 800;
 	const clampedInterval = clamp(interval, MIN_INTERVAL, MAX_INTERVAL);
@@ -2327,38 +2351,33 @@ function computeLinePosYSpringParams(input) {
 	};
 }
 /**
-* 计算单行歌词在当前布局中的视觉呈现参数。
+* 计算一组歌词在当前布局中的视觉呈现参数。
 *
 * 根据播放状态、缓冲状态、布局模式与间奏信息，
-* 生成一行歌词最终应使用的 opacity、scale、blur 和 render mode。
+* 生成一组歌词最终应使用的活跃状态、不透明度与模糊值。
 */
-function computeLinePresentation(input) {
-	const { line, lineIndex, scrollToIndex, latestIndex, hasBuffered, hidePassedLines, isPlaying, isNonDynamic, enableScale, enableBlur, isUserScrolling, isCompact, interlude } = input;
-	const isActive = hasBuffered || lineIndex >= scrollToIndex && lineIndex < latestIndex;
+function computeGroupPresentation(input) {
+	const { groupIndex, scrollToIndex, latestIndex, hasBuffered, hidePassedLines, isPlaying, isNonDynamic, enableBlur, isUserScrolling, isCompact, interlude } = input;
+	const isActive = hasBuffered || groupIndex >= scrollToIndex && groupIndex < latestIndex;
 	const blurLevel = computeLineBlur({
 		enableBlur,
 		isUserScrolling,
 		isActive,
-		itemIndex: lineIndex,
+		itemIndex: groupIndex,
 		scrollToIndex,
 		latestIndex,
 		isCompact
 	});
 	let targetOpacity;
-	if (hidePassedLines) if (lineIndex < (interlude ? interlude.anchorLineIndex + 1 : scrollToIndex) && isPlaying) targetOpacity = 1e-4;
+	if (hidePassedLines) if (groupIndex < (interlude ? interlude.anchorLineIndex + 1 : scrollToIndex) && isPlaying) targetOpacity = 1e-4;
 	else if (hasBuffered) targetOpacity = .85;
 	else targetOpacity = isNonDynamic ? .2 : 1;
 	else if (hasBuffered) targetOpacity = .85;
 	else targetOpacity = isNonDynamic ? .2 : 1;
-	const SCALE_ASPECT = enableScale ? 97 : 100;
-	let targetScale = 100;
-	if (!isActive && isPlaying) targetScale = line.isBG ? 75 : SCALE_ASPECT;
 	return {
 		isActive,
 		targetOpacity,
-		targetScale,
-		blurLevel,
-		renderMode: isActive ? LyricLineRenderMode.GRADIENT : LyricLineRenderMode.SOLID
+		blurLevel
 	};
 }
 /**
@@ -2514,50 +2533,29 @@ const eqSet = (xs, ys) => xs.size === ys.size && [...xs].every((x) => ys.has(x))
 * - 根据新的热行状态和已有的缓冲行状态，计算出应移除的缓冲行 ID
 */
 function computePlayerTimeState(input) {
-	const { time, processedLines, timelineState: { hotLines, bufferedLines } } = input;
-	const nextHotLines = new Set(hotLines);
+	const { time, currentGroups, timelineState: { hotGroups, bufferedGroups } } = input;
+	const nextHotGroups = new Set(hotGroups);
 	const addedIds = /* @__PURE__ */ new Set();
 	const removedHotIds = /* @__PURE__ */ new Set();
 	const removedBufferedIds = /* @__PURE__ */ new Set();
-	for (const lastHotId of hotLines) {
-		const line = processedLines[lastHotId];
-		if (!line) {
-			nextHotLines.delete(lastHotId);
-			removedHotIds.add(lastHotId);
-			continue;
-		}
-		if (line.isBG) continue;
-		const nextLine = processedLines[lastHotId + 1];
-		if (nextLine?.isBG) {
-			const nextMainLine = processedLines[lastHotId + 2];
-			const startTime = Math.min(line.startTime, nextLine.startTime);
-			const endTime = Math.min(Math.max(line.endTime, nextMainLine?.startTime ?? Number.MAX_VALUE), Math.max(line.endTime, nextLine.endTime));
-			if (time < startTime || endTime <= time) {
-				nextHotLines.delete(lastHotId);
-				removedHotIds.add(lastHotId);
-				nextHotLines.delete(lastHotId + 1);
-				removedHotIds.add(lastHotId + 1);
-			}
-		} else if (time < line.startTime || line.endTime <= time) {
-			nextHotLines.delete(lastHotId);
+	for (const lastHotId of hotGroups) {
+		const group = currentGroups[lastHotId];
+		if (!group || time < group.startTime || group.endTime <= time) {
+			nextHotGroups.delete(lastHotId);
 			removedHotIds.add(lastHotId);
 		}
 	}
-	for (let id = 0; id < processedLines.length; id++) {
-		const line = processedLines[id];
-		if (!line || line.isBG) continue;
-		if (line.startTime <= time && line.endTime > time && !nextHotLines.has(id)) {
-			nextHotLines.add(id);
+	for (let id = 0; id < currentGroups.length; id++) {
+		const group = currentGroups[id];
+		if (!group) continue;
+		if (group.startTime <= time && group.endTime > time && !nextHotGroups.has(id)) {
+			nextHotGroups.add(id);
 			addedIds.add(id);
-			if (processedLines[id + 1]?.isBG) {
-				nextHotLines.add(id + 1);
-				addedIds.add(id + 1);
-			}
 		}
 	}
-	for (const id of bufferedLines) if (!nextHotLines.has(id)) removedBufferedIds.add(id);
+	for (const id of bufferedGroups) if (!nextHotGroups.has(id)) removedBufferedIds.add(id);
 	return {
-		nextHotLines,
+		nextHotGroups,
 		addedIds,
 		removedHotIds,
 		removedBufferedIds
@@ -2569,10 +2567,10 @@ function computePlayerTimeState(input) {
 * 若当前仍存在缓冲行，则优先对齐到最靠前的缓冲行；
 * 否则对齐到第一条开始时间不小于当前时间的歌词行。
 */
-function pickScrollToIndexForSeek(time, processedLines, bufferedLines) {
-	if (bufferedLines.size > 0) return Math.min(...bufferedLines);
-	const foundIndex = processedLines.findIndex((line) => line.startTime >= time);
-	return foundIndex === -1 ? processedLines.length : foundIndex;
+function pickScrollToIndexForSeek(time, currentGroups, bufferedGroups) {
+	if (bufferedGroups.size > 0) return Math.min(...bufferedGroups);
+	const foundIndex = currentGroups.findIndex((group) => group.startTime >= time);
+	return foundIndex === -1 ? currentGroups.length : foundIndex;
 }
 /**
 * 提交时间线状态转移的纯函数。
@@ -2582,45 +2580,45 @@ function pickScrollToIndexForSeek(time, processedLines, bufferedLines) {
 * 是否需要重置用户滚动状态、是否需要触发布局。
 */
 function commitPlayerTimeState(input) {
-	const { timelineState, time, processedLines, hasBottomContent, stateResult } = input;
+	const { timelineState, time, currentGroups, hasBottomContent, stateResult } = input;
 	const { addedIds, removedHotIds, removedBufferedIds } = stateResult;
 	const { isSeeking } = timelineState;
 	timelineState.currentTime = time;
-	timelineState.hotLines = stateResult.nextHotLines;
+	timelineState.hotGroups = stateResult.nextHotGroups;
 	let shouldLayout = false;
 	let shouldResetScroll = false;
-	const linesToEnable = [];
-	const linesToDisable = /* @__PURE__ */ new Set();
+	const groupsToEnable = [];
+	const groupsToDisable = /* @__PURE__ */ new Set();
 	if (isSeeking) {
-		timelineState.bufferedLines = new Set([...timelineState.hotLines]);
-		timelineState.scrollToIndex = pickScrollToIndexForSeek(time, processedLines, timelineState.bufferedLines);
-		for (const id of removedHotIds) linesToDisable.add(id);
-		for (const id of timelineState.hotLines) linesToEnable.push(id);
-		for (const id of removedBufferedIds) linesToDisable.add(id);
+		timelineState.bufferedGroups = new Set([...timelineState.hotGroups]);
+		timelineState.scrollToIndex = pickScrollToIndexForSeek(time, currentGroups, timelineState.bufferedGroups);
+		for (const id of removedHotIds) groupsToDisable.add(id);
+		for (const id of timelineState.hotGroups) groupsToEnable.push(id);
+		for (const id of removedBufferedIds) groupsToDisable.add(id);
 		shouldResetScroll = true;
 		shouldLayout = true;
 	} else if (addedIds.size > 0) {
 		for (const id of addedIds) {
-			timelineState.bufferedLines.add(id);
-			linesToEnable.push(id);
+			timelineState.bufferedGroups.add(id);
+			groupsToEnable.push(id);
 		}
 		for (const id of removedBufferedIds) {
-			timelineState.bufferedLines.delete(id);
-			linesToDisable.add(id);
+			timelineState.bufferedGroups.delete(id);
+			groupsToDisable.add(id);
 		}
-		if (timelineState.bufferedLines.size > 0) timelineState.scrollToIndex = Math.min(...timelineState.bufferedLines);
+		if (timelineState.bufferedGroups.size > 0) timelineState.scrollToIndex = Math.min(...timelineState.bufferedGroups);
 		shouldLayout = true;
-	} else if (removedBufferedIds.size > 0 && eqSet(removedBufferedIds, timelineState.bufferedLines)) {
-		for (const id of timelineState.bufferedLines) {
-			if (timelineState.hotLines.has(id)) continue;
-			timelineState.bufferedLines.delete(id);
-			linesToDisable.add(id);
+	} else if (removedBufferedIds.size > 0 && eqSet(removedBufferedIds, timelineState.bufferedGroups)) {
+		for (const id of timelineState.bufferedGroups) {
+			if (timelineState.hotGroups.has(id)) continue;
+			timelineState.bufferedGroups.delete(id);
+			groupsToDisable.add(id);
 		}
 		shouldLayout = true;
 	}
-	if (timelineState.bufferedLines.size === 0 && processedLines.length > 0) {
-		if (time >= processedLines[processedLines.length - 1].endTime) {
-			const targetIndex = hasBottomContent ? processedLines.length : processedLines.length - 1;
+	if (timelineState.bufferedGroups.size === 0 && currentGroups.length > 0) {
+		if (time >= currentGroups[currentGroups.length - 1].endTime) {
+			const targetIndex = hasBottomContent ? currentGroups.length : currentGroups.length - 1;
 			if (timelineState.scrollToIndex !== targetIndex) {
 				timelineState.scrollToIndex = targetIndex;
 				shouldLayout = true;
@@ -2631,8 +2629,8 @@ function commitPlayerTimeState(input) {
 	return {
 		shouldLayout,
 		shouldResetScroll,
-		linesToEnable,
-		linesToDisable: [...linesToDisable]
+		groupsToEnable,
+		groupsToDisable: [...groupsToDisable]
 	};
 }
 //#endregion
@@ -2647,17 +2645,15 @@ var LyricPlayerBase = class extends EventTarget {
 	timelineState = {
 		currentTime: 0,
 		lastCurrentTime: 0,
-		hotLines: /* @__PURE__ */ new Set(),
-		bufferedLines: /* @__PURE__ */ new Set(),
+		hotGroups: /* @__PURE__ */ new Set(),
+		bufferedGroups: /* @__PURE__ */ new Set(),
 		scrollToIndex: 0,
 		isSeeking: false,
 		isPlaying: true,
 		initialLayoutFinished: false
 	};
 	/** @internal */
-	lyricLinesSize = /* @__PURE__ */ new WeakMap();
-	/** @internal */
-	lyricLineElementMap = /* @__PURE__ */ new WeakMap();
+	lyricGroupElementMap = /* @__PURE__ */ new WeakMap();
 	currentLyricLines = [];
 	processedLines = [];
 	lyricLinesIndexes = /* @__PURE__ */ new WeakMap();
@@ -2689,10 +2685,13 @@ var LyricPlayerBase = class extends EventTarget {
 		isScrolled: false,
 		isUserScrolling: false
 	};
-	currentLyricLineObjects = [];
+	currentLyricGroups = [];
+	lyricGroupSize = /* @__PURE__ */ new WeakMap();
 	size = [0, 0];
 	isPageVisible = true;
 	optimizeOptions = {};
+	/** 是否强制让背景人声行始终后置（即始终在主歌词下方显示，不前置背景人声） */
+	alwaysPostpositionBackground = false;
 	posXSpringParams = {
 		mass: 1,
 		damping: 10,
@@ -2742,13 +2741,13 @@ var LyricPlayerBase = class extends EventTarget {
 				shouldRelayout = true;
 			}
 		} else {
-			const lineObj = this.lyricLineElementMap.get(entry.target);
-			if (lineObj) {
+			const groupObj = this.lyricGroupElementMap.get(entry.target);
+			if (groupObj) {
 				const newSize = [entry.target.clientWidth, entry.target.clientHeight];
-				const oldSize = this.lyricLinesSize.get(lineObj) ?? [0, 0];
+				const oldSize = this.lyricGroupSize.get(groupObj) ?? [0, 0];
 				if (newSize[0] !== oldSize[0] || newSize[1] !== oldSize[1]) {
-					this.lyricLinesSize.set(lineObj, newSize);
-					lineObj.onLineSizeChange(newSize);
+					this.lyricGroupSize.set(groupObj, newSize);
+					groupObj.onLineSizeChange(newSize);
 					shouldRelayout = true;
 				}
 			}
@@ -2874,7 +2873,7 @@ var LyricPlayerBase = class extends EventTarget {
 		}
 	}
 	rebuildLyricLines() {
-		for (const lineObj of this.currentLyricLineObjects) lineObj.rebuildElement();
+		for (const group of this.currentLyricGroups) group.rebuildAllLines();
 	}
 	/**
 	* 根据当前配置处理不雅用语单词
@@ -2976,11 +2975,11 @@ var LyricPlayerBase = class extends EventTarget {
 			break;
 		}
 		this.hasDuetLine = this.processedLines.some((line) => line.isDuet);
-		for (const line of this.currentLyricLineObjects) line.dispose();
+		for (const group of this.currentLyricGroups) group.dispose();
+		this.currentLyricGroups = [];
 		this.interludeDots.setInterlude(void 0);
-		this.timelineState.hotLines.clear();
-		this.timelineState.bufferedLines.clear();
-		this.setCurrentTime(0, true);
+		this.timelineState.hotGroups.clear();
+		this.timelineState.bufferedGroups.clear();
 		if (process.env.NODE_ENV !== "production") console.log("歌词处理完成", this);
 	}
 	/**
@@ -3006,19 +3005,19 @@ var LyricPlayerBase = class extends EventTarget {
 		if (!timelineState.initialLayoutFinished && !timelineState.isSeeking) return;
 		const stateResult = computePlayerTimeState({
 			time,
-			processedLines: this.processedLines,
+			currentGroups: this.currentLyricGroups,
 			timelineState
 		});
 		const hasBottomContent = this.bottomLine.getElement().innerHTML.trim().length > 0;
 		const commitResult = commitPlayerTimeState({
 			timelineState,
 			time,
-			processedLines: this.processedLines,
+			currentGroups: this.currentLyricGroups,
 			hasBottomContent,
 			stateResult
 		});
-		for (const id of commitResult.linesToDisable) this.currentLyricLineObjects[id]?.disable();
-		for (const id of commitResult.linesToEnable) this.currentLyricLineObjects[id]?.enable();
+		for (const id of commitResult.groupsToDisable) this.currentLyricGroups[id]?.disable();
+		for (const id of commitResult.groupsToEnable) this.currentLyricGroups[id]?.enable();
 		if (commitResult.shouldResetScroll) this.resetScroll();
 		if (commitResult.shouldLayout) this.calcLayout();
 	}
@@ -3043,14 +3042,14 @@ var LyricPlayerBase = class extends EventTarget {
 		const interlude = computeCurrentInterlude({
 			currentTime: this.timelineState.currentTime,
 			scrollToIndex: this.timelineState.scrollToIndex,
-			processedLines: this.processedLines
+			currentGroups: this.currentLyricGroups
 		});
 		const isInterludeActive = !!interlude;
 		if (this.layoutState.targetAlignIndex !== this.timelineState.scrollToIndex || this.layoutState.lastInterludeState !== isInterludeActive) {
 			this.layoutState.lastInterludeState = isInterludeActive;
 			const springParams = computeLinePosYSpringParams({
 				enabled: this.getEnableSpring(),
-				processedLines: this.processedLines,
+				currentGroups: this.currentLyricGroups,
 				scrollToIndex: this.timelineState.scrollToIndex,
 				isSeeking: this.timelineState.isSeeking,
 				isInterludeActive
@@ -3068,17 +3067,15 @@ var LyricPlayerBase = class extends EventTarget {
 			if (interlude.anchorLineIndex !== -1) curPos -= totalInterludeHeight;
 		}
 		const LINE_HEIGHT_FALLBACK = this.size[1] / 5;
-		const scrollOffset = this.currentLyricLineObjects.slice(0, targetAlignIndex).reduce((acc, el) => acc + (el.getLine().isBG && this.timelineState.isPlaying ? 0 : this.lyricLinesSize.get(el)?.[1] ?? LINE_HEIGHT_FALLBACK), 0);
+		const scrollOffset = this.currentLyricGroups.slice(0, targetAlignIndex).reduce((acc, group) => acc + (this.lyricGroupSize.get(group)?.[1] ?? LINE_HEIGHT_FALLBACK), 0);
 		this.scrollState.scrollBoundary.minOffset = -scrollOffset;
 		curPos -= scrollOffset;
 		curPos += this.size[1] * this.layoutState.alignPosition;
-		const curLine = this.currentLyricLineObjects[targetAlignIndex];
+		const curGroup = this.currentLyricGroups[targetAlignIndex];
 		this.layoutState.targetAlignIndex = targetAlignIndex;
-		const isBottomFocused = targetAlignIndex === this.currentLyricLineObjects.length;
+		const isBottomFocused = targetAlignIndex === this.currentLyricGroups.length;
 		this.bottomLine.setFocused(isBottomFocused);
-		let targetLineHeight = 0;
-		if (curLine) targetLineHeight = this.lyricLinesSize.get(curLine)?.[1] ?? LINE_HEIGHT_FALLBACK;
-		else if (isBottomFocused) targetLineHeight = this.bottomLine.lineSize[1];
+		const targetLineHeight = curGroup ? this.lyricGroupSize.get(curGroup)?.[1] ?? LINE_HEIGHT_FALLBACK : isBottomFocused ? this.bottomLine.lineSize[1] : 0;
 		if (targetLineHeight > 0) switch (this.layoutState.alignAnchor) {
 			case LayoutAlignAnchor.Bottom:
 				curPos -= targetLineHeight;
@@ -3088,13 +3085,12 @@ var LyricPlayerBase = class extends EventTarget {
 				break;
 			case LayoutAlignAnchor.Top: break;
 		}
-		const latestIndex = Math.max(...this.timelineState.bufferedLines);
+		const latestIndex = Math.max(...this.timelineState.bufferedGroups);
 		let delay = 0;
 		let baseDelay = sync ? 0 : .05;
 		let setDots = false;
-		this.currentLyricLineObjects.forEach((lineObj, i) => {
-			const hasBuffered = this.timelineState.bufferedLines.has(i);
-			const line = lineObj.getLine();
+		this.currentLyricGroups.forEach((group, i) => {
+			const hasBuffered = this.timelineState.bufferedGroups.has(i);
 			const shouldShowDots = interlude && i === interlude.anchorLineIndex + 1;
 			if (!setDots && shouldShowDots) {
 				setDots = true;
@@ -3106,31 +3102,28 @@ var LyricPlayerBase = class extends EventTarget {
 				curPos += this.layoutState.interludeDotsSize[1];
 				curPos += dotMargin;
 			}
-			const presentation = computeLinePresentation({
-				line,
-				lineIndex: i,
+			const presentation = computeGroupPresentation({
+				groupIndex: i,
 				scrollToIndex: this.timelineState.scrollToIndex,
 				latestIndex,
 				hasBuffered,
 				hidePassedLines: this.hidePassedLines,
 				isPlaying: this.timelineState.isPlaying,
 				isNonDynamic: this.isNonDynamic,
-				enableScale: this.enableScale,
 				enableBlur: this.enableBlur,
 				isUserScrolling: this.scrollState.isUserScrolling,
 				isCompact: window.innerWidth <= 1024,
 				interlude
 			});
-			lineObj.setTransform(curPos, presentation.targetScale, presentation.targetOpacity, presentation.blurLevel, force, delay, presentation.renderMode);
-			if (line.isBG && (presentation.isActive || !this.timelineState.isPlaying)) curPos += this.lyricLinesSize.get(lineObj)?.[1] ?? LINE_HEIGHT_FALLBACK;
-			else if (!line.isBG) curPos += this.lyricLinesSize.get(lineObj)?.[1] ?? LINE_HEIGHT_FALLBACK;
+			group.setTransform(curPos, force, delay, presentation.isActive, presentation.targetOpacity, presentation.blurLevel);
+			curPos += this.lyricGroupSize.get(group)?.[1] ?? LINE_HEIGHT_FALLBACK;
 			if (curPos >= 0 && !this.timelineState.isSeeking) {
-				if (!line.isBG) delay += baseDelay;
+				delay += baseDelay;
 				if (i >= this.timelineState.scrollToIndex) baseDelay /= 1.05;
 			}
 		});
 		this.scrollState.scrollBoundary.maxOffset = curPos + this.scrollState.scrollOffset - this.size[1] / 2;
-		const bottomIndex = this.currentLyricLineObjects.length;
+		const bottomIndex = this.currentLyricGroups.length;
 		const finalBottomBlur = computeLineBlur({
 			enableBlur: this.enableBlur,
 			isUserScrolling: this.scrollState.isUserScrolling,
@@ -3160,7 +3153,10 @@ var LyricPlayerBase = class extends EventTarget {
 			...params
 		};
 		this.bottomLine.lineTransforms.posY.updateParams(this.posYSpringParams);
-		for (const line of this.currentLyricLineObjects) line.lineTransforms.posY.updateParams(this.posYSpringParams);
+		for (const group of this.currentLyricGroups) {
+			group.posY.updateParams(this.posYSpringParams);
+			group.bgSlideY.updateParams(this.posYSpringParams);
+		}
 	}
 	/**
 	* 设置所有歌词行在​缩放大小上的弹簧属性，包括重量、弹力和阻力。
@@ -3176,8 +3172,10 @@ var LyricPlayerBase = class extends EventTarget {
 			...this.scaleForBGSpringParams,
 			...params
 		};
-		for (const lineObj of this.currentLyricLineObjects) if (lineObj.getLine().isBG) lineObj.lineTransforms.scale.updateParams(this.scaleForBGSpringParams);
-		else lineObj.lineTransforms.scale.updateParams(this.scaleSpringParams);
+		for (const group of this.currentLyricGroups) {
+			group.mainLine.lineTransforms.scale.updateParams(this.scaleSpringParams);
+			group.bgLine?.lineTransforms.scale.updateParams(this.scaleForBGSpringParams);
+		}
 	}
 	/**
 	* 暂停部分效果演出，目前会暂停播放间奏点的动画，且将背景歌词显示出来
@@ -3249,6 +3247,23 @@ var LyricPlayerBase = class extends EventTarget {
 	getCurrentTime() {
 		return this.timelineState.currentTime;
 	}
+	/**
+	* 设置是否让背景人声行始终后置显示
+	*
+	* 默认情况下，如果背景歌词开始时间早于主歌词，会在主歌词上方展示；
+	* 如果设置为 `true`，则无论时间顺序如何，背景歌词都会始终在主歌词下方展示
+	* @param enable 是否启用始终后置
+	*/
+	setAlwaysPostpositionBackground(enable) {
+		if (this.alwaysPostpositionBackground === enable) return;
+		this.alwaysPostpositionBackground = enable;
+		this.rebuildLyricLines();
+		this.calcLayout();
+	}
+	/** 获取当前是否设置了让背景人声行始终后置显示 */
+	getAlwaysPostpositionBackground() {
+		return this.alwaysPostpositionBackground;
+	}
 	getElement() {
 		return this.element;
 	}
@@ -3259,6 +3274,191 @@ var LyricPlayerBase = class extends EventTarget {
 	}
 };
 //#endregion
+//#region src/lyric-player/base/group.ts
+var LyricLineGroupBase = class {
+	posY = new Spring(0);
+	bgSlideY = new Spring(-80);
+	top = 0;
+	delay = 0;
+	isActive = false;
+	opacity = 1;
+	blur = 0;
+	isBgFirst = false;
+	constructor(mainLine, bgLine) {
+		this.mainLine = mainLine;
+		this.bgLine = bgLine;
+	}
+	get startTime() {
+		return this.mainLine.getLine().startTime;
+	}
+	get endTime() {
+		return this.mainLine.getLine().endTime;
+	}
+	onLineSizeChange(size) {
+		this.mainLine.onLineSizeChange(size);
+		this.bgLine?.onLineSizeChange(size);
+	}
+	setTransform(top, force, delay, isActive, opacity, blur) {
+		this.top = top;
+		this.delay = delay;
+		this.isActive = isActive;
+		this.opacity = opacity;
+		this.blur = blur;
+		this.setLineTransformations(force, delay);
+		const enableSpring = this.lyricPlayer.getEnableSpring();
+		const hiddenSlideY = (this.lyricPlayer.getAlwaysPostpositionBackground() ? false : this.isBgFirst) ? 80 : -80;
+		const isPlaying = this.lyricPlayer.getIsPlaying();
+		const targetBgSlideY = isActive || !isPlaying ? 0 : hiddenSlideY;
+		if (force || !enableSpring) {
+			this.posY.setPosition(top);
+			this.bgSlideY.setPosition(targetBgSlideY);
+			this.renderStyles();
+		} else {
+			this.posY.setTargetPosition(top, delay);
+			this.bgSlideY.setTargetPosition(targetBgSlideY, delay);
+		}
+	}
+	setLineTransformations(force, delay) {
+		const enableScale = this.lyricPlayer.getEnableScale();
+		const isPlaying = this.lyricPlayer.getIsPlaying();
+		const renderMode = this.isActive ? LyricLineRenderMode.GRADIENT : LyricLineRenderMode.SOLID;
+		const SCALE_ASPECT = enableScale ? 97 : 100;
+		let mainScale = 100;
+		if (!this.isActive && isPlaying) mainScale = SCALE_ASPECT;
+		this.mainLine.setTransform(mainScale, 1, 0, force, delay, renderMode);
+		let bgScale = 100;
+		if (!this.isActive && isPlaying) bgScale = 75;
+		this.bgLine?.setTransform(bgScale, 1, 0, force, delay, renderMode);
+	}
+	update(delta) {
+		if (this.lyricPlayer.getEnableSpring()) {
+			this.posY.update(delta);
+			this.bgSlideY.update(delta);
+			this.renderStyles();
+		}
+		this.mainLine.update(delta);
+		this.bgLine?.update(delta);
+	}
+	rebuildAllLines() {
+		this.mainLine.rebuildElement();
+		this.bgLine?.rebuildElement();
+	}
+	enable(time, shouldPlay) {
+		this.mainLine.enable(time, shouldPlay);
+		this.bgLine?.enable(time, shouldPlay);
+	}
+	disable() {
+		this.mainLine.disable();
+		this.bgLine?.disable();
+	}
+	dispose() {
+		this.mainLine.dispose();
+		this.bgLine?.dispose();
+	}
+};
+//#endregion
+//#region src/lyric-player/dom/lyric-group.ts
+var LyricLineGroup = class extends LyricLineGroupBase {
+	element;
+	bgWrapper;
+	lastIsActive;
+	constructor(lyricPlayer, mainLine) {
+		super(mainLine);
+		this.lyricPlayer = lyricPlayer;
+		this.element = document.createElement("div");
+		this.element.className = lyric_player_module_default.lyricLineWrapper;
+		this.element.appendChild(mainLine.getElement());
+		this.posY.setPosition(window.innerHeight * 2);
+		lyricPlayer.resizeObserver.observe(this.element);
+	}
+	get isInSight() {
+		const t = this.posY.getCurrentPosition();
+		let h = this.lyricPlayer.lyricGroupSize?.get(this)?.[1];
+		if (h === void 0 || h === 0) h = this.element.clientHeight || 0;
+		const pb = this.lyricPlayer.size[1];
+		const ov = this.lyricPlayer.getOverscanPx();
+		return !(t > pb + h + ov || t < -h - ov);
+	}
+	show() {
+		if (!this.element.parentElement) {
+			const playerEl = this.lyricPlayer.getElement();
+			const groups = this.lyricPlayer.currentLyricGroups;
+			const myIndex = groups.indexOf(this);
+			let referenceNode = null;
+			if (myIndex !== -1) {
+				for (let i = myIndex + 1; i < groups.length; i++) if (groups[i].element.parentElement === playerEl) {
+					referenceNode = groups[i].element;
+					break;
+				}
+			}
+			playerEl.insertBefore(this.element, referenceNode);
+			this.lyricPlayer.resizeObserver.observe(this.element);
+		}
+		this.mainLine.show();
+		this.bgLine?.show();
+	}
+	hide() {
+		if (this.element.parentElement) {
+			this.lyricPlayer.resizeObserver.unobserve(this.element);
+			this.element.remove();
+			this.mainLine.teardownContent();
+			this.bgLine?.teardownContent();
+		}
+	}
+	update(delta) {
+		if (this.isInSight) this.show();
+		else this.hide();
+		super.update(delta);
+	}
+	addBgLine(bgLine) {
+		if (this.bgLine) this.bgLine.dispose();
+		if (this.bgWrapper) this.bgWrapper.remove();
+		this.bgLine = bgLine;
+		const bgStartTime = bgLine.getLine().words[0]?.startTime ?? bgLine.getLine().startTime;
+		const mainStartTime = this.mainLine.getLine().words[0]?.startTime ?? this.mainLine.getLine().startTime;
+		this.isBgFirst = bgStartTime < mainStartTime;
+		if (this.mainLine.getLine().isDuet) bgLine.getElement().classList.add(lyric_player_module_default.lyricDuetLine);
+		this.bgWrapper = document.createElement("div");
+		this.bgWrapper.className = lyric_player_module_default.bgWrapper;
+		this.bgWrapper.appendChild(bgLine.getElement());
+		if (!this.lyricPlayer.getAlwaysPostpositionBackground() && this.isBgFirst) {
+			this.bgWrapper.classList.add(lyric_player_module_default.bgWrapperTop);
+			this.element.insertBefore(this.bgWrapper, this.mainLine.getElement());
+			this.bgSlideY.setPosition(80);
+		} else this.element.appendChild(this.bgWrapper);
+	}
+	renderStyles() {
+		const y = this.posY.getCurrentPosition().toFixed(1);
+		this.element.style.transform = `translateY(${y}px)`;
+		this.element.style.opacity = this.opacity.toString();
+		this.element.style.filter = `blur(${Math.min(5, this.blur)}px)`;
+		if (!this.lyricPlayer.getEnableSpring()) this.element.style.transitionDelay = `${this.delay}ms`;
+		if (this.bgWrapper) {
+			if (this.lastIsActive !== this.isActive) {
+				this.lastIsActive = this.isActive;
+				this.bgWrapper.classList.toggle(lyric_player_module_default.bgWrapperActive, this.isActive);
+			}
+			const slideY = this.bgSlideY.getCurrentPosition();
+			const slideYStr = slideY.toFixed(1);
+			const activeProgress = clamp01(1 - Math.abs(slideY) / 80);
+			const scaleStr = (.8 + activeProgress * .2).toFixed(3);
+			this.bgWrapper.style.transform = `translateY(${slideYStr}%) scale(${scaleStr})`;
+			const shouldBgFirst = !this.lyricPlayer.getAlwaysPostpositionBackground() && this.isBgFirst;
+			if (shouldBgFirst) {
+				const currentMarginTop = -(this.bgWrapper.clientHeight || 0) * (1 - activeProgress);
+				this.bgWrapper.style.marginTop = `${currentMarginTop.toFixed(1)}px`;
+			} else this.bgWrapper.style.marginTop = "";
+			const isHidden = slideYStr === (shouldBgFirst ? "80.0" : "-80.0") && !this.isActive;
+			this.bgWrapper.classList.toggle(lyric_player_module_default.bgWrapperHidden, isHidden);
+		}
+	}
+	dispose() {
+		super.dispose();
+		this.lyricPlayer.resizeObserver.unobserve(this.element);
+		this.element.remove();
+	}
+};
+//#endregion
 //#region src/utils/is-cjk.ts
 const isCJK = (char) => {
 	return /^[\p{Unified_Ideograph}\u0800-\u9FFC]+$/u.test(char);
@@ -3275,10 +3475,7 @@ var LyricLineBase = class extends EventTarget {
 	blur = 0;
 	opacity = 1;
 	delay = 0;
-	lineTransforms = {
-		posY: new Spring(0),
-		scale: new Spring(100)
-	};
+	lineTransforms = { scale: new Spring(100) };
 	/**
 	* 用于 CJK 词语边界检测的分词器
 	*/
@@ -3288,9 +3485,7 @@ var LyricLineBase = class extends EventTarget {
 	* 用于正确处理 emoji、复合字符等
 	*/
 	static graphemeSegmenter = typeof Intl !== "undefined" && Intl.Segmenter ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
-	onLineSizeChange(_size) {}
-	setTransform(top = this.top, scale = this.scale, opacity = this.opacity, blur = this.blur, _force = false, delay = 0, _mode = LyricLineRenderMode.SOLID) {
-		this.top = top;
+	setTransform(scale = this.scale, opacity = this.opacity, blur = this.blur, _force = false, delay = 0, _mode = LyricLineRenderMode.SOLID) {
 		this.scale = scale;
 		this.opacity = opacity;
 		this.blur = blur;
@@ -3768,12 +3963,9 @@ var LyricLineEl = class extends LyricLineBase {
 		super();
 		this.lyricPlayer = lyricPlayer;
 		this.lyricLine = lyricLine;
-		this._prevParentEl = lyricPlayer.getElement();
-		lyricPlayer.resizeObserver.observe(this.element);
 		this.element.setAttribute("class", lyric_player_module_default.lyricLine);
 		if (this.lyricLine.isBG) this.element.classList.add(lyric_player_module_default.lyricBgLine);
 		if (this.lyricLine.isDuet) this.element.classList.add(lyric_player_module_default.lyricDuetLine);
-		this.lineTransforms.posY.setPosition(window.innerHeight * 2);
 		this.element.appendChild(document.createElement("div"));
 		this.element.appendChild(document.createElement("div"));
 		this.element.appendChild(document.createElement("div"));
@@ -3905,34 +4097,18 @@ var LyricLineEl = class extends LyricLineBase {
 	getLine() {
 		return this.lyricLine;
 	}
-	_prevParentEl;
 	lastStyle = "";
 	show() {
-		if (!this.element.parentElement) {
-			this._prevParentEl.appendChild(this.element);
-			this.lyricPlayer.resizeObserver.observe(this.element);
-		}
 		if (!this.built) {
 			this.rebuildElement();
 			this.built = true;
 			this.updateMaskImageSync();
 		}
-		this.rebuildStyle();
-	}
-	hide() {
-		if (this.element.parentElement) {
-			this._prevParentEl.removeChild(this.element);
-			this.lyricPlayer.resizeObserver.unobserve(this.element);
-		}
-		if (this.built) {
-			this.disposeElements();
-			this.built = false;
-		}
 	}
 	rebuildStyle() {
 		let style = "";
-		style += `transform:translateY(${this.lineTransforms.posY.getCurrentPosition().toFixed(1)}px) scale(${(this.lineTransforms.scale.getCurrentPosition() / 100).toFixed(4)});`;
-		if (!this.lyricPlayer.getEnableSpring() && this.isInSight) style += `transition-delay:${this.delay}ms;`;
+		style += `transform: scale(${(this.lineTransforms.scale.getCurrentPosition() / 100).toFixed(4)});`;
+		if (!this.lyricPlayer.getEnableSpring()) style += `transition-delay:${this.delay}ms;`;
 		style += `filter:blur(${Math.min(5, this.blur)}px);`;
 		if (style !== this.lastStyle) {
 			this.lastStyle = style;
@@ -4375,25 +4551,19 @@ var LyricLineEl = class extends LyricLineBase {
 		this.element.style.setProperty("--bright-mask-alpha", this.currentBrightAlpha.toFixed(3));
 		this.element.style.setProperty("--dark-mask-alpha", this.currentDarkAlpha.toFixed(3));
 	}
-	setTransform(top = this.top, scale = this.scale, opacity = 1, blur = 0, force = false, delay = 0, mode = LyricLineRenderMode.SOLID) {
-		super.setTransform(top, scale, opacity, blur, force, delay);
+	setTransform(scale = this.scale, opacity = 1, blur = 0, force = false, delay = 0, mode = LyricLineRenderMode.SOLID) {
+		super.setTransform(scale, opacity, blur, force, delay);
 		this.renderMode = mode;
-		const beforeInSight = this.isInSight;
 		const enableSpring = this.lyricPlayer.getEnableSpring();
-		this.top = top;
+		this.top = 0;
 		this.scale = scale;
 		this.delay = delay * 1e3 | 0;
 		const main = this.element.children[0];
 		main.style.opacity = `${opacity}`;
 		if (force || !enableSpring) {
 			this.blur = Math.min(32, blur);
-			this.lineTransforms.posY.setPosition(top);
 			this.lineTransforms.scale.setPosition(scale);
-			if (!enableSpring) {
-				const afterInSight = this.isInSight;
-				if (beforeInSight || afterInSight) this.show();
-				else this.hide();
-			} else this.rebuildStyle();
+			this.rebuildStyle();
 			const currentScale = this.lineTransforms.scale.getCurrentPosition();
 			this.updateMaskAlphaTargets(currentScale / 100);
 			this.currentBrightAlpha = this.targetBrightAlpha;
@@ -4401,21 +4571,18 @@ var LyricLineEl = class extends LyricLineBase {
 			this.element.style.setProperty("--bright-mask-alpha", String(this.currentBrightAlpha));
 			this.element.style.setProperty("--dark-mask-alpha", String(this.currentDarkAlpha));
 		} else {
-			this.lineTransforms.posY.setTargetPosition(top, delay);
 			this.lineTransforms.scale.setTargetPosition(scale);
 			if (this.blur !== Math.min(5, blur)) {
 				this.blur = Math.min(5, blur);
-				const roundedBlur = blur.toFixed(3);
-				this.element.style.filter = `blur(${roundedBlur}px)`;
+				this.element.style.filter = `blur(${blur.toFixed(3)}px)`;
 			}
 		}
 	}
 	update(delta = 0) {
 		if (!this.lyricPlayer.getEnableSpring()) return;
-		this.lineTransforms.posY.update(delta);
 		this.lineTransforms.scale.update(delta);
-		if (this.isInSight) this.show();
-		else this.hide();
+		this.rebuildStyle();
+		if (!this.built) return;
 		const currentScale = this.lineTransforms.scale.getCurrentPosition() / 100;
 		this.updateMaskAlphaTargets(currentScale);
 		this.applyAlphaToDom(delta);
@@ -4423,13 +4590,11 @@ var LyricLineEl = class extends LyricLineBase {
 	_getDebugTargetPos() {
 		return `[位移: ${this.top}; 缩放: ${this.scale}; 延时: ${this.delay}]`;
 	}
-	get isInSight() {
-		const t = this.lineTransforms.posY.getCurrentPosition();
-		const h = this.lyricPlayer.lyricLinesSize.get(this)?.[1] ?? 0;
-		const b = t + h;
-		const pb = this.lyricPlayer.size[1];
-		const ov = this.lyricPlayer.getOverscanPx();
-		return !(t > pb + h + ov || b < -h - ov);
+	teardownContent() {
+		if (this.built) {
+			this.disposeElements();
+			this.built = false;
+		}
 	}
 	disposeElements() {
 		this.balancer?.reset();
@@ -4477,7 +4642,7 @@ var LyricLineMouseEvent = class extends MouseEvent {
 * 尽可能贴切 Apple Music for iPad 的歌词效果设计，且做了力所能及的优化措施
 */
 var DomLyricPlayer = class extends LyricPlayerBase {
-	currentLyricLineObjects = [];
+	currentLyricGroups = [];
 	onResize() {
 		const computedStyles = getComputedStyle(this.element);
 		this._baseFontSize = Number.parseFloat(computedStyles.fontSize);
@@ -4514,7 +4679,10 @@ var DomLyricPlayer = class extends LyricPlayerBase {
 	rebuildStyle() {}
 	setWordFadeWidth(value = .5) {
 		super.setWordFadeWidth(value);
-		for (const el of this.currentLyricLineObjects) el.updateMaskImageSync();
+		for (const group of this.currentLyricGroups) {
+			group.mainLine.updateMaskImageSync();
+			group.bgLine?.updateMaskImageSync();
+		}
 	}
 	/**
 	* 设置当前播放歌词，要注意传入后这个数组内的信息不得修改，否则会发生错误
@@ -4526,36 +4694,52 @@ var DomLyricPlayer = class extends LyricPlayerBase {
 		if (this.hasDuetLine) this.element.classList.add(lyric_player_module_default.hasDuetLine);
 		else this.element.classList.remove(lyric_player_module_default.hasDuetLine);
 		if (!this.supportMaskImage) this.element.style.setProperty("--amll-player-time", `${initialTime}`);
-		for (const line of this.currentLyricLineObjects) {
-			line.removeMouseEventListener("click", this.onLineClickedHandler);
-			line.removeMouseEventListener("contextmenu", this.onLineClickedHandler);
-			line.dispose();
+		for (const group of this.currentLyricGroups) {
+			const linesToDispose = [group.mainLine, group.bgLine].filter((line) => !!line);
+			for (const line of linesToDispose) {
+				line.removeMouseEventListener("click", this.onLineClickedHandler);
+				line.removeMouseEventListener("contextmenu", this.onLineClickedHandler);
+			}
+			group.dispose();
 		}
-		this.currentLyricLineObjects = this.processedLines.map((line, i) => {
+		this.currentLyricGroups = [];
+		let currentGroup = null;
+		for (let i = 0; i < this.processedLines.length; i++) {
+			const line = this.processedLines[i];
 			const lineEl = new LyricLineEl(this, line);
 			lineEl.addMouseEventListener("click", this.onLineClickedHandler);
 			lineEl.addMouseEventListener("contextmenu", this.onLineClickedHandler);
 			this.lyricLinesIndexes.set(lineEl, i);
-			this.lyricLineElementMap.set(lineEl.getElement(), lineEl);
-			return lineEl;
-		});
+			if (!line.isBG || !currentGroup) {
+				currentGroup = new LyricLineGroup(this, lineEl);
+				this.currentLyricGroups.push(currentGroup);
+				this.lyricGroupElementMap.set(currentGroup.element, currentGroup);
+			} else currentGroup.addBgLine(lineEl);
+		}
 		this.setLinePosXSpringParams({});
 		this.setLinePosYSpringParams({});
 		this.setLineScaleSpringParams({});
+		this.setCurrentTime(initialTime, true);
 		this.calcLayout(true);
 		this.update(0);
 	}
 	pause() {
 		super.pause();
-		this.element.classList.remove("playing");
+		this.element.classList.remove(lyric_player_module_default.playing);
 		this.interludeDots.pause();
-		for (const line of this.currentLyricLineObjects) line.pause();
+		for (const group of this.currentLyricGroups) {
+			group.mainLine.pause();
+			group.bgLine?.pause();
+		}
 	}
 	resume() {
 		super.resume();
-		this.element.classList.add("playing");
+		this.element.classList.add(lyric_player_module_default.playing);
 		this.interludeDots.resume();
-		for (const line of this.currentLyricLineObjects) line.resume();
+		for (const group of this.currentLyricGroups) {
+			group.mainLine.resume();
+			group.bgLine?.resume();
+		}
 	}
 	update(delta = 0) {
 		if (!this.timelineState.initialLayoutFinished) return;
@@ -4563,12 +4747,12 @@ var DomLyricPlayer = class extends LyricPlayerBase {
 		if (!this.supportMaskImage) this.element.style.setProperty("--amll-player-time", `${this.timelineState.currentTime}`);
 		if (!this.isPageVisible) return;
 		const deltaS = delta / 1e3;
-		for (const line of this.currentLyricLineObjects) line.update(deltaS);
+		for (const group of this.currentLyricGroups) group.update(deltaS);
 	}
 	dispose() {
 		super.dispose();
 		this.element.remove();
-		for (const el of this.currentLyricLineObjects) el.dispose();
+		for (const group of this.currentLyricGroups) group.dispose();
 		this.bottomLine.dispose();
 		this.interludeDots.dispose();
 	}