，不管里面的 blk 怎么切。
+
+import type { ParagraphTimeTag } from '../types'
+
+/** 标题的 idx。时间点表里用这个值表示「正在读标题」 */
+export const TITLE_IDX = 10000
+
+/** 脚本接管的正文容器 id，与 readerHook 保持一致 */
+const CONTENT_SELECTOR = '#fqa-reader-content'
+
+/** 页面原有的章节标题 */
+const TITLE_SELECTOR = 'h1.muye-reader-title'
+
+/** 当前高亮的段落类名 */
+export const ACTIVE_CLASS = 'fqa-audio-active'
+
+/**
+ * 收集正文里所有带 idx 的段落，按 idx 建索引。
+ *
+ * 同一个 idx 理论上只有一个 ，但真出现重复也不丢弃 —— 一起高亮比只亮一半好。
+ */
+export function collectParagraphs(): Map {
+ const map = new Map()
+ const container = document.querySelector(CONTENT_SELECTOR)
+ if (!container) return map
+ for (const node of container.querySelectorAll('p[idx]')) {
+ const idx = Number(node.getAttribute('idx'))
+ if (!Number.isFinite(idx)) continue
+ const list = map.get(idx)
+ if (list) list.push(node)
+ else map.set(idx, [node])
+ }
+ return map
+}
+
+/**
+ * 标题时间点该高亮谁。
+ *
+ * 时间点表里只有一条 is_title 时是普通章节，标题就是页面上那个 h1。
+ * 出现多条则说明是「复杂章节」（卷首语、分节小标题等各自成段），
+ * 光靠 idx=10000 分不出是哪一个，索性都不高亮 —— 与其亮错位置，不如不亮。
+ */
+export function titleTarget(tags: ParagraphTimeTag[]): HTMLElement | null {
+ const titles = tags.filter(t => t.is_title)
+ if (titles.length !== 1) return null
+ return document.querySelector(TITLE_SELECTOR)
+}
+
+/** 找出 timeMs 落在哪个时间点区间。找不到返回 -1 */
+export function tagIndexAt(tags: ParagraphTimeTag[], timeMs: number): number {
+ let low = 0
+ let high = tags.length - 1
+ let found = -1
+ // 时间点表按时间递增，二分找最后一个 startms <= timeMs 的
+ while (low <= high) {
+ const middle = (low + high) >> 1
+ if (tags[middle]!.startms <= timeMs) {
+ found = middle
+ low = middle + 1
+ } else {
+ high = middle - 1
+ }
+ }
+ if (found < 0) return -1
+ // 落在两段之间的空隙（上一段已读完、下一段还没开始）就保持上一段亮着
+ return found
+}
+
+/**
+ * 高亮某个时间点覆盖的所有段落，并把上一次的高亮清掉。
+ *
+ * 一个时间点可能跨多段（startidx..endidx），所以按区间取。
+ */
+export class ParagraphHighlighter {
+ private paragraphs = new Map()
+ private tags: ParagraphTimeTag[] = []
+ private active: HTMLElement[] = []
+ private activeTagIndex = -1
+
+ /** 换章或正文重新插入后调用，重建索引 */
+ reset(tags: ParagraphTimeTag[]): void {
+ this.clear()
+ this.tags = tags
+ this.paragraphs = collectParagraphs()
+ this.activeTagIndex = -1
+ }
+
+ /** 正文 DOM 被替换过（切音色不会换 DOM，但切章会），重新抓一遍段落 */
+ refresh(): void {
+ this.paragraphs = collectParagraphs()
+ this.activeTagIndex = -1
+ }
+
+ get timeTags(): ParagraphTimeTag[] {
+ return this.tags
+ }
+
+ /** 当前高亮对应的时间点下标，用于切音色时保持段落 */
+ get currentTagIndex(): number {
+ return this.activeTagIndex
+ }
+
+ clear(): void {
+ for (const node of this.active) node.classList.remove(ACTIVE_CLASS)
+ this.active = []
+ }
+
+ /**
+ * 按播放时间更新高亮。
+ *
+ * @param scroll 是否把高亮段落滚进视口
+ * @returns 当前时间点下标，没有变化时返回原值
+ */
+ update(timeMs: number, scroll: boolean): number {
+ if (this.tags.length === 0) return -1
+ const index = tagIndexAt(this.tags, timeMs)
+ if (index < 0 || index === this.activeTagIndex) return this.activeTagIndex
+ this.activeTagIndex = index
+ this.applyTag(index, scroll)
+ return index
+ }
+
+ /** 直接高亮第 index 个时间点，供切音色后恢复位置用 */
+ applyTag(index: number, scroll: boolean): void {
+ const tag = this.tags[index]
+ if (!tag) return
+ this.clear()
+ const targets = tag.is_title
+ ? [titleTarget(this.tags)].filter((n): n is HTMLElement => n !== null)
+ : this.rangeTargets(tag.startidx, tag.endidx)
+ for (const node of targets) node.classList.add(ACTIVE_CLASS)
+ this.active = targets
+ if (scroll && targets[0]) {
+ targets[0].scrollIntoView({ behavior: 'smooth', block: 'center' })
+ }
+ }
+
+ private rangeTargets(startidx: number, endidx: number): HTMLElement[] {
+ const targets: HTMLElement[] = []
+ for (let idx = startidx; idx <= endidx; idx++) {
+ const nodes = this.paragraphs.get(idx)
+ if (nodes) targets.push(...nodes)
+ }
+ return targets
+ }
+
+ /**
+ * 点段落跳转用：找出这个节点属于哪个时间点。
+ *
+ * 从点击目标往上找最近的 （点到 blk 或行内标签上也能命中），
+ * 再拿 idx 去时间点表里查覆盖它的那一段。
+ */
+ tagIndexOfNode(node: Node | null): number {
+ const paragraph = nearestParagraph(node)
+ if (paragraph) {
+ const idx = Number(paragraph.getAttribute('idx'))
+ if (Number.isFinite(idx)) return this.tagIndexOfIdx(idx)
+ }
+ // 点在标题上
+ if (node instanceof Node && titleTarget(this.tags)?.contains(node)) {
+ return this.tags.findIndex(t => t.is_title)
+ }
+ return -1
+ }
+
+ /** idx 落在哪个时间点区间。时间点可能跨多段，所以按区间判断 */
+ tagIndexOfIdx(idx: number): number {
+ return this.tags.findIndex(t => !t.is_title && idx >= t.startidx && idx <= t.endidx)
+ }
+
+ /** 第 index 个时间点的起始秒数，供 seek 用 */
+ startSecondsOf(index: number): number | null {
+ const tag = this.tags[index]
+ return tag ? tag.startms / 1000 : null
+ }
+}
+
+/** 从任意节点往上找最近的带 idx 的段落 */
+function nearestParagraph(node: Node | null): HTMLElement | null {
+ let current: Node | null = node
+ while (current) {
+ if (current instanceof HTMLElement && current.matches('p[idx]')) return current
+ // 到正文容器就停，别一路找到 body
+ if (current instanceof HTMLElement && current.id === 'fqa-reader-content') return null
+ current = current.parentNode
+ }
+ return null
+}
diff --git a/src/crypto/spade.ts b/src/crypto/spade.ts
new file mode 100644
index 0000000..81def53
--- /dev/null
+++ b/src/crypto/spade.ts
@@ -0,0 +1,53 @@
+import { b64decode } from '.'
+
+function decodeBase36(c: number): number {
+ if (c >= 48 && c <= 57) return c - 48; // '0'-'9'
+ if (c >= 97 && c <= 122) return c - 97 + 10; // 'a'-'z'
+ return 0xFF;
+}
+
+function bitCount(n: number): number {
+ n = n - ((n >> 1) & 0x55555555);
+ n = (n & 0x33333333) + ((n >> 2) & 0x33333333);
+ return ((n + (n >> 4) & 0xF0F0F0F) * 0x1010101) >> 24;
+}
+
+function decryptSpadeInner(spadeKey: Uint8Array): Uint8Array {
+ const result = new Uint8Array(spadeKey);
+ const buff = new Uint8Array(2 + spadeKey.length);
+ buff.set([0xFA, 0x55], 0);
+ buff.set(spadeKey, 2);
+
+ for (let i = 0; i < result.length; i++) {
+ let v = (spadeKey[i]! ^ buff[i]!) - bitCount(i) - 21;
+ while (v < 0) { v += 0xFF; }
+ result[i] = v;
+ }
+ return result;
+}
+
+function decryptSpade(spadeKeyBytes: Uint8Array): string {
+ const spadeKeyLen = spadeKeyBytes.length;
+ if (spadeKeyLen < 3) return "";
+ const paddingLen = (spadeKeyBytes[0]! ^ spadeKeyBytes[1]! ^ spadeKeyBytes[2]!) - 48;
+ if (spadeKeyLen < paddingLen + 2) return "";
+ const innerInput = spadeKeyBytes.slice(1, spadeKeyLen - paddingLen);
+ const tmpBuff = decryptSpadeInner(innerInput);
+ if (tmpBuff.length === 0) return "";
+ const skipBytes = decodeBase36(tmpBuff[0]!);
+ const decodedMessageLen = spadeKeyLen - paddingLen - 2;
+ const endIndex = 1 + decodedMessageLen - skipBytes;
+ if (endIndex > tmpBuff.length) return "";
+ const finalBytes = tmpBuff.slice(1, endIndex);
+ return new TextDecoder("utf-8").decode(finalBytes);
+}
+
+export function decryptSpadeA(spadeAStr: string): string {
+ try {
+ const bytes = new Uint8Array(b64decode(spadeAStr));
+ return decryptSpade(bytes);
+ } catch (e) {
+ console.error("Spade parsing error", e);
+ return "";
+ }
+}
\ No newline at end of file
diff --git a/src/hooks/readerHook.ts b/src/hooks/readerHook.ts
index 446dd8b..19363d1 100644
--- a/src/hooks/readerHook.ts
+++ b/src/hooks/readerHook.ts
@@ -9,6 +9,14 @@ import { cloneElement } from '../utils';
import { fetchArrayBuffer } from '../utils/request';
import { type Book } from '../types'
import { decryptComicImage } from '../crypto/content';
+import { initAudioPanel } from '../audioPanel'
+import {
+ closeAudiobook,
+ openAudiobook,
+ refreshParagraphs,
+ state as audioState,
+ switchChapter,
+} from '../audiobook/controller'
// import moment from 'moment'
let currentBook: Book | null = null
@@ -303,6 +311,36 @@ async function insertContent() {
}
}
}
+
+ // 正文换了：段落节点全是新的，正在听书就把音频也切到这一章
+ if (audioState.open) {
+ await switchChapter(itemId, {
+ cover: currentBook?.cover_url ?? '',
+ title: currentBook?.title ?? document.title,
+ })
+ } else {
+ refreshParagraphs()
+ }
+}
+
+/**
+ * 工具栏「听书」按钮：停止 / 开始听书。
+ *
+ * 已经在听的时候再点就是停止。切音色走左下角悬浮栏，不从这里进。
+ */
+async function startAudioPlay(): Promise {
+ if (audioState.open) {
+ closeAudiobook()
+ return
+ }
+ const itemId = window.location.pathname.split('/').pop()?.substring(0, 19) || ''
+ if (!itemId) return
+ initAudioPanel()
+ // 封面和书名从已取到的书籍信息来；正文还没加载完时退化成空封面
+ await openAudiobook(itemId, currentBook?.book_id ?? '', {
+ cover: currentBook?.cover_url ?? '',
+ title: currentBook?.title ?? document.title,
+ })
}
// let currentBook: Book | null = null
@@ -322,6 +360,28 @@ async function onLoad(): Promise {
document.head.appendChild(style)
}
*/
+ // 切换日夜间的按钮，不管怎么样它的状态都是完全一样的。适合作为模板。
+ const toolbar = document.querySelector("div.reader-toolbar > div")
+ const toolbarButton = document.querySelector("div.reader-toolbar > div > div:nth-child(3)")
+ if (toolbarButton && toolbar) {
+ const c = cloneElement(toolbarButton)
+ c.id = 'fqa-toggle-audiobook'
+ const listenIcon = document.createElement('span')
+ listenIcon.textContent = '听'
+ listenIcon.style.width = '24px'
+ listenIcon.style.height = '24px'
+ listenIcon.style.fontSize = '24px'
+ listenIcon.style.lineHeight = '24px'
+ listenIcon.classList.add('muyeicon-icon')
+ listenIcon.classList.add('reader-toolbar-item-icon')
+ c.firstChild?.replaceWith(listenIcon)
+ const l = c.lastChild as HTMLDivElement
+ if (l) {
+ l.textContent = '听书'
+ }
+ c.addEventListener('click', () => void startAudioPlay())
+ toolbar.appendChild(c)
+ }
const btns = document.querySelector("div.muye-reader-btns") // single div
if (btns) {
// TODO: 直接覆写按钮行为，切章节由脚本完成
diff --git a/src/player/CencAudioPlayer.ts b/src/player/CencAudioPlayer.ts
new file mode 100644
index 0000000..ca97b05
--- /dev/null
+++ b/src/player/CencAudioPlayer.ts
@@ -0,0 +1,1083 @@
+import { fetch as pageFetch } from '../config'
+import type { Bytes } from './bytes'
+import {
+ cencIvSize,
+ decryptCencSample,
+ importCencKey,
+ parseCencMetadata,
+ type CencCodec,
+ type CencMetadata,
+} from './cenc'
+import {
+ buildMp4Segment,
+ buildWebmCluster,
+ codecMime,
+ extractFlacEntry,
+ extractSampleEntry,
+ initSegment,
+} from './remux'
+
+export type CencPlayerState = 'idle' | 'loading' | 'ready' | 'playing' | 'paused' | 'ended' | 'error' | 'destroyed'
+
+export interface CencAudioSource {
+ /** 加密音频 MP4 URL。Range 请求不会发送 Referer。 */
+ url: string
+ /** 16 字节 AES-128 key，或 32 位 hex key。 */
+ key: string | ArrayBuffer | Uint8Array
+}
+
+export interface CencMediaInfo {
+ codec: CencCodec
+ sampleCount: number
+ durationSeconds: number
+ timescale: number
+ channels: number
+ encryptedBytes: number
+}
+
+export interface CencProgress {
+ processedSamples: number
+ totalSamples: number
+ percent: number
+ bufferedAhead: number
+ durationSeconds: number
+}
+
+export interface CencAudioPlayerCallbacks {
+ onStateChange?: (state: CencPlayerState) => void
+ onProgress?: (progress: CencProgress) => void
+ onMessage?: (message: string, level: 'info' | 'warn' | 'error') => void
+}
+
+export interface CencAudioPlayerOptions extends CencAudioPlayerCallbacks {
+ /** 初次读取的 MP4 头大小，默认 512 KiB。 */
+ headBytes?: number
+ /** MP4 头解析失败时逐次扩大读取，默认最多 8 MiB。 */
+ maxHeadBytes?: number
+ /**
+ * 每个 Range/MSE media segment 包含的目标秒数，默认 15 秒。
+ * Opus/WebM 因时间戳范围限制最高按 30 秒处理。
+ */
+ segmentSeconds?: number
+ /** 播放位置前方达到此秒数后暂停续流，默认 40 秒。 */
+ maxBufferAheadSeconds?: number
+ /** 清理播放位置后方的缓冲，只保留此秒数，默认 10 秒。 */
+ keepBehindSeconds?: number
+ /** 并发 AES-CTR 解密数，默认 24。 */
+ decryptConcurrency?: number
+ /** 仅用于测试或替换网络实现；默认使用页面原始 fetch。 */
+ fetch?: typeof fetch
+}
+
+interface StreamContext {
+ url: string
+ head: Bytes
+ meta: CencMetadata
+ key: CryptoKey
+ counterStart: 0 | 1
+ ticks: Float64Array
+ samplesPerSecond: number
+ samplesPerSegment: number
+}
+
+const DEFAULT_HEAD_BYTES = 512 * 1024
+const DEFAULT_MAX_HEAD_BYTES = 8 * 1024 * 1024
+const DEFAULT_SEGMENT_SECONDS = 15
+const MAX_WEBM_SEGMENT_SECONDS = 30
+const DEFAULT_MAX_BUFFER_AHEAD = 40
+const DEFAULT_KEEP_BEHIND = 10
+const DEFAULT_DECRYPT_CONCURRENCY = 24
+
+function asError(value: unknown): Error {
+ return value instanceof Error ? value : new Error(String(value))
+}
+
+function abortError(): DOMException {
+ return new DOMException('播放器会话已取消', 'AbortError')
+}
+
+function isAbort(value: unknown): boolean {
+ return value instanceof DOMException && value.name === 'AbortError'
+}
+
+/**
+ * 等 SourceBuffer 处理完手头的 appendBuffer/remove。
+ *
+ * abort 会让上一次操作的 Promise 提前兑现，但浏览器那边还在跑，
+ * 此时再调 appendBuffer 就会抛 "still processing"。updating 转 false 时
+ * 一定会有一次 updateend/abort/error，所以监听事件即可，不用轮询。
+ */
+function waitForSourceBufferIdle(sourceBuffer: SourceBuffer, signal: AbortSignal): Promise {
+ if (!sourceBuffer.updating) return Promise.resolve()
+ return new Promise(resolve => {
+ const done = (): void => {
+ sourceBuffer.removeEventListener('updateend', done)
+ sourceBuffer.removeEventListener('abort', done)
+ sourceBuffer.removeEventListener('error', done)
+ signal.removeEventListener('abort', done)
+ resolve()
+ }
+ sourceBuffer.addEventListener('updateend', done)
+ sourceBuffer.addEventListener('abort', done)
+ sourceBuffer.addEventListener('error', done)
+ // 会话被取消也别一直挂着；调用方随后会自己检查 signal
+ signal.addEventListener('abort', done, { once: true })
+ })
+}
+
+/**
+ * 把