网页提词器：录视频不用背稿，滚动字幕速度随意调

把演讲稿贴进去，点「播放」，文字就像字幕一样自己往上滚，滚到哪一行哪一行加粗高亮，速度、字号、行距、颜色随手调；录视频时把面板藏掉、全屏一开，就是一个干净的提词器。打开就自带一段示例文稿，先看成品，再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。

这个工具做什么

它把「录视频看稿」这件事做成一个浏览器里的滚动字幕屏：

自动滚动：播放后文字用 requestAnimationFrame 平滑上滚，滚到哪一行哪一行就加粗、变亮，前后行渐隐。
速度/字号/行距：三个滑块分别控制滚动像素速度、字体大小和行距，改完立即生效。
文字颜色：颜色选择器一键换色，浅色背景选深字、深色背景选浅字都方便。
暂停 / 回到开头：随时暂停续播，一键回到第一行；还支持拖动面板上下手动微调一行。
隐藏面板 + 全屏：把左侧控制面板收起、进入浏览器全屏，只留干净的提词字幕区。
键盘快捷键：空格=播放/暂停，R=回到开头，H=隐藏面板，F=全屏，方向键微调，Esc 收起面板。
示例文稿：打开就有一段「专注」主题的示例稿，点播放立刻能看效果。

码道开通（免费体验版）

开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz
弹窗「请选择要进入的版本」→ 点击 体验版
首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
弹窗「临时凭据自动配置」→ 点击同意，沙箱自动创建

进入 AI 开发者空间主界面后，先等左侧菜单加载出来，再找到 CodeArts，点击它右侧的浏览器图标，打开码道 WebUI 对话窗口：

打开后码道 WebUI 底部输入框提示「尽管吩咐，我来帮你搞定」：

小贴士：体验版沙箱 3 小时后自动重置，生成完记得把 index.html 下载保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送（模型默认 glm-5.2，可直接用）：

开发一个「网页提词器」网页应用：用户可以把演讲稿粘贴到文本框，点击播放后文字像字幕一样自动向上滚动；支持调节滚动速度、字号大小、行距和文字颜色，支持暂停/继续、回到开头、按行高亮当前正在播报的内容；界面简洁美观，适合录视频时放在屏幕下方使用，单个网页打开即用。完成后用部署功能部署成可访问的网页应用，并告诉我访问地址。

这轮码道具体做了什么

不是复述通用 AI 能力，而是它在这篇项目里的实际动作：

在 /workspace/teleprompter 下创建项目目录；
端口检测时同样遇到 PYTHONHOME 指向损坏 python3.12 的问题，先试 python3、再试纯 bash 的 detect_free_port 函数扫描空闲端口；
写出 index.html（约 8.5KB 前端）加一个小型 server.js（Node 静态服务器）；
检测到 3005 端口空闲，用 /root/runtime/codearts/nodejs22/bin/node 启动 server.js，curl 自检返回 HTTP 200 后拼出内部访问地址。

代码亮点

以下是 index.html 里值得关注的设计思路和实现细节。

1. RAF + 时间差 = 丝滑匀速滚动

不用定时器硬加位移，而是用 requestAnimationFrame 拿到每一帧的时间差，再乘以速度，帧率波动也不会一顿一顿：

function tick(now) {
  if (!playing) return;
  if (!lastTime) lastTime = now;
  var dt = (now - lastTime) / 1000;
  lastTime = now;

  offset += speed * dt;
  if (offset >= maxOffset) { // 到末尾自动暂停
    offset = maxOffset; updateTransform(); pause();
    return;
  }
  updateTransform(); updateHighlight(); updateProgress();
  rafId = requestAnimationFrame(tick);
}

2. 中心行高亮：一行加粗，前后渐隐

每次滚动都找出视口中心最近的那一行，按距离给透明度打折扣，当前行加粗、远处的行变淡：

function updateHighlight() {
  var vh = viewport.clientHeight;
  var target = offset + vh / 2;
  var idx = 0, best = Infinity;
  for (var i = 0; i < lines.length; i++) {
    var center = lines[i].offsetTop + lines[i].offsetHeight / 2;
    var d = Math.abs(center - target);
    if (d < best) { best = d; idx = i; }
  }
  for (var j = 0; j < lines.length; j++) {
    var dist = Math.abs(j - idx);
    var op = 1 - dist * 0.32;
    if (op < 0.12) op = 0.12;
    lines[j].style.opacity = op.toFixed(3);
    lines[j].style.fontWeight = (j === idx) ? "700" : "400";
  }
}

3. 滚动终点按最后一行校准

maxOffset 不是拍脑袋，而是算「最后一行中心到视口中心」的距离，保证滚到底时最后一行正好停在中间：

function computeMaxOffset() {
  if (lines.length === 0) { maxOffset = 0; return; }
  var last = lines[lines.length - 1];
  var vh = viewport.clientHeight;
  maxOffset = Math.max(0, last.offsetTop + last.offsetHeight / 2 - vh / 2);
}

4. 隐藏面板 = 干净的录制界面

左侧控制面板整个加 hidden class 收起来，只留一个「显示面板」的小按钮，需要时再点回来：

function togglePanel() {
  var hidden = panel.classList.toggle("hidden");
  showPanelBtn.classList.toggle("show", hidden);
}

5. 键盘快捷键做「免鼠标」操作

空格播放/暂停、R 回开头、H 隐藏面板、F 全屏，方向键微调一行；当焦点在输入框里时自动跳过，不会误伤打字：

document.addEventListener("keydown", function (e) {
  var tag = (e.target.tagName || "").toLowerCase();
  var inField = (tag === "textarea" || tag === "input");
  if (e.code === "Space") {
    if (inField) return;
    e.preventDefault(); togglePlay();
  } else if (e.key === "ArrowDown") {
    if (inField) return;
    e.preventDefault(); nudge(1);
  }
});

直接下载试玩

本次生成的项目是 index.html + server.js 两个文件，前端逻辑零依赖，仅附带一个小型 Node 静态服务器。把目录保存到本地后，双击 index.html 可直接打开；也可用任意静态服务器跑起来。源码同步到公开 Demo Park 仓库：

Demo Park 仓库：https://atomgit.com/deli007/demo_park
本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-teleprompter

总结

网页提词器把「滚动 + 高亮 + 可调」三件事收进一个页面：requestAnimationFrame 按时间差做匀速滚动，中心行检测实现当前行加粗渐隐，maxOffset 按最后一行校准滚动终点，配合隐藏面板和键盘快捷键，录视频时就是一个干净的字幕屏。技术上主要是 RAF 动画循环、DOM 行渲染与 opacity 渐变，以及键盘事件路由，前端逻辑零依赖，仅附带一个小型 Node 静态服务器。后续还可以加「镜像翻转显示」「滚动速度曲线」「本地保存多份稿子」「自动按标点断句」等。

如果还没用过码道，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

posted @ 2026-09-04 09:08 新科技观察员阅读(6) 评论(0) 收藏举报

刷新页面返回顶部