当前位置：首页 > VUE

vue实现语音转文字

2026-02-24 02:37:26VUE

实现语音转文字的基本思路

在Vue中实现语音转文字功能，主要通过浏览器提供的Web Speech API或第三方语音识别服务。以下是两种常见方法：

使用Web Speech API（浏览器原生支持）

浏览器原生提供的SpeechRecognition接口是实现语音转文字最直接的方式，但需注意兼容性（Chrome和Edge支持较好）。

// 在Vue组件中
export default {
  data() {
    return {
      recognition: null,
      transcript: '',
      isListening: false
    }
  },
  methods: {
    startListening() {
      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
      this.recognition = new SpeechRecognition()
      this.recognition.continuous = true
      this.recognition.interimResults = true

      this.recognition.onresult = (event) => {
        let interimTranscript = ''
        let finalTranscript = ''

        for (let i = event.resultIndex; i < event.results.length; i++) {
          const transcript = event.results[i][0].transcript
          if (event.results[i].isFinal) {
            finalTranscript += transcript
          } else {
            interimTranscript += transcript
          }
        }

        this.transcript = finalTranscript || interimTranscript
      }

      this.recognition.start()
      this.isListening = true
    },
    stopListening() {
      if (this.recognition) {
        this.recognition.stop()
        this.isListening = false
      }
    }
  },
  beforeDestroy() {
    this.stopListening()
  }
}

使用第三方语音识别服务

对于更稳定的服务或需要支持更多语言，可以考虑阿里云、腾讯云或Azure等提供的语音识别API。

// 以阿里云智能语音交互为例
import AliyunRecorder from 'aliyun-recorder-sdk'

export default {
  data() {
    return {
      recorder: null,
      transcript: ''
    }
  },
  methods: {
    async startRecording() {
      this.recorder = new AliyunRecorder({
        appkey: 'YOUR_APP_KEY',
        token: 'YOUR_TOKEN'
      })

      this.recorder.on('recognize', (text) => {
        this.transcript = text
      })

      await this.recorder.start()
    },
    stopRecording() {
      if (this.recorder) {
        this.recorder.stop()
      }
    }
  }
}

实现录音并转文字

如需先录音再转文字，可以使用MediaRecorder API录制音频，然后发送到语音识别服务：

export default {
  methods: {
    async recordAudio() {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
      const mediaRecorder = new MediaRecorder(stream)
      const audioChunks = []

      mediaRecorder.addEventListener('dataavailable', event => {
        audioChunks.push(event.data)
      })

      mediaRecorder.start()

      return new Promise(resolve => {
        mediaRecorder.addEventListener('stop', () => {
          const audioBlob = new Blob(audioChunks)
          resolve(audioBlob)
        })
      })
    },

    async sendToSpeechService(audioBlob) {
      const formData = new FormData()
      formData.append('audio', audioBlob, 'recording.wav')

      const response = await fetch('YOUR_SPEECH_API_ENDPOINT', {
        method: 'POST',
        body: formData
      })

      return await response.json()
    }
  }
}