项目背景在医疗信息系统的前端项目中我们需要为 AI 助手模块实现语音交互和富文本展示功能。本文将重点分享语音转文字和Markdown 渲染两个核心功能的实现经验。一、语音转文字功能实现1.1 技术选型经过调研对比最终选择recorder-core作为录音库方案优点缺点原生 MediaRecorder零依赖不支持 MP3格式受限recorder-core支持多种格式轻量需要额外加载编码器Web Audio API高度可控复杂度高1.2 核心实现1.2.1 初始化配置importRecorderfromrecorder-core;importrecorder-core/src/engine/mp3;importrecorder-core/src/engine/mp3-engine;// 创建录音实例this.recorderRecorder({type:mp3,// 输出格式sampleRate:16000,// 采样率bitRate:128,// 比特率});1.2.2 录音流程控制录音功能需要严格遵循open → start → stop的调用顺序// 打开录音设备必须在用户交互中调用this.recorder.open((){// 打开成功this.recorder.start();},(msg,isUserNotAllow){// 打开失败权限问题或设备异常if(isUserNotAllow){this.$message.error(请在浏览器设置中允许麦克风权限);}});// 停止录音并获取数据this.recorder.stop((blob,duration){// blob 为 MP3 格式的二进制数据this.uploadRecording(blob);});关键注意事项open()方法是异步的必须在回调中调用start()必须在用户交互事件如点击中触发否则浏览器会阻止权限请求1.2.3 文件上传与接口调用asyncuploadRecording(mp3Blob){// 构建 FormDataconstformDatanewFormData();formData.append(file,mp3Blob,recording.mp3);// 上传文件constuploadResponseawaituploadFileApi(formData);constaudioUrluploadResponse.data[0].fullUrl;// 调用语音转文字接口constrecognizeResponseawaitflashRecognizer({audioUrl:audioUrl,chatId:Date.now().toString()});// 将结果显示在输入框this.inputMessagerecognizeResponse.data.text;}1.3 常见问题与解决方案问题原因解决方案start失败未open调用顺序错误在open()回调中调用start()未加载mp3编码器缺少编码器文件引入mp3-engine模块录音无声音权限未授予添加权限请求提示二、Markdown 渲染方案2.1 方案对比与选择在实现过程中我们尝试了三种不同的方案方案一自定义正则解析formatContent(content){// 处理加粗lethtmlcontent.replace(/\*\*(.?)\*\*/g,strong$1/strong);// 处理换行htmlhtml.replace(/\n/g,br);// ... 更多规则returnhtml;}优点零依赖轻量缺点需要维护大量正则不支持复杂格式如表格方案二使用 marked 库npminstallmarked4.3.0import{marked}frommarked;formatContent(content){returnmarked(content);}问题Vue2 项目的 webpack 配置不支持 ES Module导致编译错误方案三使用 vue-markdown 组件最终选择npminstallvue-markdowntemplatedivclassai-contentvue-markdown:sourcecontent/vue-markdown/div/templatescriptimportVueMarkdownfromvue-markdown;exportdefault{components:{VueMarkdown},}/script优点专为 Vue 设计开箱即用支持完整 Markdown 语法2.2 样式定制为了适配项目的 UI 风格需要对 vue-markdown 生成的标签进行样式覆盖.ai-content{line-height:1.8;}/* 标题样式 */.ai-content h1, .ai-content h2, .ai-content h3, .ai-content h4, .ai-content h5, .ai-content h6{margin:2px 0;font-weight:600;}2.3 支持的 Markdown 格式语法效果**加粗**加粗文本*斜体*斜体文本- 列表项无序列表1. 列表项有序列表---分隔线|表头||内容|表格代码行内代码三、功能整合与交互设计3.1 界面布局3.2 状态管理data(){return{chatId:,// 会话IDmessages:[],// 消息列表inputMessage:,// 输入内容loading:false,// 发送loadingisRecording:false,// 录音状态recordingLoading:false,// 录音处理loading};}3.3 交互流程用户点击录音 → 权限请求 → 开始录音(isRecordingtrue) ↓ 用户点击停止 → 停止录音 → 上传文件 → 语音转文字 ↓ 结果显示在输入框 → 用户点击发送 → 调用AI接口 ↓ AI回复 → Markdown渲染展示四、技术总结与最佳实践4.1 语音转文字要点权限处理必须在用户交互中请求麦克风权限异步控制严格遵循 open → start → stop 的调用顺序错误处理捕获权限拒绝、设备异常等情况格式转换使用 recorder-core 的 MP3 编码器确保兼容性4.2 Markdown 渲染要点方案选择Vue 项目优先使用 vue-markdown 组件样式隔离使用 scoped CSS 避免全局样式污染性能优化避免在大型文档中频繁更新 Markdown 内容安全性对用户输入的 Markdown 进行 XSS 过滤关键词Vue2、语音转文字、Markdown、recorder-core、vue-markdown
AI问诊助手开发经验总结：语音转文字与 Markdown 渲染实战
发布时间：2026/6/13 13:10:51
项目背景在医疗信息系统的前端项目中我们需要为 AI 助手模块实现语音交互和富文本展示功能。本文将重点分享语音转文字和Markdown 渲染两个核心功能的实现经验。一、语音转文字功能实现1.1 技术选型经过调研对比最终选择recorder-core作为录音库方案优点缺点原生 MediaRecorder零依赖不支持 MP3格式受限recorder-core支持多种格式轻量需要额外加载编码器Web Audio API高度可控复杂度高1.2 核心实现1.2.1 初始化配置importRecorderfromrecorder-core;importrecorder-core/src/engine/mp3;importrecorder-core/src/engine/mp3-engine;// 创建录音实例this.recorderRecorder({type:mp3,// 输出格式sampleRate:16000,// 采样率bitRate:128,// 比特率});1.2.2 录音流程控制录音功能需要严格遵循open → start → stop的调用顺序// 打开录音设备必须在用户交互中调用this.recorder.open((){// 打开成功this.recorder.start();},(msg,isUserNotAllow){// 打开失败权限问题或设备异常if(isUserNotAllow){this.$message.error(请在浏览器设置中允许麦克风权限);}});// 停止录音并获取数据this.recorder.stop((blob,duration){// blob 为 MP3 格式的二进制数据this.uploadRecording(blob);});关键注意事项open()方法是异步的必须在回调中调用start()必须在用户交互事件如点击中触发否则浏览器会阻止权限请求1.2.3 文件上传与接口调用asyncuploadRecording(mp3Blob){// 构建 FormDataconstformDatanewFormData();formData.append(file,mp3Blob,recording.mp3);// 上传文件constuploadResponseawaituploadFileApi(formData);constaudioUrluploadResponse.data[0].fullUrl;// 调用语音转文字接口constrecognizeResponseawaitflashRecognizer({audioUrl:audioUrl,chatId:Date.now().toString()});// 将结果显示在输入框this.inputMessagerecognizeResponse.data.text;}1.3 常见问题与解决方案问题原因解决方案start失败未open调用顺序错误在open()回调中调用start()未加载mp3编码器缺少编码器文件引入mp3-engine模块录音无声音权限未授予添加权限请求提示二、Markdown 渲染方案2.1 方案对比与选择在实现过程中我们尝试了三种不同的方案方案一自定义正则解析formatContent(content){// 处理加粗lethtmlcontent.replace(/\*\*(.?)\*\*/g,strong$1/strong);// 处理换行htmlhtml.replace(/\n/g,br);// ... 更多规则returnhtml;}优点零依赖轻量缺点需要维护大量正则不支持复杂格式如表格方案二使用 marked 库npminstallmarked4.3.0import{marked}frommarked;formatContent(content){returnmarked(content);}问题Vue2 项目的 webpack 配置不支持 ES Module导致编译错误方案三使用 vue-markdown 组件最终选择npminstallvue-markdowntemplatedivclassai-contentvue-markdown:sourcecontent/vue-markdown/div/templatescriptimportVueMarkdownfromvue-markdown;exportdefault{components:{VueMarkdown},}/script优点专为 Vue 设计开箱即用支持完整 Markdown 语法2.2 样式定制为了适配项目的 UI 风格需要对 vue-markdown 生成的标签进行样式覆盖.ai-content{line-height:1.8;}/* 标题样式 */.ai-content h1, .ai-content h2, .ai-content h3, .ai-content h4, .ai-content h5, .ai-content h6{margin:2px 0;font-weight:600;}2.3 支持的 Markdown 格式语法效果**加粗**加粗文本*斜体*斜体文本- 列表项无序列表1. 列表项有序列表---分隔线|表头||内容|表格代码行内代码三、功能整合与交互设计3.1 界面布局3.2 状态管理data(){return{chatId:,// 会话IDmessages:[],// 消息列表inputMessage:,// 输入内容loading:false,// 发送loadingisRecording:false,// 录音状态recordingLoading:false,// 录音处理loading};}3.3 交互流程用户点击录音 → 权限请求 → 开始录音(isRecordingtrue) ↓ 用户点击停止 → 停止录音 → 上传文件 → 语音转文字 ↓ 结果显示在输入框 → 用户点击发送 → 调用AI接口 ↓ AI回复 → Markdown渲染展示四、技术总结与最佳实践4.1 语音转文字要点权限处理必须在用户交互中请求麦克风权限异步控制严格遵循 open → start → stop 的调用顺序错误处理捕获权限拒绝、设备异常等情况格式转换使用 recorder-core 的 MP3 编码器确保兼容性4.2 Markdown 渲染要点方案选择Vue 项目优先使用 vue-markdown 组件样式隔离使用 scoped CSS 避免全局样式污染性能优化避免在大型文档中频繁更新 Markdown 内容安全性对用户输入的 Markdown 进行 XSS 过滤关键词Vue2、语音转文字、Markdown、recorder-core、vue-markdown
（支持资料、图片参考_相关定制）_可以扫码)
的演进与通信机制)
