前言

做口播视频时，我经常遇到一个尴尬情况：要么盯着稿子念，眼神在镜头前飘忽不定；要么自由发挥，说着说着就忘了下一句。

传统匀速提词器我用过不少，但效果不理想——文字滚动是固定的，人得跟着节奏走。稍微卡顿一下，文字就跑了；停顿思考，又得等它慢下来。录制一段 5 分钟的口播，经常因为反复卡壳重拍一个多小时。为了解决这个问题，我开发了 PipTeleprompter --- 语音跟随提词器。

它用 Web Speech API 实时识别口播内容，结合 N-Gram 模糊匹配算法实现"念到哪、字滚到哪"。临时停顿、跳读、倒装，提词光标都能自动校准。

另外画中画悬浮置顶、硬件分光镜镜像翻转、60FPS 匀速滚屏，这些功能都是为了一个目标：让注意力始终在表达本身，而不是在"盯文字"上。

已经实现网页端并且开源！！！

源码仓库： GitHub - yibeigen/PipTeleprompter

直达：跟随提词器

1. 创作者的痛点与提词器的进阶进化

1.1. 视频口播与直播中的“卡顿与眼神漂移”困境

做视频口播、直播推流或者线上会议分享时，我经常陷入一个令人苦恼的怪圈。

当我的精力集中在记忆台词上时，镜头前表达的语气就会变得生硬僵硬；而一旦放任自己自由发挥，又极易出现语无伦次、偏离主题甚至忘词卡顿的情况。

1.1.1. 传统匀速提词器的天然缺陷

为了解决忘词问题，我最初尝试了市面上各种传统的匀速滚动提词软件。

但在实际使用中，这类软件反而带来了更严重的二次干扰：

匀速滚动的文字就像一台机械无情的机器，强制我去适应它的节奏。
中途只要因临时思考语速稍微放慢，文字就会直接滚出视野；如果说话稍微提速，又得停下来尴尬地等待文字滚动。
为了盯住滚动的文字行，双眼在镜头前呈现出极不自然的“上下或左右扫视”痕迹，眼神漂移非常明显。

1.1.2. 录制过程中的心理负担与重拍成本

这种传统提词方式不仅没有降低口播门槛，反而增加了极大的心理负担。

一段原本 5 分钟的口播视频，我经常因为中途卡顿或眼神漂移而反复重拍十几次，单视频的录制成本高达数小时。

正是这个切身痛点，让我下定决心开发一款真正能听懂人类语速、悬浮在桌面最前层的智能提词工具——PipTeleprompter。

1.2. 智能语音跟随模式的核心解法

智能语音跟随提词器的核心思路非常直观：将节奏控制权重新交还给讲述者。

系统不再依靠机械定时器滚动，而是直接通过浏览器原生的语音识别能力实时监听说话内容。

结合提取的语音关键词与台词文本进行高精度匹配，实现“我说一句，字滚一句”的效果。

如果在录制或直播过程中停顿思考、临时补充解释、甚至前后跳读，提词光标都能自动精准定位并平滑重置。

2. PipTeleprompter 的产品定位与适用场景

2.1. 真实使用场景切入

在做 PipTeleprompter 的设计时，我针对日常最频繁的几个实际场景做了专项优化：

短视频与自媒体口播：直接贴在摄像头正下方或调出画中画，眼神自然对视镜头，告别忘词。
OBS 直播推流与线上会议：画中画悬浮窗独立置顶于 OBS、腾讯会议、Zoom 或抖音直播助手上方，边看台词边观察直播间互动。
专业分光镜硬件适配：原生支持水平与垂直镜像翻转，直接投射到专业分光镜硬件玻璃上。
表达力与语感训练：配合台词文本进行跟读练习，实时反馈当前朗读进度与耗时预估。

2.2. 双模式提词机制对比

为了保障灵活性，项目同时保留了“智能语音跟随模式”与“60FPS 匀速滚屏模式”。

下表展示了两种模式的核心差异与适用场景：

对比维度	传统匀速滚动模式	智能语音跟随模式 (PipTeleprompter)
驱动机制	`requestAnimationFrame` 机械定时推进	浏览器 Web Speech API 实时语音流转码与文本模糊匹配
节奏掌控	人适应软件设定速度（极易脱节）	软件实时适应人的说话语速（完全自如）
眼神表现	眼睛跟随滚动文字频繁漂移	焦点固定在黄金中轴线，眼神自然对视镜头
容错能力	无容错，中途停顿即错位	高强容错，支持中途停顿、语序微调与跳读
悬浮能力	普通网页视口限定	基于 Canvas 与 Web PiP API 独立置顶于桌面最前方
数据安全	部分工具依赖云端解析	100% 纯前端本地运行，台词数据绝不上云

2.3. 纯前端零后端架构设计理念

在架构选型上，我坚持了 100% 纯前端无服务器（Zero-Server Pure Frontend） 架构。

这样设计带来了三个非常实用的优势：

数据隐私绝对安全：演讲文稿、商业汇报或未公开台词均为敏感内容。纯前端架构确保所有文本仅保存在本地浏览器端（LocalStorage），绝不传输到任何服务器。
双击即用与零部署成本：没有后端 Node.js 接口依赖，无需配置数据库或云 API 密钥。双击 双击启动提词器.bat 或静态页面即可瞬间启动。
零延迟与本地高效渲染：借助 Chrome 内置的 Web Speech 引擎和 GPU 加速，避免了网络请求延迟，视觉滚动非常流畅。

3. PipTeleprompter 纯前端架构总览

3.1. 模块化分层设计

