Qwen3-ASR-1.7B与Vue3整合：构建语音识别前端应用

十八像朵花

242人浏览 · 2026-02-25 00:05:57

十八像朵花 · 2026-02-25 00:05:57 发布

Qwen3-ASR-1.7B与Vue3整合：构建语音识别前端应用

1. 引言

语音识别技术正在改变我们与设备交互的方式。想象一下，用户只需对着麦克风说话，网页就能实时将语音转换为文字，无需手动输入。这种体验不仅自然直观，还能大幅提升操作效率。

Qwen3-ASR-1.7B作为最新的开源语音识别模型，在准确性和多语言支持方面表现出色。而Vue3作为现代前端框架，提供了响应式开发和组件化构建的完美体验。将两者结合，可以打造出强大的语音识别Web应用。

本文将带你一步步实现Qwen3-ASR-1.7B与Vue3的整合，构建一个完整的语音识别前端应用。无论你是前端开发者还是对语音技术感兴趣的工程师，都能从中获得实用的开发思路和代码示例。

2. 技术选型与准备

2.1 为什么选择Qwen3-ASR-1.7B

Qwen3-ASR-1.7B在语音识别领域有着显著优势。它支持多达52种语言和方言，包括普通话、英语、粤语等常见语言变体。在实际测试中，即使是快速的说唱歌曲或者带有背景噪声的录音，它都能保持很高的识别准确率。

更重要的是，这个模型支持流式识别，这意味着我们可以实现实时的语音转文字效果，用户说话的同时就能看到文字输出，体验非常流畅。

2.2 Vue3的优势

Vue3的Composition API让我们能够更灵活地组织代码逻辑。对于语音识别这种需要管理复杂状态（录音状态、识别结果、错误处理等）的应用来说，这种组织方式特别合适。

此外，Vue3的优秀性能和对TypeScript的良好支持，也让我们能够构建更稳定、更易维护的语音应用。

2.3 开发环境准备

首先确保你的开发环境已经安装Node.js（建议16.x或以上版本）和npm。然后创建一个新的Vue3项目：

npm create vue@latest voice-recognition-app
cd voice-recognition-app
npm install

我们需要安装几个关键的依赖包：

npm install axios recorder-js

axios用于与后端API通信，recorder-js则帮助我们处理浏览器端的音频录制功能。

3. 核心功能实现

3.1 音频采集模块

音频采集是语音识别的基础。我们需要在浏览器中获取用户的麦克风权限并录制音频。创建一个useAudioRecorder.js组合式函数：

import { ref } from 'vue'
import Recorder from 'recorder-js'

export function useAudioRecorder() {
  const isRecording = ref(false)
  const audioBlob = ref(null)
  const recorder = ref(null)
  const audioContext = ref(null)

  const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
      audioContext.value = new AudioContext()
      recorder.value = new Recorder(audioContext.value)
      recorder.value.init(stream)
      recorder.value.start()
      isRecording.value = true
    } catch (error) {
      console.error('获取麦克风权限失败:', error)
    }
  }

  const stopRecording = () => {
    if (recorder.value && isRecording.value) {
      recorder.value.stop()
        .then(({ blob }) => {
          audioBlob.value = blob
          isRecording.value = false
        })
    }
  }

  return {
    isRecording,
    audioBlob,
    startRecording,
    stopRecording
  }
}

3.2 语音识别服务对接

接下来创建与Qwen3-ASR-1.7B后端服务的通信模块。假设你已经部署了相应的API服务：

import { ref } from 'vue'
import axios from 'axios'

export function useSpeechRecognition() {
  const isProcessing = ref(false)
  const recognitionResult = ref('')
  const error = ref(null)

  const recognizeSpeech = async (audioBlob) => {
    isProcessing.value = true
    error.value = null
    
    try {
      const formData = new FormData()
      formData.append('audio', audioBlob, 'recording.wav')
      formData.append('language', 'zh') // 设置语言为中文

      const response = await axios.post('https://your-api-endpoint/recognize', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        timeout: 30000 // 30秒超时
      })

      recognitionResult.value = response.data.text
    } catch (err) {
      error.value = '识别失败，请重试'
      console.error('语音识别错误:', err)
    } finally {
      isProcessing.value = false
    }
  }

  return {
    isProcessing,
    recognitionResult,
    error,
    recognizeSpeech
  }
}

3.3 实时UI反馈设计

良好的用户界面反馈对语音应用至关重要。我们需要让用户清楚地知道当前的状态：

