把演讲稿贴进去点「播放」文字就像字幕一样自己往上滚滚到哪一行哪一行加粗高亮速度、字号、行距、颜色随手调录视频时把面板藏掉、全屏一开就是一个干净的提词器。打开就自带一段示例文稿先看成品再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署上线。这个工具做什么它把「录视频看稿」这件事做成一个浏览器里的滚动字幕屏自动滚动播放后文字用requestAnimationFrame平滑上滚滚到哪一行哪一行就加粗、变亮前后行渐隐。速度/字号/行距三个滑块分别控制滚动像素速度、字体大小和行距改完立即生效。文字颜色颜色选择器一键换色浅色背景选深字、深色背景选浅字都方便。暂停 / 回到开头随时暂停续播一键回到第一行还支持拖动面板上下手动微调一行。隐藏面板 全屏把左侧控制面板收起、进入浏览器全屏只留干净的提词字幕区。键盘快捷键空格播放/暂停R回到开头H隐藏面板F全屏方向键微调Esc 收起面板。示例文稿打开就有一段「专注」主题的示例稿点播放立刻能看效果。码道开通免费体验版开始之前先免费开通码道体验版。不需要装任何软件浏览器就能用https://developer.huaweicloud.com/codeartsco.html?sourcedmzntgwsfsourceaddmzntgwwbwz开通后有三种使用方式WebUI浏览器对话、TUI终端命令行和桌面 IDEIDE 插件。本文用 WebUI 版演示。进入 AI 开发者空间浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_sourceopcsfsqutm_mediumwbwz弹窗「请选择要进入的版本」→ 点击体验版首次使用会跳到华为云登录页扫码登录一次后续浏览器会话复用弹窗「临时凭据自动配置」→ 点击同意沙箱自动创建进入 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.jsNode 静态服务器检测到3005端口空闲用/root/runtime/codearts/nodejs22/bin/node启动server.jscurl自检返回 HTTP 200 后拼出内部访问地址。代码亮点以下是index.html里值得关注的设计思路和实现细节。1. RAF 时间差 丝滑匀速滚动不用定时器硬加位移而是用requestAnimationFrame拿到每一帧的时间差再乘以速度帧率波动也不会一顿一顿functiontick(now){if(!playing)return;if(!lastTime)lastTimenow;vardt(now-lastTime)/1000;lastTimenow;offsetspeed*dt;if(offsetmaxOffset){// 到末尾自动暂停offsetmaxOffset;updateTransform();pause();return;}updateTransform();updateHighlight();updateProgress();rafIdrequestAnimationFrame(tick);}2. 中心行高亮一行加粗前后渐隐每次滚动都找出视口中心最近的那一行按距离给透明度打折扣当前行加粗、远处的行变淡functionupdateHighlight(){varvhviewport.clientHeight;vartargetoffsetvh/2;varidx0,bestInfinity;for(vari0;ilines.length;i){varcenterlines[i].offsetToplines[i].offsetHeight/2;vardMath.abs(center-target);if(dbest){bestd;idxi;}}for(varj0;jlines.length;j){vardistMath.abs(j-idx);varop1-dist*0.32;if(op0.12)op0.12;lines[j].style.opacityop.toFixed(3);lines[j].style.fontWeight(jidx)?700:400;}}3. 滚动终点按最后一行校准maxOffset不是拍脑袋而是算「最后一行中心到视口中心」的距离保证滚到底时最后一行正好停在中间functioncomputeMaxOffset(){if(lines.length0){maxOffset0;return;}varlastlines[lines.length-1];varvhviewport.clientHeight;maxOffsetMath.max(0,last.offsetToplast.offsetHeight/2-vh/2);}4. 隐藏面板 干净的录制界面左侧控制面板整个加hiddenclass 收起来只留一个「显示面板」的小按钮需要时再点回来functiontogglePanel(){varhiddenpanel.classList.toggle(hidden);showPanelBtn.classList.toggle(show,hidden);}5. 键盘快捷键做「免鼠标」操作空格播放/暂停、R 回开头、H 隐藏面板、F 全屏方向键微调一行当焦点在输入框里时自动跳过不会误伤打字document.addEventListener(keydown,function(e){vartag(e.target.tagName||).toLowerCase();varinField(tagtextarea||taginput);if(e.codeSpace){if(inField)return;e.preventDefault();togglePlay();}elseif(e.keyArrowDown){if(inField)return;e.preventDefault();nudge(1);}});直接下载试玩本次生成的项目是index.htmlserver.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?sourcedmzntgwsfsourceaddmzntgwwbwz