别再手动打字了！用uniapp+百度语音识别，5分钟搞定语音转文字功能（附完整代码）

用UniApp百度语音识别实现高效语音转文字功能在移动应用开发中语音输入正逐渐成为提升用户体验的关键功能。想象一下用户无需费力敲击虚拟键盘只需轻按按钮说话文字就能自动出现在输入框中——这种交互方式不仅自然流畅还能显著提高用户参与度。对于开发者而言UniApp框架结合百度语音识别API可以在短短几行代码内实现这一功能。1. 准备工作与环境配置1.1 百度语音识别服务申请要使用百度语音识别功能首先需要在百度AI开放平台完成服务申请访问百度AI开放平台官网并注册开发者账号进入控制台选择语音技术产品创建应用后获取以下关键凭证App IDAPI KeySecret Key这些凭证将用于后续的API调用认证建议妥善保管避免泄露。1.2 UniApp项目配置在HBuilderX中配置百度语音识别模块// manifest.json配置示例 { app-plus: { modules: { Speech: { baidu: { appid: 你的AppID, apikey: 你的API Key, secretkey: 你的Secret Key } } } } }配置完成后重新编译项目以使更改生效。这一步确保了UniApp项目能够调用百度语音识别的原生能力。2. 核心功能实现2.1 录音功能实现UniApp提供了原生的录音管理接口可以轻松实现录音功能// 初始化录音管理器 const recorderManager uni.getRecorderManager() // 开始录音 function startRecording() { recorderManager.start({ format: mp3, sampleRate: 16000, numberOfChannels: 1 }) } // 停止录音 function stopRecording() { recorderManager.stop() } // 监听录音停止事件 recorderManager.onStop((res) { console.log(录音文件路径, res.tempFilePath) this.audioPath res.tempFilePath })录音参数说明format: 音频格式推荐使用mp3或pcmsampleRate: 采样率16000Hz是语音识别的常用值numberOfChannels: 声道数语音识别通常只需要单声道2.2 语音识别接口调用获取录音文件后需要将其发送到百度语音识别API进行转换async function recognizeSpeech() { // 1. 获取access_token const tokenRes await uni.request({ url: https://openapi.baidu.com/oauth/2.0/token, data: { grant_type: client_credentials, client_id: 你的API Key, client_secret: 你的Secret Key } }) const accessToken tokenRes.data.access_token // 2. 读取录音文件并转换为base64 const fileRes await uni.getFileSystemManager().readFile({ filePath: this.audioPath, encoding: base64 }) // 3. 调用语音识别API const recognizeRes await uni.request({ url: https://vop.baidu.com/server_api, method: POST, header: { Content-Type: application/json }, data: { format: mp3, rate: 16000, channel: 1, token: accessToken, cuid: 用户唯一标识, speech: fileRes.data, len: fileRes.data.length } }) return recognizeRes.data.result }3. 优化与错误处理3.1 常见问题解决方案问题现象可能原因解决方案获取token失败API Key或Secret Key错误检查凭证是否正确确保网络通畅识别结果为空音频格式不匹配确认音频格式与请求参数一致识别准确率低录音质量差提高采样率确保录音环境安静网络请求超时服务器响应慢增加超时时间添加重试机制3.2 性能优化建议音频预处理在发送前对音频进行降噪处理裁剪静音部分减少数据量缓存机制// 缓存access_token示例 const CACHE_KEY baidu_speech_token async function getToken() { let token uni.getStorageSync(CACHE_KEY) if (!token) { const res await fetchTokenFromServer() token res.access_token uni.setStorageSync(CACHE_KEY, { token: token, expire: Date.now() 86400000 // 24小时有效期 }) } return token }用户体验优化添加录音音量可视化反馈实现实时识别流式传输提供识别结果编辑功能4. 完整实现案例下面是一个完整的语音输入组件实现可直接集成到UniApp项目中template view classvoice-input-container button touchstartstartRecording touchendstopRecording :class{recording: isRecording} {{ isRecording ? 松开结束 : 按住说话 }} /button view classresult-display v-iftextResult {{ textResult }} /view view classvolume-indicator :style{height: volumeLevel %} /view /view /template script export default { data() { return { isRecording: false, textResult: , volumeLevel: 0, recorderManager: null } }, mounted() { this.recorderManager uni.getRecorderManager() this.recorderManager.onStart(() { this.isRecording true }) this.recorderManager.onStop(async (res) { this.isRecording false try { this.textResult 识别中... const result await this.recognizeSpeech(res.tempFilePath) this.textResult result } catch (error) { this.textResult 识别失败请重试 console.error(error) } }) this.recorderManager.onFrameRecorded((res) { this.volumeLevel Math.min(res.volume * 2, 100) }) }, methods: { startRecording() { this.recorderManager.start({ format: mp3, sampleRate: 16000, frameSize: 1024 }) }, stopRecording() { this.recorderManager.stop() }, async recognizeSpeech(filePath) { // 识别逻辑实现... } } } /script style .voice-input-container { display: flex; flex-direction: column; align-items: center; padding: 20px; } button { width: 200px; height: 200px; border-radius: 100px; background-color: #4CAF50; color: white; font-size: 18px; border: none; outline: none; } button.recording { background-color: #F44336; } .result-display { margin-top: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 8px; min-height: 60px; width: 100%; } .volume-indicator { width: 20px; background-color: #2196F3; margin-top: 10px; transition: height 0.1s; } /style这个组件提供了完整的语音输入功能包括按压式录音按钮实时音量反馈识别结果展示错误处理机制5. 高级功能扩展5.1 多语言识别支持百度语音识别API支持多种语言识别只需修改识别请求中的语言参数// 修改识别请求参数支持英语识别 const recognizeRes await uni.request({ // ...其他参数 data: { // ...其他字段 dev_pid: 1737 // 1537-普通话, 1737-英语 } })常用语言代码对照表语言dev_pid值普通话1537英语1737粤语1637四川话18375.2 实时语音识别对于需要实时转写的场景可以使用百度语音识别的长语音接口// 实时语音识别实现 function initRealTimeRecognition() { const socket new WebSocket(wss://vop.baidu.com/realtime_asr) socket.onopen () { // 发送认证信息 socket.send(JSON.stringify({ type: START, data: { token: your_access_token, cuid: device_id, format: audio/pcm;rate16000 } })) // 开始发送音频数据 this.recorderManager.onFrameRecorded((res) { socket.send(res.frameBuffer) }) } socket.onmessage (event) { const data JSON.parse(event.data) if (data.type PARTIAL) { this.partialResult data.data } else if (data.type FINAL) { this.finalResult data.data } } }实时识别需要注意保持WebSocket连接稳定控制音频数据发送频率处理中间结果和最终结果5.3 离线语音识别对于某些需要离线功能的场景可以考虑集成本地语音识别引擎// 检查离线识别可用性 function checkOfflineSupport() { return uni.getSystemInfoSync().platform android uni.getSystemInfoSync().SDKVersion 2.13.0 } // 初始化离线引擎 function initOfflineEngine() { uni.loadPlugin({ plugin: speechRecognizer, success: () { const recognizer uni.requireNativePlugin(speechRecognizer) recognizer.init({ appId: your_offline_appid, apiKey: your_offline_apikey }) } }) }离线识别虽然方便但需要注意识别准确率通常低于在线识别需要下载语音模型包占用较多存储空间