vue实现语音上传

Vue 实现语音上传的方法

使用浏览器 Web API 录制语音

浏览器提供的 MediaDevices 和 MediaRecorder API 可用于录制语音。需要在 Vue 组件中初始化录音功能。

// 在 Vue 组件中
data() {
  return {
    mediaRecorder: null,
    audioChunks: [],
    audioBlob: null,
    isRecording: false
  }
},
methods: {
  async startRecording() {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    this.mediaRecorder = new MediaRecorder(stream);
    this.mediaRecorder.ondataavailable = (event) => {
      this.audioChunks.push(event.data);
    };
    this.mediaRecorder.start();
    this.isRecording = true;
  },
  stopRecording() {
    this.mediaRecorder.stop();
    this.mediaRecorder.onstop = () => {
      this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
      this.audioChunks = [];
    };
    this.isRecording = false;
  }
}

将语音转换为可上传格式

录制完成后，语音数据以 Blob 形式存储，可直接用于上传或转换为其他格式。

methods: {
  getAudioFile() {
    const audioFile = new File([this.audioBlob], 'recording.wav', { type: 'audio/wav' });
    return audioFile;
  }
}

上传语音文件到服务器

使用 axios 或其他 HTTP 客户端将语音文件上传到后端服务器。

methods: {
  async uploadAudio() {
    const formData = new FormData();
    formData.append('audio', this.getAudioFile());
    try {
      const response = await axios.post('/api/upload-audio', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      });
      console.log('上传成功', response.data);
    } catch (error) {
      console.error('上传失败', error);
    }
  }
}

添加用户界面控件

在 Vue 模板中添加按钮控制录音和上传流程。

<template>
  <div>
    <button @click="startRecording" :disabled="isRecording">开始录音</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录音</button>
    <button @click="uploadAudio" :disabled="!audioBlob">上传语音</button>
  </div>
</template>

处理权限和兼容性问题

在调用 getUserMedia 前检查浏览器兼容性，并处理用户拒绝麦克风权限的情况。

methods: {
  async checkMicrophonePermission() {
    try {
      const permissionStatus = await navigator.permissions.query({ name: 'microphone' });
      if (permissionStatus.state === 'denied') {
        alert('请允许麦克风权限以使用语音功能');
      }
    } catch (error) {
      console.warn('权限API不支持', error);
    }
  }
}

显示录音状态和反馈

添加视觉反馈，如录音时长显示或波形图，提升用户体验。

data() {
  return {
    recordingTime: 0,
    timer: null
  }
},
methods: {
  startRecording() {
    this.recordingTime = 0;
    this.timer = setInterval(() => {
      this.recordingTime++;
    }, 1000);
    // ...其他录音逻辑
  },
  stopRecording() {
    clearInterval(this.timer);
    // ...其他停止逻辑
  }
}

优化语音质量和格式

根据需求调整录音参数，如采样率和比特率，平衡文件大小和音质。

const constraints = {
  audio: {
    sampleRate: 16000,
    channelCount: 1,
    bitrate: 128000
  }
};
const stream = await navigator.mediaDevices.getUserMedia(constraints);

后端接收和处理

确保后端接口能正确接收 multipart/form-data 格式的语音文件，并进行存储或进一步处理。

// 示例Node.js Express后端路由
app.post('/api/upload-audio', (req, res) => {
  const audioFile = req.files.audio;
  // 保存文件或处理音频数据
});

错误处理和日志记录

在上传过程中添加全面的错误处理，记录失败原因以便调试。

methods: {
  async uploadAudio() {
    try {
      // ...上传逻辑
    } catch (error) {
      if (error.response) {
        console.error('服务器响应错误:', error.response.data);
      } else if (error.request) {
        console.error('无响应:', error.request);
      } else {
        console.error('请求错误:', error.message);
      }
    }
  }
}

添加进度指示器

对于大语音文件，显示上传进度提升用户体验。

methods: {
  async uploadAudio() {
    const config = {
      onUploadProgress: (progressEvent) => {
        const percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        console.log(percentCompleted);
      }
    };
    await axios.post('/api/upload-audio', formData, config);
  }
}