koishi-plugin-kkk 3.0.0 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # 更新日志
 
+## 3.1.0
+
+### 卡片渲染：先量再定倍率，快的那个留下
+
+拿你各个平台的真实卡片在同一台机器上测的（同一份 HTML，各测两遍取平均）：
+
+| 卡片 | 1 倍渲染 | 2 倍渲染 | 现在固定用 |
+| --- | --- | --- | --- |
+| 抖音评论区 | **1.5 秒** | 4.2 秒 | 1 倍 |
+| B 站评论区 | **2.2 秒** | 6.8 秒 | 1 倍 |
+| 快手评论区 | **0.4 秒** | 1.0 秒 | 1 倍 |
+| 抖音作品卡 | **1.7 秒** | 2.8 秒 | 1 倍 |
+| B 站视频卡 | **1.5 秒** | 2.5 秒 | 1 倍 |
+| 小红书笔记卡 | 15.5 秒 | **5.2 秒** | 2 倍 |
+| 抖音图集卡 | 8.0 秒 | **3.3 秒** | 2 倍 |
+
+两处原因，都修了：
+
+- **有些卡片一直在用两倍分辨率渲染，然后被扔掉一半**：卡片是按 1440 宽排版的，长图切片时又会被压回 1440 宽再切 —— 2 倍渲染出来的 2880 宽像素一个都用不上。但**不能一刀切**：内核在不同倍率下走的路径不一样，实测上面这些卡片，评论卡 1 倍快 2.7 倍，小红书笔记卡反而 2 倍快 3 倍。所以现在每条路由**各测一次**：第一次用你配的倍率，第二次换另一档，之后固定用快的那档（每条路由只多花一次渲染）。你把「渲染精度」设成 50（就要 1 倍）时不测，直接听你的。
+- **内核在等它根本加载不了的远程图片**：shotkit 内核在 Windows 上拉不到 https 资源（卡片里的远程头像、封面本来就是空白框），但它照样会去请求、还等你等到超时 —— 实测页面里只要有一个连不上的 https 图片，截图就从 1.5 秒变成 **22 秒**。React 还会给每张图片额外补一条 `<link rel="preload">`（一张评论卡 27 条），这些也算在加载里。现在交给内核之前会把这些摘掉（只有用内核时才摘，切到 puppeteer 不受影响，那边远程图片正常）。
+- 顺带：渲染日志现在会写清**每张卡片花了多久**（页面多少毫秒 / 截图多少毫秒），慢的时候能一眼看出是慢在哪一步。
+
+### 在线播放：声音不再等服务器
+
+- **默认不在服务器上合视频和声音了**：播放页会同时放画面和声音，由浏览器自己对好（原来要等 ffmpeg 在服务器上合完才能开始放，等得久）。
+- **下载按钮分成了三个**：「下载画面」（只有画面的那份，和以前一样）、「下载声音」（单独把声音存下来）、「合成后下载」（连声音一起下载，点下去服务器才去合并，合好再给你；合过一次会记住，再点马上就好）。
+- 页面上的静音按钮现在同时管画面和声音；拖动进度条时声音也会跟着对齐。
+
 ## 3.0.0
 
 > 这一版主要两件事：**让它快**、**该发出去的东西真的发出去**。

package/lib/karin/module/utils/Render/index.js

@@ -10,6 +10,7 @@ exports.buildPosterContext = buildPosterContext;
 exports.renderTemplateHtml = renderTemplateHtml;
 exports.downgradeNoiseLayers = downgradeNoiseLayers;
 exports.pruneMissingFontFaces = pruneMissingFontFaces;
