一、技术选型与前置条件

在Vue项目中实现录音与语音转文字功能，需明确技术栈与兼容性要求。录音功能可通过浏览器原生API（Web Audio API + MediaRecorder API）实现，支持MP3/WAV格式录制；语音转文字则需依赖后端服务或第三方SDK（如科大讯飞、阿里云语音识别等）。

关键前置条件：

浏览器兼容性：Chrome/Firefox/Edge等现代浏览器支持MediaRecorder API，iOS Safari需11+版本。
HTTPS环境：录音功能在非安全环境下可能被禁用。
麦克风权限：需通过navigator.mediaDevices.getUserMedia申请权限。

二、录音功能实现步骤

1. 初始化录音器

使用MediaRecorder API创建录音实例，配置音频参数：

let mediaRecorder;
let audioChunks = [];
const startRecording = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    mediaRecorder = new MediaRecorder(stream, {
      mimeType: 'audio/wav', // 或 'audio/webm'
      audioBitsPerSecond: 128000
    });
    mediaRecorder.ondataavailable = (event) => {
      if (event.data.size > 0) {
        audioChunks.push(event.data);
      }
    };
    mediaRecorder.onstop = () => {
      const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
      // 处理音频Blob（如上传或播放）
      audioChunks = [];
    };
    mediaRecorder.start(100); // 每100ms收集一次数据
  } catch (error) {
    console.error('录音初始化失败:', error);
  }
};

2. 录音控制逻辑

在Vue组件中绑定开始/停止按钮：

<template>
  <div>
    <button @click="startRecording" :disabled="isRecording">开始录音</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录音</button>
    <audio v-if="audioUrl" :src="audioUrl" controls />
  </div>
</template>
<script>
export default {
  data() {
    return {
      isRecording: false,
      audioUrl: null
    };
  },
  methods: {
    startRecording() {
      this.isRecording = true;
      startRecording(); // 调用上文定义的函数
    },
    stopRecording() {
      if (mediaRecorder && this.isRecording) {
        mediaRecorder.stop();
        this.isRecording = false;
      }
    }
  }
};
</script>

3. 音频处理优化

格式转换：使用ffmpeg.js将WAV转为MP3以减少体积。
分片上传：长录音可拆分为多个Blob分片上传。
可视化：通过Web Audio API绘制实时波形图。

三、语音转文字实现方案

方案1：调用第三方语音识别API

以科大讯飞为例，集成步骤如下：

申请AppID：在科大讯飞开放平台创建应用。

引入SDK：

import WebIM from 'webim'; // 示例，实际需替换为讯飞SDK

发送音频流：

const sendAudioToASR = (audioBlob) => {
const formData = new FormData();
formData.append('audio', audioBlob);
formData.append('app_id', 'YOUR_APP_ID');
fetch('https://api.xfyun.cn/v1/service/v1/iat', {
 method: 'POST',
 body: formData,
 headers: {
   'X-Appid': 'YOUR_APP_ID',
   'X-CurTime': Math.floor(Date.now() / 1000),
   'X-Param': JSON.stringify({ engine_type: 'sms16k' })
 }
})
.then(response => response.json())
.then(data => {
 console.log('识别结果:', data.result);
});
};

方案2：WebSocket实时识别

适用于需要实时显示文字的场景：

const connectASRWebSocket = () => {
  const ws = new WebSocket('wss://api.xfyun.cn/v2/iat');
  ws.onopen = () => {
    console.log('WebSocket连接成功');
    // 发送认证信息
    ws.send(JSON.stringify({
      common: { app_id: 'YOUR_APP_ID' },
      business: { engine_type: 'sms16k' }
    }));
  };
  ws.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.code === 0) {
      console.log('实时结果:', data.data.result);
    }
  };
  return ws;
};

四、错误处理与优化

1. 常见错误处理

权限拒绝：监听navigator.mediaDevices.getUserMedia的拒绝事件，提示用户重新授权。
网络中断：实现重试机制与离线缓存。
API限流：在调用第三方服务时，添加请求间隔与队列管理。

2. 性能优化

降噪处理：使用Web Audio API的createBiquadFilter进行简单降噪。
压缩上传：通过audio/webm格式或opus编码减少数据量。
内存管理：及时释放不再使用的MediaStream与Blob对象。

五、完整流程示例

<template>
  <div>
    <button @click="startRecording">开始录音</button>
    <button @click="stopRecording">停止录音</button>
    <button @click="transcribeAudio" :disabled="!audioBlob">语音转文字</button>
    <div v-if="transcription">{{ transcription }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      audioChunks: [],
      audioBlob: null,
      transcription: null
    };
  },
  methods: {
    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        this.mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/wav' });
        this.mediaRecorder.ondataavailable = (event) => {
          if (event.data.size > 0) {
            this.audioChunks.push(event.data);
          }
        };
        this.mediaRecorder.onstop = () => {
          this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
          this.audioChunks = [];
        };
        this.mediaRecorder.start(100);
      } catch (error) {
        console.error('录音失败:', error);
      }
    },
    stopRecording() {
      if (this.mediaRecorder) {
        this.mediaRecorder.stop();
      }
    },
    async transcribeAudio() {
      if (!this.audioBlob) return;
      const formData = new FormData();
      formData.append('audio', this.audioBlob);
      formData.append('app_id', 'YOUR_APP_ID');
      try {
        const response = await fetch('https://api.xfyun.cn/v1/service/v1/iat', {
          method: 'POST',
          body: formData,
          headers: {
            'X-Appid': 'YOUR_APP_ID',
            'X-CurTime': Math.floor(Date.now() / 1000),
            'X-Param': JSON.stringify({ engine_type: 'sms16k' })
          }
        });
        const data = await response.json();
        this.transcription = data.result.join(' ');
      } catch (error) {
        console.error('语音转文字失败:', error);
      }
    }
  }
};
</script>

六、总结与扩展

浏览器兼容性：通过特性检测（if ('MediaRecorder' in window)）提供降级方案。
多语言支持：在语音识别API中配置language参数（如zh_cn/en_us）。
安全考虑：避免在前端存储敏感API密钥，建议通过后端代理调用。

通过以上步骤，开发者可在Vue项目中实现完整的录音与语音转文字功能，为AI问答小助手提供自然交互能力。实际开发中需根据业务需求调整参数，并充分测试不同设备与网络环境下的表现。

Vue实现AI问答小助手(3)：录音与语音转文字全流程指南