<template>
  <div class="voice-app">
    <div class="status-indicator" :class="{ recording: isRecording, processing: isProcessing }">
      <span v-if="isRecording">录音中...</span>
      <span v-else-if="isProcessing">识别中...</span>
      <span v-else>点击开始录音</span>
    </div>

    <button 
      @click="toggleRecording"
      :disabled="isProcessing"
      class="record-button"
      :class="{ recording: isRecording }"
    >
      {{ isRecording ? '停止录音' : '开始录音' }}
    </button>

    <div v-if="recognitionResult" class="result-container">
      <h3>识别结果:</h3>
      <p class="result-text">{{ recognitionResult }}</p>
    </div>

    <div v-if="error" class="error-message">
      {{ error }}
    </div>
  </div>
</template>

4. 完整应用集成

4.1 主组件实现

现在我们将各个模块整合到主组件中：

<template>
  <div class="voice-recognition-app">
    <h1>语音识别应用</h1>
    
    <div class="controls">
      <button 
        @click="handleRecordClick"
        :class="['record-btn', { recording: isRecording, processing: isProcessing }]"
        :disabled="isProcessing"
      >
        <span v-if="isRecording">● 录音中</span>
        <span v-else-if="isProcessing">⏳ 处理中</span>
        <span v-else>🎤 开始录音</span>
      </button>

      <select v-model="selectedLanguage" class="language-select">
        <option value="zh">中文</option>
        <option value="en">英文</option>
        <option value="yue">粤语</option>
      </select>
    </div>

    <div v-if="recognitionResult" class="result-section">
      <h3>识别结果:</h3>
      <div class="result-content">
        {{ recognitionResult }}
      </div>
      <button @click="copyToClipboard" class="copy-btn">复制文本</button>
    </div>

    <div v-if="error" class="error-section">
      <p>❌ {{ error }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useAudioRecorder } from '../composables/useAudioRecorder'
import { useSpeechRecognition } from '../composables/useSpeechRecognition'

const { isRecording, audioBlob, startRecording, stopRecording } = useAudioRecorder()
const { isProcessing, recognitionResult, error, recognizeSpeech } = useSpeechRecognition()

const selectedLanguage = ref('zh')

const handleRecordClick = async () => {
  if (isRecording.value) {
    stopRecording()
    // 录音停止后自动开始识别
    if (audioBlob.value) {
      await recognizeSpeech(audioBlob.value)
    }
  } else {
    startRecording()
    recognitionResult.value = ''
    error.value = null
  }
}

const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(recognitionResult.value)
    alert('已复制到剪贴板')
  } catch (err) {
    console.error('复制失败:', err)
  }
}
</script>

4.2 样式优化

添加一些CSS样式提升用户体验：

.voice-recognition-app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.record-btn {
  padding: 15px 30px;
  font-size: 18px;
  border: none;
  border-radius: 50px;
  background: #4CAF50;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
}

.record-btn.recording {
  background: #f44336;
  animation: pulse 1.5s infinite;
}

.record-btn.processing {
  background: #ff9800;
}

.record-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

.result-section {
  margin-top: 20px;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

.result-content {
  min-height: 100px;
  padding: 15px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
}

.error-section {
  color: #f44336;
  padding: 10px;
  background: #ffebee;
  border-radius: 4px;
  margin-top: 10px;
}

.controls {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 20px;
}

.language-select {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.copy-btn {
  padding: 8px 16px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

5. 进阶功能与优化

5.1 实时流式识别

为了实现更好的用户体验，我们可以升级到实时流式识别。这需要后端也支持流式处理：

// 在useSpeechRecognition中添加流式识别方法
const startRealtimeRecognition = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
  const mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'audio/webm;codecs=opus'
  })

  mediaRecorder.ondataavailable = async (event) => {
    if (event.data.size > 0) {
      await sendAudioChunk(event.data)
    }
  }

  mediaRecorder.start(1000) // 每1秒发送一个数据块
}

const sendAudioChunk = async (audioChunk) => {
  try {
    const formData = new FormData()
    formData.append('audio', audioChunk)
    
    const response = await fetch('/api/realtime-recognize', {
      method: 'POST',
      body: formData
    })
    
    const result = await response.json()
    // 增量更新识别结果
    recognitionResult.value += result.text
  } catch (error) {
    console.error('流式识别错误:', error)
  }
}

5.2 错误处理与重试机制

健壮的错误处理能提升应用可靠性：

const recognizeSpeechWithRetry = async (audioBlob, retries = 3) => {
  for (let attempt = 1; attempt <= retries; attempt++) {
    try {
      const result = await recognizeSpeech(audioBlob)
      return result
    } catch (error) {
      if (attempt === retries) {
        throw error
      }
      // 等待一段时间后重试
      await new Promise(resolve => setTimeout(resolve, 1000 * attempt))
    }
  }
}