+exports.neutralizeRemoteAssets = neutralizeRemoteAssets;
 exports.optimizeForScreenshot = optimizeForScreenshot;
 /**
  * 渲染模块（Koishi 移植版）。
@@ -469,6 +470,36 @@ function pruneMissingFontFaces(html, baseDir) {
         return resolvable ? block : '';
     });
 }
+/**
+ * 内核（shotkit）加载不了的远程资源，交给它之前先摘掉。
+ *
+ * 实测：内核在 Windows 上**加载不了 https 资源**（卡片里的 https 图片一律渲染成空白框），
+ * 但它照样会为这些地址发请求、并且等它们结束 —— 一张 1440x600 的小页面里只要有一个连不上的
+ * https 图片，截图就从 1.5 秒变成 22 秒。React 19 的 SSR 还会给每个 `<img>` 额外补一条
+ * `<link rel="preload" as="image">`（一张评论卡实测 27 条），这些 preload 同样算在页面加载里。
+ *
+ * 所以**只在 shotkit 这条路径**上做替换（puppeteer 那条路不动，它能正常加载远程图片）：
+ *   - 删掉 `<link rel="preload">`（纯预加载提示，本地渲染没有意义）
+ *   - 远程 `<img src>` 换成 1x1 透明图（反正渲染不出来），顺带删掉 srcset
+ *   - 内联样式/CSS 里的 `url(http…)` 换成 none
+ */
+function neutralizeRemoteAssets(html) {
+    let links = 0;
+    let images = 0;
+    let output = html.replace(/<link\b[^>]*\brel=["']?preload["']?[^>]*>/gi, () => {
+        links++;
+        return '';
+    });
+    output = output.replace(/(<img\b[^>]*?)\ssrc="https?:\/\/[^"]*"/gi, (_all, head) => {
+        images++;
+        return head + ' src="' + TRANSPARENT_PIXEL + '"';
+    });
+    output = output.replace(/(<img\b[^>]*?)\ssrcset="[^"]*"/gi, '$1');
+    output = output.replace(/url\(\s*(['"]?)https?:\/\/[^)'"]*\1\s*\)/gi, 'none');
+    return { html: output, links, images };
+}
+/** 顶掉远程图片用的 1x1 透明 gif（内联 data: 内核能正常解码） */
+const TRANSPARENT_PIXEL = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 /** 截图前的统一降级：先剔无效字体，再降级噪点层 */
 function optimizeForScreenshot(html, baseDir) {
     const pruned = pruneMissingFontFaces(html, baseDir);
@@ -491,7 +522,7 @@ function optimizeForScreenshot(html, baseDir) {
  */
 /** 用了 shotkit 只提示一次（每张卡片都刷一行没意义） */
 let shotkitLogged = false;
-async function screenshot(htmlPath, selector, timeout, scale = 1, format = 'jpeg') {
+async function screenshot(htmlPath, selector, timeout, scale = 1, format = 'jpeg', htmlSource) {
     const koishiCtx = (0, node_karin_1.getKoishiContext)();
     /** 浏览器渲染服务（koishi-plugin-puppeteer / puppeteer-without-canvas 之类） */
     const puppeteer = koishiCtx?.get ? koishiCtx.get('puppeteer') : koishiCtx?.puppeteer;
@@ -511,7 +542,8 @@ async function screenshot(htmlPath, selector, timeout, scale = 1, format = 'jpeg
     // 卡片是给手机看的：**低于 2x 会明显发虚**，所以下限锁 2（上限 3）。
     // 想更大更清晰就调 `app.renderScale`（100 → 2x，150 → 3x），配 100 时保持 2x 不出错。
     const requested = Number.isFinite(scale) && scale > 0 ? scale * 2 : 2;
-    let deviceScaleFactor = Math.min(3, Math.max(2, requested));
+    // 下限是 1x：模板都按 1440 CSS 像素排版，1x 出图正好 1440 宽 —— 也就是切片时会被压到的那个宽度
+    let deviceScaleFactor = Math.min(3, Math.max(1, requested));
     // 安全阀：超大页面降一档缩放，避免单次渲染吃掉几 GB 内存（曾经把实例 OOM 崩掉）
     try {
         if (node_fs_1.default.statSync(htmlPath).size > 6 * 1024 * 1024)
@@ -534,19 +566,36 @@ async function screenshot(htmlPath, selector, timeout, scale = 1, format = 'jpeg
     if (shotkit && typeof shotkit.renderFile === 'function' && (preferShotkit || !puppeteer)) {
         try {
             const started = Date.now();
-            const buffer = await shotkit.renderFile(htmlPath, {
-                selector,
-                timeout,
-                deviceScaleFactor,
-                type: 'png',
-            });
+            /**
+             * 交给内核的 HTML 先摘掉它加载不了的远程资源（见 neutralizeRemoteAssets 的说明）。
+             * 走 `screenshot({ html })` 而不是 renderFile：磁盘上那份保持原样，
+             * 万一内核失败要回退到 puppeteer，那边还能正常加载远程图片。
+             */
+            const sanitized = htmlSource ? neutralizeRemoteAssets(htmlSource) : null;
+            if (sanitized && (sanitized.links > 0 || sanitized.images > 0)) {
+                node_karin_1.logger.debug('[Render] 内核用 HTML：摘掉 preload ' + sanitized.links + ' 条、远程图片 ' + sanitized.images + ' 张');
+            }
+            const buffer = sanitized && typeof shotkit.screenshot === 'function'
+                ? ((await shotkit.screenshot({
+                    html: sanitized.html,
+                    selector,
+                    timeout,
+                    deviceScaleFactor,
+                    type: 'png',
+                }))?.image)
+                : await shotkit.renderFile(htmlPath, {
+                    selector,
+                    timeout,
+                    deviceScaleFactor,
+                    type: 'png',
+                });
             if (buffer && buffer.length) {
                 if (!shotkitLogged) {
                     shotkitLogged = true;
                     node_karin_1.logger.info('[Render] 使用 shotkit 内核渲染卡片（静态内核，不执行页面 JS）');
                 }
                 node_karin_1.logger.debug('[Render] shotkit 渲染 ' + htmlPath.split(/[\\/]/).pop() + ' 用时 ' + (Date.now() - started) + 'ms');
-                return { base64: Buffer.from(buffer).toString('base64'), mime: 'image/png' };
+                return { base64: Buffer.from(buffer).toString('base64'), mime: 'image/png', dsf: deviceScaleFactor };
             }
         }
         catch (error) {
@@ -627,7 +676,7 @@ async function screenshot(htmlPath, selector, timeout, scale = 1, format = 'jpeg
             type: format,
             quality: format === 'jpeg' ? 92 : undefined
         });
-        return { base64: buffer.toString('base64'), mime: 'image/' + format };
+        return { base64: buffer.toString('base64'), mime: 'image/' + format, dsf: deviceScaleFactor };
     };
     /**
      * 自己开一个页面截图，**不要走插件的 render() 包装**。
@@ -757,9 +806,50 @@ function unwrapImageProxy(html) {
         }
     });
 }
+const cardScaleTrials = new Map();
+/** 配置里的倍率（面板 renderScale：100 = 2x，150 = 3x，50 = 1x） */
+function configuredCardScale() {
+    return Math.min(2, Math.max(0.25, Number(Config_1.Config.app?.renderScale ?? 100) / 100));
+}
+/** 这张卡片这次该用多少倍渲染，以及这次是不是「试探」 */
+function resolveCardScale(route) {
+    const configured = configuredCardScale();
+    // 用户明确只要 1x：不试，直接听配置
+    if (configured <= 0.5)
+        return { scale: configured, trial: false };
+    const entry = cardScaleTrials.get(route);
+    if (!entry)
+        return { scale: configured, trial: false };
+    if (entry.pending !== undefined)
+        return { scale: entry.pending, trial: true };
+    return { scale: entry.best, trial: false };
+}
+/** 渲染完把这次的耗时喂回来，决定这条路之后固定用哪一档 */
+function recordCardScale(route, scale, ms) {
+    const configured = configuredCardScale();
+    if (configured <= 0.5)
+        return;
+    const entry = cardScaleTrials.get(route);
+    if (!entry) {
+        cardScaleTrials.set(route, { best: scale, bestMs: ms, pending: scale > 0.5 ? 0.5 : configured });
+        return;
+    }
+    if (entry.pending !== undefined && Math.abs(scale - entry.pending) < 1e-6) {
+        const better = ms < entry.bestMs;
+        const best = better ? scale : entry.best;
+        const bestMs = better ? ms : entry.bestMs;
+        node_karin_1.logger.info('[Render] ' + route + ' 倍率测完了：固定用 ' + best * 2 + 'x（' + Math.round(bestMs) + 'ms，'
+            + '本次 ' + scale * 2 + 'x=' + Math.round(ms) + 'ms / 上次 ' + entry.best * 2 + 'x=' + Math.round(entry.bestMs) + 'ms）');
+        cardScaleTrials.set(route, { best, bestMs });
+        return;
+    }
+    // 稳态：顺手刷新一下耗时，万一机器负载变化明显也能留着对比
+    entry.bestMs = ms;
+}
 const Render = async (_event, route, data) => {
+    const startedAt = Date.now();
     const dark = await (0, coverTheme_1.resolveUseDarkTheme)(route, data).catch(() => false);
-    const scale = Math.min(2, Math.max(0.5, Number(Config_1.Config.app?.renderScale ?? 100) / 100));
+    const { scale, trial } = resolveCardScale(route);
     let html = await renderTemplateHtml(route, data, dark);
     if (!html) {
         html = buildFallbackHtml(route, data, dark, scale);
@@ -775,10 +865,17 @@ const Render = async (_event, route, data) => {
         const isQrCode = /qrcode/i.test(route);
         const format = isQrCode ? 'png' : 'jpeg';
         // mime 由 screenshot 返回实际产出的格式：shotkit 走 PNG，其余路径仍是传入的 format
-        const { base64, mime } = await screenshot(htmlPath, '#container', Number(Config_1.Config.app?.RenderWaitTime ?? 10) * 1000, scale, format);
+        const htmlBuiltAt = Date.now();
+        const { base64, mime, dsf } = await screenshot(htmlPath, '#container', Number(Config_1.Config.app?.RenderWaitTime ?? 10) * 1000, scale, format, html);
+        const shotAt = Date.now();
         const buffer = Buffer.from(base64, 'base64');
         const meta = (0, exports.getImageMetadata)(buffer);
-        node_karin_1.logger.debug('[Render] ' + route + ' 渲染完成 ' + mime + ' ' + (meta.width ?? '?') + 'x' + (meta.height ?? '?') + ' ' + Math.round(buffer.length / 1024) + 'KB');
+        // 把这次的截图耗时喂回去，决定这条路之后固定用哪一档（见上面 cardScaleTrials）
+        recordCardScale(route, scale, shotAt - htmlBuiltAt);
+        node_karin_1.logger.info('[Render] ' + route + ' 渲染完成 ' + mime + ' ' + (meta.width ?? '?') + 'x' + (meta.height ?? '?')
+            + ' ' + Math.round(buffer.length / 1024) + 'KB'
+            + ' 用时 ' + (shotAt - startedAt) + 'ms（页面 ' + (htmlBuiltAt - startedAt) + 'ms / 截图 ' + (shotAt - htmlBuiltAt)
+            + 'ms，' + dsf + 'x' + (trial ? '，本次试另一档倍率' : '') + '）');
         // 用带 mime 的 data URL，适配器才知道按对应格式上传（base64:// 会被当成 PNG）
         return [node_karin_1.segment.image('data:' + mime + ';base64,' + base64)];
     }

package/lib/karin/platform/bilibili/bilibili.js

@@ -324,7 +324,7 @@ class Bilibili extends utils_1.Base {
                 }
                 else {
                     /**
-                     * 免登录直链分支：体积取自 html5 播放接口的 \`durl[0].size\`。
+                     * 免登录直链分支：体积取自 html5 播放接口的 `durl[0].size`。
                      * 这个接口会偶发拿不到 durl（风控、字段变化、超时），原来这里直接下标取值，
                      * 一旦为空就抛 TypeError，**整条解析直接失败**（用户侧表现就是「提示开始解析，然后没下文」）。
                      * 体积只是展示信息，取不到就按 0 处理，不要拖垮解析。
@@ -1319,6 +1319,12 @@ class Bilibili extends utils_1.Base {
      *   - 本地文件（登录态合成/烧录的产物、免登录时提前下好的直链）；
      *   - 没有下载产物时保持 null（例如体积超限根本没下）。
      */
+    /**
+     * 已经准备好的视频（见 prepareVideo）。
+     *
+     * `audioPath` 只有**在线播放 + 音视频分离（B站）**时才有：表示音轨单独存了一份，
+     * 播放页会同时播这两个文件（默认不合成，用户要求）。
+     */
     preparedVideo = null;
     /**
      * 下载视频（含合成音轨、烧录弹幕），**不发送**。
@@ -1421,23 +1427,52 @@ class Bilibili extends utils_1.Base {
                         }));
                         sourcePath = resultPath;
                     }
+                    else if ((0, player_1.isOnlinePlayerRequest)()) {
+                        /**
+                         * **在线播放：默认不合成**（用户要求）。
+                         *
+                         * B站的音视频是分离的，以前这里必定调一次 ffmpeg 合成（几分钟的视频也要几秒到几十秒，
+                         * 低配机器更久）。改成：画面和声音**各自留一份**，播放页用 `<video muted>` + `<audio>`
+                         * 同时播；只有用户在播放页点「服务器合并后下载」时才按需合成（见 player/server.ts）。
+                         */
+                        success = true;
+                        sourcePath = bmp4.filepath;
+                        node_karin_1.logger.mark('[在线播放] 跳过音视频合成：画面与声音分开存，浏览器端同时播放');
+                    }
                     else {
                         success = await (0, utils_1.mergeVideoAudio)(bmp4.filepath, bmp3.filepath, resultPath);
                         sourcePath = resultPath;
                     }
                     if (success) {
-                        const filePath = utils_1.Common.tempDri.video + `${Config_1.Config.app.removeCache ? 'tmp_' + Date.now() : this.downloadfilename}.mp4`;
-                        node_fs_1.default.renameSync(sourcePath, filePath);
-                        node_karin_1.logger.mark(`视频文件重命名完成: ${sourcePath.split('/').pop()} -> ${filePath.split('/').pop()}`);
-                        node_karin_1.logger.mark('正在尝试删除缓存文件');
-                        if (node_fs_1.default.existsSync(bmp4.filepath))
-                            await utils_1.Common.removeFile(bmp4.filepath, true);
-                        if (bmp3 && node_fs_1.default.existsSync(bmp3.filepath))
-                            await utils_1.Common.removeFile(bmp3.filepath, true);
-                        const stats = node_fs_1.default.statSync(filePath);
-                        const fileSizeInMB = Number((stats.size / (1024 * 1024)).toFixed(2));
-                        // 本地合成的没有视频直链，交给 sendPreparedVideo 上传
-                        this.preparedVideo = { filepath: filePath, totalBytes: fileSizeInMB, originTitle: this.downloadfilename };
+                        /**
+                         * 在线播放（音视频分离）时**不要重命名** —— 画面那个文件原样留着，
+                         * 「audioPath」指向单独的音轨文件，两个都由 publishOnlinePlayer 搬进会话目录。
+                         */
+                        const separateAudio = (0, player_1.isOnlinePlayerRequest)() && !!bmp3 && sourcePath === bmp4.filepath;
+                        if (separateAudio) {
+                            const videoStats = node_fs_1.default.statSync(bmp4.filepath);
+                            this.preparedVideo = {
+                                filepath: bmp4.filepath,
+                                totalBytes: Number((videoStats.size / (1024 * 1024)).toFixed(2)),
+                                originTitle: this.downloadfilename,
+                                audioPath: bmp3.filepath
+                            };
+                            node_karin_1.logger.mark('[在线播放] 已就绪：画面 + 声音分开，交给播放页同时播放');
+                        }
+                        else {
+                            const filePath = utils_1.Common.tempDri.video + `${Config_1.Config.app.removeCache ? 'tmp_' + Date.now() : this.downloadfilename}.mp4`;
+                            node_fs_1.default.renameSync(sourcePath, filePath);
+                            node_karin_1.logger.mark(`视频文件重命名完成: ${sourcePath.split('/').pop()} -> ${filePath.split('/').pop()}`);
+                            node_karin_1.logger.mark('正在尝试删除缓存文件');
+                            if (node_fs_1.default.existsSync(bmp4.filepath))
+                                await utils_1.Common.removeFile(bmp4.filepath, true);
+                            if (bmp3 && node_fs_1.default.existsSync(bmp3.filepath))
+                                await utils_1.Common.removeFile(bmp3.filepath, true);
+                            const stats = node_fs_1.default.statSync(filePath);
+                            const fileSizeInMB = Number((stats.size / (1024 * 1024)).toFixed(2));
+                            // 本地合成的没有视频直链，交给 sendPreparedVideo 上传
+                            this.preparedVideo = { filepath: filePath, totalBytes: fileSizeInMB, originTitle: this.downloadfilename };
+                        }
                     }
                     else {
                         await utils_1.Common.removeFile(bmp4.filepath, true);
@@ -1528,7 +1563,7 @@ class Bilibili extends utils_1.Base {
         this.preparedVideo = null;
         if (!prepared)
             return false;
-        const { filepath, totalBytes, originTitle, videoUrl } = prepared;
+        const { filepath, totalBytes, originTitle, videoUrl, audioPath } = prepared;
         /**
          * 在线播放模式：不烧录、也不上传，直接把下好的视频登记成播放会话，
          * 回一条公网链接（弹幕存下来给播放页用）。
@@ -1538,6 +1573,8 @@ class Bilibili extends utils_1.Base {
         if ((0, player_1.isOnlinePlayerRequest)()) {
             const published = await (0, player_1.publishOnlinePlayer)(this.e, {
                 videoPath: filepath,
+                // 分离音轨：一起交给播放页（默认不合成，浏览器里同时播）
+                audioPath,
                 title: originTitle || this.downloadfilename || this.workInfo?.title,
                 platform: 'bilibili',
                 danmaku: this.danmakuList,

package/lib/player/index.js

@@ -526,7 +526,11 @@ async function publishOnlinePlayer(e, input) {
          * 体积上限：超过就不做在线播放，回一句说明并返回 false ——
          * 调用方拿到 false 会退回「直接发送视频文件」，用户不会什么都没有。
          */
-        const sizeMB = Number(node_fs_1.default.statSync(input.videoPath).size) / 1024 / 1024;
+        /** 有独立音轨时按「画面 + 声音」的总和算，免得两条加起来把磁盘塞爆 */
+        const audioBytes = input.audioPath && node_fs_1.default.existsSync(input.audioPath)
+            ? Number(node_fs_1.default.statSync(input.audioPath).size) || 0
+            : 0;
+        const sizeMB = (Number(node_fs_1.default.statSync(input.videoPath).size) + audioBytes) / 1024 / 1024;
         const limitMB = await resolvePlayerSizeLimitMB();
         if (limitMB > 0 && sizeMB > limitMB) {
             /**
@@ -547,6 +551,7 @@ async function publishOnlinePlayer(e, input) {
         const localOnly = !hasPublicBaseUrl();
         const session = (0, store_1.registerPlayerSession)({
             videoPath: input.videoPath,
+            audioPath: input.audioPath,
             title: input.title,
             platform: input.platform,
             danmaku,

package/lib/player/page.js

@@ -226,6 +226,9 @@ const PLAYER_STYLE = [
     'background:var(--pink);color:#fff;font-size:14px;font-weight:600;cursor:pointer;}',
     '.dlbtn svg{font-size:20px}',
     '.dlbtn:hover{background:#ff8aac}',
+    /** 「合成后下载」是主按钮（另外两个只是分别下载原始流），稍微区分一下 */
+    '.dlbtn.main{background:#fb7299;color:#fff}',
+    '.dlbtn.main:hover{background:#ff8aac}',
     '.dlbtn:focus-visible{outline:2px solid #fff;outline-offset:2px}',
     '.dlhint{color:var(--muted);font-size:12px;}',
     /* 没配公网地址时的提示条：用户打不开得知道是「没配域名」，不是「插件坏了」 */
@@ -287,6 +290,8 @@ function renderPlayerPage(info) {
     const platform = escapeHtml(platformLabel(info.platform));
     const expire = formatExpire(info.expireAt);
     const danmakuCount = Number(info.danmakuCount) || 0;
+    /** 有没有**单独的音轨**（B站这类音视频分离的）：有就 <video muted> + <audio> 同时播 */
+    const hasAudio = typeof info.audioPath === 'string' && info.audioPath.length > 0;
     const duration = formatDuration(info.durationSeconds);
     const script = PLAYER_SCRIPT.split('__KKK_TOKEN__').join(token);
     const stats = [
@@ -338,7 +343,12 @@ function renderPlayerPage(info) {
         + '  </div>\n'
         + '  <div class="player">\n'
         + '    <div class="video-wrap" id="videoWrap">\n'
-        + '      <video id="video" src="/kkk/player/' + token + '/video" preload="metadata" playsinline webkit-playsinline></video>\n'
+        /**
+         * 音视频分离时：视频**静音**播画面，声音交给下面这个 <audio> 一起播
+         * （用户要求：默认不在服务器合成，浏览器端同时播放即可）。
+         */
+        + '      <video id="video" src="/kkk/player/' + token + '/video" preload="metadata" playsinline webkit-playsinline' + (hasAudio ? ' muted' : '') + '></video>\n'
+        + (hasAudio ? '      <audio id="audioTrack" src="/kkk/player/' + token + '/audio" preload="auto"></audio>\n' : '')
         + '      <canvas id="danmaku"></canvas>\n'
         + '      <div id="notice" class="notice" hidden></div>\n'
         + '      <button type="button" class="bigplay" id="bigPlay" aria-label="播放">' + ICON.play + '</button>\n'
@@ -384,9 +394,23 @@ function renderPlayerPage(info) {
          * 放在播放器下面单独一条 —— 作品信息可能缺（那时不会渲染操作按钮排），下载入口不能跟着一起消失。
          */
         + '  <div class="downbar">'
-        + '<a class="dlbtn" id="downloadBtn" href="/kkk/player/' + token + '/video?download=1" download>'
-        + ICON.download + '<span>下载视频</span></a>'
-        + '<span class="dlhint">保存到本机（原画质，不重新编码）</span></div>\n'
+        + (hasAudio
+            /**
+             * 音视频分离：给两个「分别下载」+ 一个「服务器合成后下载」。
+             * 分别是秒下（就是两个原文件），合成那条第一次点要等一两秒（服务器跑一次 ffmpeg -c copy）。
+             */
+            ? '<a class="dlbtn" href="/kkk/player/' + token + '/video?download=1" download>'
+                + ICON.download + '<span>下载画面</span></a>'
+                + '<a class="dlbtn" href="/kkk/player/' + token + '/audio?download=1" download>'
+                + ICON.download + '<span>下载声音</span></a>'
+                + '<a class="dlbtn main" href="/kkk/player/' + token + '/merged?download=1" download>'
+                + ICON.download + '<span>合成后下载</span></a>'
+                + '<span class="dlhint">画面与声音是分开的两条流：前两个直接下载，最后一个由服务器合成成一个视频（第一次要等一两秒）；'
+                + '想在播放器里看就直接播放，声音会自动跟上</span>'
+            : '<a class="dlbtn" id="downloadBtn" href="/kkk/player/' + token + '/video?download=1" download>'
+                + ICON.download + '<span>下载视频</span></a>'
+                + '<span class="dlhint">保存到本机（原画质，不重新编码）</span>')
+        + '</div>\n'
         + linkRow + '\n'
         + (actions ? '  <div class="actions">' + actions + '</div>\n' : '')
         + (info.localOnly
@@ -579,6 +603,14 @@ const PLAYER_SCRIPT = [
     "  var notice = document.getElementById('notice')",
     "  var video = document.getElementById('video')",
     "  var canvas = document.getElementById('danmaku')",
+    "  /**",
+    "   * 单独的音轨（B站这类音视频分离的）。有它的时候：",
+    "   *   - 视频元素是 muted 的（只出画面），声音由这个 <audio> 出；",
+    "   *   - 播放 / 暂停 / 拖动进度都要**带着它一起**，否则声音会跟画面错开。",
+    "   */",
+    "  var audioTrack = document.getElementById('audioTrack')",
+    "  /** 音量控制作用在谁身上：有独立音轨就是音轨，否则是视频自己 */",
+    "  var soundEl = audioTrack || video",
     "  var toggle = document.getElementById('dmOn')",
     "  var countEl = document.getElementById('dmCount')",
     "  var settingsBtn = document.getElementById('dmSettingsBtn')",
@@ -763,6 +795,8 @@ const PLAYER_SCRIPT = [
     "      cursor++",
     "      guard++",
     "    }",
+    "    // 音画同步：偏差超过 0.25 秒就拉回来（长时间播放 / 卡顿后必须对一次）",
+    "    if (audioTrack && !video.paused && !video.ended && !video.seeking) alignAudio()",
     "    draw(dt, now)",
     "  }",
     "",
@@ -967,12 +1001,34 @@ const PLAYER_SCRIPT = [
     "    })",
     "  }",
     "",
+    "  /** 把音轨拉到和画面同一个位置（拖动 / 卡顿时对表） */",
+    "  function alignAudio () {",
+    "    if (!audioTrack) return",
+    "    try {",
+    "      if (Math.abs((audioTrack.currentTime || 0) - video.currentTime) > 0.25) audioTrack.currentTime = video.currentTime",
+    "    } catch (error) { /* 还没加载好就等下一帧 */ }",
+    "  }",
+    "",
+    "  function playAudio () {",
+    "    if (!audioTrack) return",
+    "    alignAudio()",
+    "    var started = audioTrack.play()",
+    "    if (started && started.catch) started.catch(function () { /* 画面已经在放，声音起不来就先算了 */ })",
+    "  }",
+    "",
+    "  function pauseAudio () {",
+    "    if (!audioTrack) return",
+    "    try { audioTrack.pause() } catch (error) { /* 忽略 */ }",
+    "  }",
+    "",
     "  function togglePlay () {",
     "    if (video.paused || video.ended) {",
     "      var started = video.play()",
     "      if (started && started.catch) started.catch(function () { showNotice('浏览器拦住了自动播放，点一下画面中间的播放按钮就行') })",
+    "      playAudio()",
     "    } else {",
     "      video.pause()",
+    "      pauseAudio()",
     "    }",
     "  }",
     "",
@@ -984,22 +1040,34 @@ const PLAYER_SCRIPT = [
     "  }",
     "",
     "  function syncMute () {",
-    "    if (muteBtn) muteBtn.classList.toggle('is-muted', video.muted || video.volume === 0)",
+    "    if (muteBtn) muteBtn.classList.toggle('is-muted', soundEl.muted || soundEl.volume === 0)",
     "  }",
     "",
-    "  video.addEventListener('play', syncPlayState)",
-    "  video.addEventListener('pause', syncPlayState)",
-    "  video.addEventListener('ended', syncPlayState)",
+    "  video.addEventListener('play', function () { syncPlayState(); playAudio() })",
+    "  video.addEventListener('pause', function () { syncPlayState(); pauseAudio() })",
+    "  video.addEventListener('ended', function () { syncPlayState(); pauseAudio() })",
     "  video.addEventListener('timeupdate', drawProgress)",
     "  video.addEventListener('progress', drawProgress)",
     "  video.addEventListener('durationchange', drawProgress)",
     "  video.addEventListener('loadedmetadata', drawProgress)",
     "  video.addEventListener('volumechange', syncMute)",
+    "  // 拖动进度（含键盘 / 快进）：画面跳完马上把音轨对齐，不然会差出好几秒",
+    "  video.addEventListener('seeked', alignAudio)",
+    "  if (audioTrack) {",
+    "    audioTrack.addEventListener('volumechange', syncMute)",
+    "    // 音轨自己卡住 / 被系统暂停时，跟着画面走",
+    "    audioTrack.addEventListener('pause', function () { if (!video.paused && !video.ended) playAudio() })",
+    "    audioTrack.addEventListener('error', function () { showNotice('声音加载失败，画面继续播放（可以在下面单独下载声音）') })",
+    "  }",
     "  if (playBtn) playBtn.addEventListener('click', togglePlay)",
     "  if (bigPlay) bigPlay.addEventListener('click', togglePlay)",
     "  // 点画面中间也能播放 / 暂停（弹幕 canvas 是 pointer-events:none，点它等于点在 video 上）",
     "  video.addEventListener('click', togglePlay)",
-    "  if (muteBtn) muteBtn.addEventListener('click', function () { video.muted = !video.muted; syncMute() })",
+    "  if (muteBtn) {",
+    "    // 有独立音轨时，静音 / 取消静音作用在音轨上（视频一直是 muted 的）",
+    "    if (audioTrack) soundEl.muted = true",
+    "    muteBtn.addEventListener('click', function () { soundEl.muted = !soundEl.muted; syncMute() })",
+    "  }",
     "",
     "  function isFullscreen () { return !!(document.fullscreenElement || document.webkitFullscreenElement) }",
     "",