在项目结构上，我将 PipTeleprompter 拆分为高度解耦的四大模块：语音识别引擎、模糊匹配算法、画中画控制器与主 UI 控制层。

下图展示了系统的核心模块组成与数据流转逻辑：

整体数据流转过程为：

麦克风捕获的音频流经 SpeechEngine 转换为实时文本流。
识别文本注入 TextMatcher 模块，通过滑动窗口算法计算出当前的字符匹配索引。
索引更新事件广播给 UI 渲染层与 PipPrompter 画中画悬浮窗，同步触发沉静式滚动与高亮。

3.2. 四大核心技术模块解析

3.2.1. 语音识别引擎 (SpeechEngine)

封装浏览器原生 Web Speech API (webkitSpeechRecognition)。

负责处理麦克风权限授权、自动重连机制以及实时 interim（临时识别）与 final（最终识别）数据流的处理。

3.2.2. 模糊匹配算法 (TextMatcher)

项目的核心算法模块。

基于 N-Gram 滑动窗口机制与字符串相似度比对，将识别到的语音切片与台词全文进行匹配，精准计算当前读到的字符位置。

3.2.3. 画中画悬浮窗 (PipPrompter)

利用 HTML5 Canvas 动态渲染 + Web PiP API (HTMLVideoElement.requestPictureInPicture()) 实现。

能够生成一个独立于主网页的桌面置顶悬浮窗，可以自由拖拽至 OBS、直播助手或摄像头下方。

3.2.4. 主界面控制器 (App Core)

负责主视口 DOM 的构建、字体大小与颜色主题切换、键盘快捷键监听以及 LocalStorage 防抖草稿保存。

4. 纯前端无服务器架构关键代码实现

4.1. 极简入口 DOM 结构设计

为了保证加载速度，页面采用了极简的语义化 DOM 结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PipTeleprompter - 智能语音跟读与画中画悬浮提词器</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="theme-light">
    <!-- 主控制栏 -->
    <header class="app-header">
        <div class="logo">PipTeleprompter</div>
        <div class="controls">
            <button id="btn-toggle-speech" class="btn primary">开启语音跟随</button>
            <button id="btn-toggle-pip" class="btn secondary">桌面悬浮窗</button>
        </div>
    </header>
    <!-- 提词主视口 -->
    <main class="teleprompter-container">
        <div id="prompter-viewport" class="viewport">
            <div id="prompter-content" class="content"></div>
        </div>
    </main>
    <script src="js/speech-engine.js"></script>
    <script src="js/text-matcher.js"></script>
    <script src="js/pip-prompter.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

4.2. 模块化事件驱动调度系统

在 js/app.js 中，各个模块通过事件进行通信解耦。

以下代码展现了语音识别触发匹配计算、进而同步更新主视口与画中画悬浮窗的核心调用过程：

// 初始化核心模块
const speechEngine = new SpeechEngine();
const textMatcher = new TextMatcher();
const pipPrompter = new PipPrompter();
// 初始化脚本台词
function initializeScript(fullText) {
    textMatcher.setScript(fullText);
    renderFormattedText(fullText);
}
// 绑定语音识别结果回调
speechEngine.onResult((transcript, isFinal) => {
    // 调用模糊匹配算法计算位置索引
    const matchResult = textMatcher.match(transcript);
    
    if (matchResult && matchResult.index !== -1) {
        // 高亮当前读取节点
        highlightCurrentChar(matchResult.index);
        
        // 平滑滚动至视口黄金中轴线
        scrollToIndex(matchResult.index);
        
        // 实时同步至桌面画中画悬浮窗
        if (pipPrompter.isOpen()) {
            pipPrompter.syncProgress(matchResult.index);
        }
    }
});

4.3. 客户端数据存储与草稿持久化

为了防止误关网页导致输入的台词丢失，我实现了基于 LocalStorage 的防抖草稿保存机制：

class LocalStorageManager {
    constructor(storageKey = 'pip_teleprompter_draft') {
        this.key = storageKey;
    }
    // 保存台词草稿
    saveDraft(content) {
        try {
            localStorage.setItem(this.key, JSON.stringify({
                text: content,
                updatedAt: Date.now()
            }));
        } catch (e) {
            console.warn('本地存储失败:', e);
        }
    }
    // 读取台词草稿
    loadDraft() {
        const data = localStorage.getItem(this.key);
        if (!data) return '';
        try {
            const parsed = JSON.parse(data);
            return parsed.text || '';
        } catch (e) {
            return '';
        }
    }
}

5. 界面设计与交互效果展示

在界面视觉上，我追求极简无干扰的现代感设计。

支持亮色 White 与暗黑 Dark 主题无缝切换，视口采用了大字号与层次鲜明的高亮展示。

下图展示了软件网页端与桌面画中画悬浮窗的真实运行效果：

界面亮点设计包含：

顶部状态栏直观展现麦克风监听状态与匹配灵敏度设置。
中央提词视口固定在 1/3 黄金中轴线，正在读取的语句高亮突出，未读与已读内容通过透明度区分。
独立调出的桌面画中画窗口可以浮在 OBS 或任何软件上方，真正做到“眼神直视摄像头，台词滚动随心跟”。

6. 开发总结与后续技术演进路线

6.1. 方案选型与落地心得

在开发 PipTeleprompter 的过程中，我深切体会到原生 Web API 的强大。

不需要复杂的后端支撑，仅凭借 Web Speech API、Web PiP API 以及纯前端算法，就能打造出一款实用且流畅的工具。

纯前端无服务器架构不仅实现了零成本部署与绝对的隐私安全，也为视频创作者和直播主播带来了实打实的便利。

告别忘词与眼神飘忽：智能语音跟随提词器的设计初衷与核心架构