基于微信小程序与SenseVoice-Small的实时语音笔记应用开发

📅 发布时间:2026/7/12 14:59:57 👁️ 浏览次数:
基于微信小程序与SenseVoice-Small的实时语音笔记应用开发
基于微信小程序与SenseVoice-Small的实时语音笔记应用开发你有没有过这样的经历开会时奋笔疾书结果会后一看笔记记得乱七八糟关键信息可能还漏了。或者突然有个灵感想用手机记下来但打字速度跟不上思维的速度灵感转瞬即逝。现在我们可以用技术来解决这个问题。今天要聊的就是怎么自己动手做一个微信小程序让它能实时录音然后“秒变”成文字笔记。核心就是用上了开源的语音识别模型SenseVoice-Small它体积小、速度快特别适合放在云端服务里让小程序来调用。整个过程听起来有点技术但别担心我会用最直白的方式带你走一遍从想法到实现的全过程。你会发现把语音变成文字并变成一个可用的工具并没有想象中那么复杂。1. 这个应用能解决什么问题简单说我们想做的是一个“语音速记本”。它的核心工作流程是这样的你在微信小程序里按下录音键开始说话小程序一边录音一边把音频数据打包悄悄传给后端的服务器服务器上跑着的SenseVoice-Small模型会立刻开始工作把语音转换成文字这些文字又实时地传回小程序显示在屏幕上。等你录完音一篇结构清晰的文字笔记初稿就已经在那儿了你只需要稍微修改和润色就行。这个工具特别适合几个场景会议记录再也不用手忙脚乱地打字专注听讲语音自动转成文字纪要。课堂笔记学生上课时可以用来记录重点复习时看文字比听录音更高效。灵感捕捉创作者、思考者随时记录脑中闪现的想法用说的总比打的快。访谈整理媒体人或研究者进行访谈时可以快速获得文字素材。传统的解决方案要么需要依赖特定的App要么转写服务收费不菲。我们自己搭建一个成本可控而且数据和流程完全掌握在自己手里用起来更放心。2. 技术方案与整体设计要把这件事做成我们需要“三驾马车”协同工作微信小程序、后端服务器和语音识别模型。微信小程序负责和用户交互。它的任务包括调用手机的麦克风录音、把录好的声音压缩成合适的格式、通过网络把音频数据发送给服务器并且把服务器返回的文字漂亮地展示出来让用户能编辑和保存。后端服务器是我们的“中间人”和“大脑”。它用Python的Web框架比如Flask或FastAPI搭建一个简单的服务。这个服务有两个核心功能一是接收小程序发来的音频数据二是调用我们部署好的SenseVoice-Small模型让模型去识别音频然后把识别出的文字结果再送回给小程序。SenseVoice-Small模型是核心的“翻译官”。它是一个开源、轻量级的语音识别模型在保证不错准确率的同时对计算资源的要求相对友好非常适合我们部署在云服务器上提供API服务。它们三者的关系我画了一个简单的图帮你理解用户说话 ↓ [微信小程序] 录音、压缩、发送 ↓ (通过网络HTTP/WebSocket) [后端服务器] 接收音频、调用模型 ↓ [SenseVoice-Small] 语音转文字 ↓ [后端服务器] 返回文字结果 ↓ (通过网络) [微信小程序] 接收、显示、编辑文字整个流程的关键在于“实时性”。我们当然可以等用户录完一整段再上传、识别但体验最好的方式是“流式”处理也就是录一点传一点识别一点返显一点。这样用户能看到文字随着他的说话实时出现心里有底体验也更流畅。接下来我们就分步看看具体怎么实现。3. 微信小程序前端开发要点小程序部分是我们的门面重点在于把录音、通信和界面展示做好。3.1 录音功能实现微信小程序提供了强大的wx.getRecorderManager()API来管理录音。我们首先要在小程序的配置文件app.json里声明需要用户授权录音的权限。// app.json 部分配置 { requiredPermissions: [ scope.record ], permission: { scope.record: { desc: 需要您授权使用麦克风以实现录音笔记功能 } } }然后在页面的JavaScript逻辑里我们可以这样创建和管理录音// pages/index/index.js Page({ data: { isRecording: false, recordedText: , tempAudioPath: }, onLoad: function() { // 初始化录音管理器 this.recorderManager wx.getRecorderManager(); // 监听录音开始事件 this.recorderManager.onStart(() { console.log(录音开始); this.setData({ isRecording: true }); }); // 监听录音结束事件拿到临时文件路径 this.recorderManager.onStop((res) { console.log(录音结束, res); this.setData({ isRecording: false, tempAudioPath: res.tempFilePath // 录音文件的临时路径 }); // 录音结束后自动调用上传函数 this.uploadAudioFile(res.tempFilePath); }); // 监听录音错误事件 this.recorderManager.onError((err) { console.error(录音失败:, err); wx.showToast({ title: 录音失败请重试, icon: none }); }); }, // 开始录音 startRecording: function() { const options { duration: 60000, // 最长录音60秒可根据需要调整 sampleRate: 16000, // 采样率16kHz是语音识别的常用设置 numberOfChannels: 1, // 单声道 encodeBitRate: 48000, // 编码码率 format: aac // 格式AAC兼容性好文件小 }; this.recorderManager.start(options); }, // 停止录音 stopRecording: function() { this.recorderManager.stop(); } })这里有几个参数需要注意sampleRate采样率设置成16000Hz是因为大多数语音识别模型在这个采样率下工作得最好format格式选择aac能在保证音质的同时有效压缩文件大小节省流量和传输时间。3.2 音频上传与实时通信录音结束后我们需要把音频文件发送到后端服务器。为了追求实时效果我们可以采用分片上传或使用WebSocket。这里以简单的HTTP POST上传为例演示如何将音频文件发送到后端。// pages/index/index.js 中的 uploadAudioFile 方法 uploadAudioFile: function(tempFilePath) { wx.showLoading({ title: 转写中... }); wx.uploadFile({ url: https://你的服务器地址/api/transcribe, // 你的后端API地址 filePath: tempFilePath, name: audio, formData: { format: aac, sample_rate: 16000 }, success: (res) { wx.hideLoading(); if (res.statusCode 200) { const result JSON.parse(res.data); if (result.success) { // 将识别到的文字追加到现有文本中 const newText this.data.recordedText result.text \n; this.setData({ recordedText: newText }); wx.showToast({ title: 转写完成, icon: success }); } else { wx.showToast({ title: 识别失败 result.error, icon: none }); } } else { wx.showToast({ title: 上传失败, icon: none }); } }, fail: (err) { wx.hideLoading(); wx.showToast({ title: 网络错误, icon: none }); console.error(上传失败:, err); } }); }对于真正的“实时”流式传输上述“录完一段传一段”的方式称为“准实时”已经能提供不错的体验。如果要求字字秒回则需要使用WebSocket在录音onFrameRecorded回调中不断发送音频数据帧后端也进行流式识别。这会更复杂但原理相通。3.3 文本展示与编辑界面收到识别文字后我们需要一个友好的界面来展示和编辑。我们可以用一个可编辑的textarea来显示文本并提供一些简单的编辑按钮。!-- pages/index/index.wxml -- view classcontainer view classcontrol-panel button wx:if{{!isRecording}} typeprimary bindtapstartRecording开始录音/button button wx:if{{isRecording}} typewarn bindtapstopRecording停止录音/button text classhint{{isRecording ? 正在录音... : 点击上方按钮开始}}/text /view view classtext-display text classtitle语音笔记内容/text textarea classtext-area value{{recordedText}} placeholder识别后的文字将显示在这里... bindinputonTextInput auto-height maxlength-1 /textarea /view view classaction-panel button bindtapclearText清空文本/button button bindtapsaveNote保存笔记/button button bindtapcopyText复制文本/button /view /view相应的样式和逻辑处理// pages/index/index.js 中补充方法 onTextInput: function(e) { this.setData({ recordedText: e.detail.value }); }, clearText: function() { wx.showModal({ title: 清空确认, content: 确定要清空所有文本吗, success: (res) { if (res.confirm) { this.setData({ recordedText: }); } } }); }, saveNote: function() { const text this.data.recordedText; if (!text.trim()) { wx.showToast({ title: 内容为空, icon: none }); return; } // 这里可以调用云函数或API将文本保存到云端或本地缓存 wx.setStorageSync(last_note, text); wx.showToast({ title: 已暂存, icon: success }); }, copyText: function() { const text this.data.recordedText; wx.setClipboardData({ data: text, success: () wx.showToast({ title: 已复制, icon: success }) }); }这样一个具备基本录音、转写、显示和编辑功能的小程序前端就搭建好了。接下来我们需要一个强大的后端来提供识别能力。4. 后端服务与SenseVoice-Small部署后端是我们的“动力车间”。我们需要做两件事一是部署SenseVoice-Small模型二是搭建一个能接收音频、调用模型并返回结果的Web服务。4.1 搭建基础后端服务我们使用Python的Flask框架因为它轻量、简单。首先确保你的服务器环境比如一台云服务器已经安装了Python3和pip。创建一个项目目录并安装必要的依赖mkdir voice_note_backend cd voice_note_backend python3 -m venv venv source venv/bin/activate # Windows系统用 venv\Scripts\activate pip install flask torch transformers soundfile librosa然后我们创建一个最简单的Flask应用来测试接口是否通畅# app.py from flask import Flask, request, jsonify import os app Flask(__name__) app.route(/api/transcribe, methods[POST]) def transcribe_audio(): # 1. 检查是否有文件上传 if audio not in request.files: return jsonify({success: False, error: No audio file provided}), 400 audio_file request.files[audio] # 2. 保存上传的音频文件临时 temp_path ftemp_{os.urandom(8).hex()}.aac audio_file.save(temp_path) # 3. 这里暂时模拟识别结果下一步会替换成真正的模型调用 # 假设我们有一个函数叫 transcribe_with_model(temp_path) try: # transcribed_text transcribe_with_model(temp_path) # 真实调用 transcribed_text 这是模拟的语音识别结果。请确保SenseVoice-Small模型已正确部署。 # 4. 清理临时文件 os.remove(temp_path) # 5. 返回识别结果 return jsonify({ success: True, text: transcribed_text }) except Exception as e: # 如果出错也尽量清理文件 if os.path.exists(temp_path): os.remove(temp_path) return jsonify({success: False, error: str(e)}), 500 if __name__ __main__: app.run(host0.0.0.0, port5000, debugTrue)运行这个程序 (python app.py)你的后端服务就在本地的5000端口启动了。此时它还不能真正识别语音但已经可以接收文件并返回一个模拟响应。你可以用Postman等工具测试一下/api/transcribe这个接口。4.2 集成SenseVoice-Small模型现在我们来接入核心——SenseVoice-Small模型。我们需要从Hugging Face模型库加载这个模型。首先确保安装了transformers库上面已安装。修改app.py引入模型并实现真正的识别函数# app.py (更新版) from flask import Flask, request, jsonify import torch from transformers import AutoModelForSpeechSeq2Seq, AutoProcessor import librosa import soundfile as sf import os import numpy as np app Flask(__name__) # 全局加载模型和处理器避免每次请求都重复加载 print(正在加载SenseVoice-Small模型这可能需要几分钟...) model_id SenseTime/sensevoice-small # SenseVoice-Small的模型ID # 加载处理器和模型 processor AutoProcessor.from_pretrained(model_id) model AutoModelForSpeechSeq2Seq.from_pretrained(model_id) # 将模型设置为评估模式并移动到GPU如果可用 device cuda:0 if torch.cuda.is_available() else cpu model.to(device) model.eval() print(f模型加载完成运行在: {device}) def transcribe_with_model(audio_path): 使用SenseVoice-Small模型转录音频文件 # 1. 加载音频文件 # SenseVoice模型期望16kHz采样率的输入 speech_array, sampling_rate librosa.load(audio_path, sr16000, monoTrue) # 2. 使用处理器准备模型输入 inputs processor( raw_speechspeech_array, sampling_ratesampling_rate, return_tensorspt, paddingTrue ) # 3. 将输入数据移动到与模型相同的设备GPU/CPU input_features inputs.input_features.to(device) # 4. 执行推理生成文字 with torch.no_grad(): # 禁用梯度计算加快推理速度 generated_ids model.generate(input_features) # 5. 将生成的token ID解码为文字 transcription processor.batch_decode(generated_ids, skip_special_tokensTrue)[0] return transcription app.route(/api/transcribe, methods[POST]) def transcribe_audio(): if audio not in request.files: return jsonify({success: False, error: 未提供音频文件}), 400 audio_file request.files[audio] # 保存临时文件使用更安全的唯一文件名 import uuid temp_filename ftemp_{uuid.uuid4().hex}.aac temp_path os.path.join(/tmp, temp_filename) # Linux/Mac临时目录 # Windows系统可以改为: temp_path os.path.join(os.environ[TEMP], temp_filename) audio_file.save(temp_path) try: # 调用真正的模型进行识别 transcribed_text transcribe_with_model(temp_path) # 清理临时文件 os.remove(temp_path) return jsonify({ success: True, text: transcribed_text }) except Exception as e: # 出错时也清理文件 if os.path.exists(temp_path): os.remove(temp_path) app.logger.error(f识别失败: {str(e)}) return jsonify({success: False, error: f语音识别处理失败: {str(e)}}), 500 if __name__ __main__: # 在生产环境中应使用更稳定的WSGI服务器如Gunicorn app.run(host0.0.0.0, port5000, debugFalse) # 生产环境请设置debugFalse几点重要的说明模型加载第一次运行时会从网上下载SenseVoice-Small模型可能需要一些时间和网络。下载后模型会缓存下次启动就快了。硬件要求SenseVoice-Small虽然相对轻量但在CPU上推理可能较慢。如果追求更好的实时性建议使用带有GPU的云服务器。代码中已自动检测并使用CUDA GPU。临时文件我们使用系统的临时目录来存放上传的音频文件并在处理完成后立即删除避免磁盘空间被占满。错误处理代码中添加了基本的异常捕获确保服务在出错时也能返回友好的错误信息而不是直接崩溃。4.3 部署与上线建议本地测试没问题后你需要将后端服务部署到公网服务器这样小程序才能访问到。购买云服务器选择一家云服务商如阿里云、腾讯云购买一台至少2核4G的云服务器如果使用GPU版本更好。记得在安全组防火墙中开放你后端服务使用的端口例如5000。上传代码将你的voice_note_backend项目文件夹上传到服务器。安装依赖在服务器上同样创建虚拟环境并安装所需Python包。使用生产级服务器Flask自带的开发服务器不适合生产环境。建议使用Gunicorn或uWSGI配合Nginx来部署。pip install gunicorn # 在项目目录下运行 gunicorn -w 4 -b 0.0.0.0:5000 app:app配置HTTPS微信小程序要求后端接口必须为HTTPS。你需要在Nginx中配置SSL证书将HTTPS请求代理到Gunicorn服务。修改小程序配置将小程序代码中的url替换为你服务器的HTTPS地址和正确端口。5. 实际应用与效果体验当小程序和后端都部署好后整个应用就跑通了。你可以打开小程序点击录音说一段话。比如“大家好欢迎参加今天的项目例会。本次会议主要讨论三个议题第一季度总结、下阶段规划以及资源分配。”稍等片刻取决于网络和服务器性能屏幕上就会逐句或整段地出现识别出的文字。你会发现对于清晰的普通话SenseVoice-Small的识别准确率是相当不错的完全能满足会议纪要、灵感记录这类场景的需求。在实际使用中你可能会遇到一些情况并可以这样优化环境噪音在嘈杂环境下录音识别准确率会下降。可以在小程序端增加一个“环境检测”提示建议用户在相对安静的环境下使用。长语音处理我们设定了最长60秒的录音片段。对于更长的会议可以提示用户分段录音或者在服务器端实现音频拼接和长语音识别SenseVoice-Small支持长音频但需注意服务器内存。识别结果编辑提供便捷的编辑工具很重要。除了我们已有的清空、复制、保存还可以考虑增加“标为重点”、“分段”、“查找替换”等功能让笔记整理更高效。多平台同步将笔记保存后可以通过云函数同步到其他平台如Notion、语雀构建个人知识管理体系。这个项目的魅力在于它不仅仅是一个工具更是一个起点。基于这个“语音转文字”的核心能力你可以扩展出很多功能比如为识别内容自动添加标点、提取关键词、生成摘要甚至进行情绪分析让一个简单的笔记应用变得越来越智能。6. 总结走完这一趟我们从零开始把一个“语音实时转笔记”的想法变成了一个可用的微信小程序。前端利用小程序的能力处理录音和交互后端用Python和SenseVoice-Small模型提供语音识别这个“硬核”功能两者通过网络API连接起来。整个过程涉及了小程序开发、后端API编写、深度学习模型部署等多个环节算是一个比较完整的全栈小项目。虽然里面有些技术细节但一步步拆解开来每一步都有清晰的路径。最重要的是你做出了一个真正能解决自己问题的工具这种成就感是无可替代的。SenseVoice-Small这样的开源模型大大降低了语音AI的应用门槛。你可以根据自己的需求调整它比如针对专业词汇进行微调或者尝试其他更大型号的版本以获得更高的准确率。这个项目的代码和思路也是一个模板你可以很容易地把它改造成一个“语音翻译机”、“实时字幕生成器”或者“访谈整理助手”。技术最终是为了服务人与生活。希望这个案例不仅能给你提供一个可运行的程序更能给你带来一种“用技术创造工具”的思维。动手试试看从录制第一段语音看到屏幕上出现第一行字开始你会发现很多有趣的事情其实你都能自己做出来。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。