Vue2项目实战：用js-audio-recorder和阿里云WebSocket搞定网页录音转文字（附完整代码）

Vue2实战基于js-audio-recorder与阿里云WebSocket的语音转文字解决方案在当今的Web应用中语音交互功能正变得越来越普遍。无论是语音输入、实时字幕还是语音助手将语音转换为文字的需求日益增长。本文将带你从零开始在Vue2项目中实现一个完整的网页录音转文字功能使用js-audio-recorder处理录音并通过阿里云智能语音服务的WebSocket接口实现实时语音识别。1. 项目准备与环境配置在开始编码前我们需要准备好开发环境和必要的服务账号。这个项目主要依赖以下几个关键组件Vue2作为前端框架js-audio-recorder用于网页录音的JavaScript库阿里云智能语音交互服务提供语音转文字的核心能力首先创建一个新的Vue2项目如果已有项目可跳过此步vue create voice-to-text-demo cd voice-to-text-demo然后安装项目所需依赖npm install js-audio-recorder element-ui --save提示Element UI是可选的这里用它提供美观的UI组件。你也可以使用其他UI库或原生HTML元素。接下来需要在阿里云开通智能语音交互服务登录阿里云控制台搜索智能语音交互开通服务并创建项目获取AppKey和AccessKey用于生成Token2. 录音功能实现js-audio-recorder是一个轻量级的网页录音库支持多种音频格式和配置选项。我们先实现基本的录音功能。在Vue组件中引入并初始化录音器import Recorder from js-audio-recorder export default { data() { return { recorder: null, isRecording: false, audioBlob: null } }, methods: { initRecorder() { this.recorder new Recorder({ sampleBits: 16, // 采样位数 sampleRate: 16000, // 采样率阿里云推荐16kHz numChannels: 1 // 单声道 }) }, async startRecording() { try { await Recorder.getPermission() // 获取麦克风权限 this.recorder.start() this.isRecording true } catch (error) { console.error(录音权限获取失败:, error) } }, stopRecording() { this.recorder.stop() this.isRecording false this.audioBlob this.recorder.getPCMBlob() // 获取PCM格式音频数据 } }, mounted() { this.initRecorder() } }在模板中添加简单的控制界面template div el-button typeprimary clickstartRecording :disabledisRecording 开始录音 /el-button el-button clickstopRecording :disabled!isRecording 停止录音 /el-button /div /template注意阿里云语音识别服务要求音频为16位采样位数、16kHz采样率的单声道PCM格式。上述配置已符合这些要求。3. 阿里云WebSocket连接管理阿里云智能语音交互服务提供了WebSocket接口可以实现实时语音识别。我们需要建立并维护WebSocket连接处理各种状态和消息。首先创建一个工具类来管理WebSocket连接// utils/aliyunSpeech.js export default class AliyunSpeech { constructor(options) { this.token options.token this.appKey options.appKey this.onTextReceived options.onTextReceived this.onError options.onError this.ws null this.taskId this.generateUUID() } connect() { const wsUrl wss://nls-gateway.cn-shanghai.aliyuncs.com/ws/v1?token${this.token} this.ws new WebSocket(wsUrl) this.ws.onopen () this.handleOpen() this.ws.onmessage (e) this.handleMessage(e) this.ws.onerror (e) this.onError(e) this.ws.onclose (e) this.handleClose(e) } handleOpen() { const startMessage { header: { message_id: this.generateUUID(), task_id: this.taskId, namespace: SpeechTranscriber, name: StartTranscription, appkey: this.appKey }, payload: { format: PCM, sample_rate: 16000, enable_intermediate_result: true, enable_punctuation_prediction: true, enable_inverse_text_normalization: true } } this.sendMessage(startMessage) } handleMessage(e) { const data JSON.parse(e.data) const { name } data.header if (name TranscriptionResultChanged) { this.onTextReceived(data.payload.result) } else if (name SentenceEnd) { this.onTextReceived(data.payload.result \n) } } sendAudio(audioData) { if (this.ws this.ws.readyState WebSocket.OPEN) { this.ws.send(audioData) } } sendStopCommand() { const stopMessage { header: { message_id: this.generateUUID(), task_id: this.taskId, namespace: SpeechTranscriber, name: StopTranscription, appkey: this.appKey } } this.sendMessage(stopMessage) } sendMessage(message) { if (this.ws this.ws.readyState WebSocket.OPEN) { this.ws.send(JSON.stringify(message)) } } generateUUID() { return xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx.replace(/[xy]/g, function(c) { const r Math.random() * 16 | 0 const v c x ? r : (r 0x3 | 0x8) return v.toString(16) }) } close() { if (this.ws) { this.ws.close() } } }4. 音频数据处理与发送从麦克风获取的音频数据需要经过适当处理才能发送给阿里云服务。主要考虑以下几点数据分片大块音频数据需要分成小片发送格式转换确保数据格式符合服务要求时序控制合理控制发送间隔在Vue组件中集成音频发送逻辑export default { data() { return { speechClient: null, recognitionText: , isProcessing: false } }, methods: { initSpeechClient() { this.speechClient new AliyunSpeech({ token: your-aliyun-token, // 应从后端获取 appKey: your-app-key, onTextReceived: (text) { this.recognitionText text }, onError: (error) { console.error(语音识别错误:, error) } }) }, async sendAudioToRecognize() { if (!this.audioBlob) return this.isProcessing true this.recognitionText this.speechClient.connect() // 等待连接建立 await new Promise(resolve setTimeout(resolve, 500)) // 分片发送音频数据 const chunkSize 3200 // 阿里云推荐的分片大小 const blobReader new FileReader() blobReader.onload () { const audioArrayBuffer blobReader.result const audioData new Uint8Array(audioArrayBuffer) for (let i 0; i audioData.length; i chunkSize) { const chunk audioData.slice(i, i chunkSize) this.speechClient.sendAudio(chunk) } this.speechClient.sendStopCommand() this.isProcessing false } blobReader.readAsArrayBuffer(this.audioBlob) } }, mounted() { this.initRecorder() this.initSpeechClient() } }5. 完整实现与优化现在我们将所有部分整合起来并添加一些优化措施Token动态获取Token应该从后端获取避免在前端暴露敏感信息连接状态管理处理WebSocket的各种状态变化错误处理增强错误处理和用户反馈UI优化提供更好的用户体验完整组件代码template div classvoice-recognition-container el-card shadowhover div slotheader span语音转文字演示/span /div div classcontrol-panel el-button typeprimary clickstartRecording :disabledisRecording || isProcessing iconel-icon-microphone 开始录音 /el-button el-button clickstopRecording :disabled!isRecording iconel-icon-video-pause 停止录音 /el-button el-button clicksendAudioToRecognize :disabled!audioBlob || isProcessing iconel-icon-upload2 识别语音 /el-button /div div classstatus-info el-alert :titlestatusMessage :typestatusType :closablefalse show-icon / /div div classresult-container el-input typetextarea :rows8 placeholder识别结果将显示在这里... v-modelrecognitionText readonly / /div /el-card /div /template script import Recorder from js-audio-recorder import AliyunSpeech from /utils/aliyunSpeech export default { data() { return { recorder: null, isRecording: false, audioBlob: null, speechClient: null, recognitionText: , isProcessing: false, status: idle // idle, recording, processing, success, error } }, computed: { statusMessage() { const messages { idle: 准备就绪点击开始录音按钮开始, recording: 正在录音... 点击停止录音按钮结束, processing: 正在识别语音..., success: 识别完成, error: 发生错误请重试 } return messages[this.status] || }, statusType() { const types { idle: info, recording: warning, processing: info, success: success, error: error } return types[this.status] || info } }, methods: { initRecorder() { this.recorder new Recorder({ sampleBits: 16, sampleRate: 16000, numChannels: 1 }) }, async startRecording() { try { this.status recording this.recognitionText await Recorder.getPermission() this.recorder.start() this.isRecording true } catch (error) { console.error(录音权限获取失败:, error) this.status error this.$message.error(无法获取麦克风权限) } }, stopRecording() { this.recorder.stop() this.isRecording false this.audioBlob this.recorder.getPCMBlob() this.status idle }, initSpeechClient() { // 实际项目中应从后端API获取token和appKey this.getTokenAndAppKey().then(({ token, appKey }) { this.speechClient new AliyunSpeech({ token, appKey, onTextReceived: (text) { this.recognitionText text }, onError: (error) { console.error(语音识别错误:, error) this.status error this.isProcessing false this.$message.error(语音识别失败) } }) }) }, async getTokenAndAppKey() { // 这里应该是调用后端API获取token和appKey // 模拟API调用 return new Promise(resolve { setTimeout(() { resolve({ token: your-token-from-backend, appKey: your-app-key-from-backend }) }, 300) }) }, async sendAudioToRecognize() { if (!this.audioBlob) return this.status processing this.isProcessing true this.recognitionText try { this.speechClient.connect() // 等待连接建立 await new Promise((resolve, reject) { const checkInterval setInterval(() { if (this.speechClient.ws this.speechClient.ws.readyState WebSocket.OPEN) { clearInterval(checkInterval) resolve() } }, 100) setTimeout(() { clearInterval(checkInterval) reject(new Error(连接超时)) }, 3000) }) // 分片发送音频数据 const chunkSize 3200 await new Promise((resolve) { const blobReader new FileReader() blobReader.onload () { const audioArrayBuffer blobReader.result const audioData new Uint8Array(audioArrayBuffer) let index 0 const sendNextChunk () { if (index audioData.length) { this.speechClient.sendStopCommand() this.status success this.isProcessing false resolve() return } const chunk audioData.slice(index, index chunkSize) this.speechClient.sendAudio(chunk) index chunkSize // 控制发送速率 setTimeout(sendNextChunk, 30) } sendNextChunk() } blobReader.readAsArrayBuffer(this.audioBlob) }) } catch (error) { console.error(识别过程中出错:, error) this.status error this.isProcessing false this.$message.error(语音识别失败) } } }, mounted() { this.initRecorder() this.initSpeechClient() }, beforeDestroy() { if (this.speechClient) { this.speechClient.close() } } } /script style scoped .voice-recognition-container { max-width: 800px; margin: 0 auto; padding: 20px; } .control-panel { margin-bottom: 20px; } .control-panel button { margin-right: 10px; } .status-info { margin-bottom: 20px; } .result-container { margin-top: 20px; } /style6. 常见问题与解决方案在实际开发中你可能会遇到以下问题权限问题浏览器麦克风权限被拒绝解决方案在用户交互事件中请求权限如点击按钮并提供清晰的权限请求说明音频格式不匹配阿里云服务对音频格式有严格要求确保使用PCM格式、16kHz采样率、16位采样位数、单声道WebSocket连接不稳定网络问题可能导致连接中断实现重连机制监听onclose事件并尝试重新连接分片大小问题过大的分片可能导致识别延迟阿里云推荐分片大小为1600或3200字节Token过期阿里云Token通常有有效期限制实现Token刷新机制或在每次识别前获取新Token跨域问题本地开发时可能遇到跨域限制配置开发服务器代理或使用后端API中转WebSocket连接7. 性能优化与扩展为了使这个语音识别功能更加完善可以考虑以下优化和扩展方向实时语音识别修改录音逻辑边录音边发送数据实现真正的实时识别多语言支持利用阿里云服务支持的多语言识别能力语音唤醒添加关键词唤醒功能离线支持使用WebAssembly实现本地基础语音识别语音指令结合NLP处理识别结果实现语音控制功能音频可视化添加音频波形显示提升用户体验实时语音识别的实现思路// 修改录音开始方法 async startRealTimeRecording() { await Recorder.getPermission() this.speechClient.connect() // 边录音边处理 this.recorder.onprogress (params) { const chunk this.recorder.getNextData() if (chunk this.speechClient) { this.speechClient.sendAudio(chunk) } } this.recorder.start() this.isRecording true }在真实项目中这种语音识别功能可以应用于多种场景在线会议实时字幕、语音笔记、语音搜索、无障碍访问等。关键在于根据具体需求调整参数和优化用户体验。