手把手教你打造会实时唠嗑的浏览器大肥鱼
近期，国内互联网上，一款名为「蓝色大肥鱼」的虚拟形象迅速走红，成为不少爱好者追捧的对象。有人将其做成桌面宠物放在屏幕右下角，有人把它作为赛博形象接入社交软件，甚至在视频平台的评论区掀起了一场热闹的「赛博鱼灾」。
既然大家都想把它真正“养”起来，今天我们就带大家更进一步，教大家在浏览器里制作一款能实时语音互动、嘴巴会随声音开合、还能随时插话打断的专属大肥鱼。
这种面对面的语音互动，最大的难点在于实时感的实现。为了避免从零搭建底层架构的麻烦，我们可以借助实时通信与对话式 AI 能力，把音频传输、说话轮次判断、实时打断等核心功能交给现成的开发工具包，快速将这些能力接入前端应用。
接下来，我们将基于这套系统，分四步完成从配置国内模型到挂载角色动效的完整过程，手把手带大家把专属大肥鱼跑起来。
一、实现的核心原理
在浏览器里和大肥鱼互动，背后由对话式 AI 引擎组织对话，实时通信工具负责传输数据，前端则负责角色呈现，具体分为四个部分：
- 对话流程与轮次调度：串联语音识别、大模型和语音合成，判断用户何时讲完、何时插话，让大肥鱼及时接话，也能在被打断时停止回复。
- 音频传输：智能体加入通信频道，接收用户的麦克风声音，再把合成的回复传回浏览器，保障低延迟、回声消除和弱网抗丢包的能力。
- 字幕与状态传递：引擎输出的字幕和对话状态通过工具传到前端，更新对话记录及倾听、思考、说话等状态提示。
- 角色与动作控制：渲染大肥鱼的形象，根据对话状态切换动作，让角色表现与对话过程相配合。
如果全靠自己从头开发这几个部分，光是调通音频流传输和打断状态机就要耗费不少时间。而借助现成的开发工具包，开发者可以更快搭建出实时语音互动的应用。
二、具体实现步骤
我们分为四步来完成，改动极少，仅需调整少量配置即可：
配置国内环境 → 跑通首轮通话 → 调优角色参数 → 挂载动态形象
第一步：准备模板并切换国内配置
我们直接基于官方 Next.js 模板起步，运行环境要求 Node.js 22 或更高版本，Windows 用户建议使用 PowerShell 7+ 以避免脚本报错。
安装依赖后，官方模板默认配置的是海外节点和供应商，在国内直接启动会报错，需要修改配置文件：
- 将区域改成中国站，选用国内的语音识别工具，比如自研的凤鸣识别，新账号有免费体验额度，无需额外申请密钥。
- 大模型和语音合成侧可接入国内的模型和音色，比如阶跃星辰的模型和音色。
之后在项目根目录新建配置文件，填入国内服务的相关密钥，保存后确认没有残留旧默认值即可。
第二步：启动服务并测试通话
在给大肥鱼赋予角色前，先验证基础声学链路是否正常，启动本地服务后，在独立的浏览器标签页打开对应地址，注意必须是独立标签页才能调用麦克风。
允许麦克风权限后，点击启动会话，几秒后会听到开场白，此时可以对着麦克风说话，查看页面上的转录和状态提示，如果能准确转写出语音并得到回复，说明基础链路正常。
第三步：调整角色人设和轮次参数
默认助手的设定不符合大肥鱼的形象，需要修改配置文件中的系统提示词，给大肥鱼设定爱吃白饭、说话亲切的人设，并且要求回复为纯口语文字，避免出现 Markdown 语法或表情。
同时调整轮次检测参数，把语言显式设为中文，支持中英混读，并且把静音窗口放宽到 900 毫秒，避免说话换气时被误判为讲完而抢答。
第四步：挂载动态形象
前三步完成后，需要给大肥鱼挂载动态形象，替换原本的状态动效球。复用官方工具包中的实时状态信息，新建角色渲染组件，根据对话状态切换动作，比如待机、倾听、思考、说话等状态，并且在安静时锁定双唇闭合，避免不合时宜的动作。
三、进阶内容
1. 更换大模型
如果需要更换大模型，无需改动前面的业务代码，只需在配置文件中修改三行变量即可，比如换成通义千问或其他模型。
这里有个实测经验：实时语音场景不要选带长思维链的推理模型，这类模型会导致回复延迟，影响互动体验，建议用非推理模型，半秒左右就能生成短句，几乎没有延迟。
2. 做成桌面宠物
如果想把大肥鱼做成桌面宠物，常驻在 macOS 桌面，可以从对应的桌面宠物模板开始，按照说明把它放在自己的桌面上，随时互动。
回头看，以前在浏览器里做实时语音角色，大家总觉得门槛很高，而现在有了现成的工具包，开发者可以把更多心思放在角色和玩法上，无需从零搭建底层架构。
想继续动手的话，可以从相关开发工具的上手指南开始，了解如何搭建实时应用，本文用到的模板和工具也整理在相关资源中，大家可以尝试打造自己的专属大肥鱼。
