Qwen3-ASR-1.7B与Vue3结合：构建语音识别Web应用

语音识别技术正在改变我们与设备交互的方式，从智能助手到实时字幕，语音转文字的需求无处不在。但对于开发者来说，如何快速构建一个功能完善的语音识别Web应用却是个挑战。

1. 为什么选择Qwen3-ASR-1.7B与Vue3组合？

如果你正在寻找一个既强大又易用的语音识别解决方案，Qwen3-ASR-1.7B确实是个不错的选择。这个模型支持52种语言和方言，识别准确率很高，连快速的说唱歌曲都能处理得很好。更重要的是，它能在10秒内处理长达5小时的音频，这样的效率对于Web应用来说非常关键。

而Vue3作为前端框架，学习曲线平缓，响应式系统让状态管理变得简单，组合式API也让代码组织更加灵活。这两者结合，你就能快速搭建出一个既美观又实用的语音识别应用。

想象一下这样的场景：用户上传一段会议录音，几分钟后就能获得完整的文字记录；或者实时录制语音，立即看到转换结果。这就是我们要实现的目标。

2. 环境准备与项目搭建

首先确保你的开发环境已经就绪。你需要Node.js（建议16.x或以上版本）和npm或yarn包管理器。

创建Vue3项目很简单，打开终端，运行：

npm create vue@latest voice-to-text-app

按照提示选择需要的功能，建议包括TypeScript、Pinia（状态管理）和Vue Router。

进入项目目录并安装依赖：

cd voice-to-text-app
npm install

现在安装我们需要的音频处理库：

npm install axios recorder-js

axios用于向后端发送请求，recorder-js则帮助我们在前端录制音频。

3. 前端界面设计与实现

好的用户界面能让语音识别应用用起来更顺手。我们设计一个简洁但功能完整的界面：

<template>
  <div class="container">
    <h1>语音转文字工具</h1>
    
    <div class="control-panel">
      <button @click="toggleRecording" :class="{ recording: isRecording }">
        {{ isRecording ? '停止录制' : '开始录制' }}
      </button>
      
      <input type="file" accept="audio/*" @change="handleFileUpload" />
    </div>

    <div v-if="audioUrl" class="audio-preview">
      <audio :src="audioUrl" controls></audio>
    </div>

    <div class="result-section">
      <h2>识别结果</h2>
      <div class="text-output">{{ transcribedText || '等待识别结果...' }}</div>
      <button v-if="transcribedText" @click="downloadText">下载文本</button>
    </div>

    <div v-if="isLoading" class="loading">处理中...</div>
  </div>
</template>

对应的样式也很重要，要让界面看起来专业且易用：

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.control-panel {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button.recording {
  background: #f44336;
  animation: pulse 1.5s infinite;
}

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

.text-output {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
  min-height: 100px;
  margin: 15px 0;
}

4. 音频录制与处理功能

现在实现核心的音频录制功能。我们在Vue组件中添加以下代码：

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

const isRecording = ref(false)
const audioUrl = ref('')
const audioBlob = ref<Blob | null>(null)
let recorder: any = null
let audioContext: AudioContext | null = null

const toggleRecording = async () => {
  if (isRecording.value) {
    // 停止录制
    const { blob } = await recorder.stop()
    audioBlob.value = blob
    audioUrl.value = URL.createObjectURL(blob)
    isRecording.value = false
  } else {
    // 开始录制
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
      audioContext = new AudioContext()
      recorder = new Recorder(audioContext)
      await recorder.init(stream)
      await recorder.start()
      isRecording.value = true
    } catch (error) {
      console.error('无法访问麦克风:', error)
    }
  }
}

const handleFileUpload = (event: Event) => {
  const input = event.target as HTMLInputElement
  if (input.files && input.files[0]) {
    audioBlob.value = input.files[0]
    audioUrl.value = URL.createObjectURL(input.files[0])
  }
}

这段代码实现了基本的音频录制功能，用户既可以实时录制，也可以上传已有的音频文件。

5. 与Qwen3-ASR后端集成

接下来是实现与语音识别后端通信的关键部分。我们需要创建一个服务来处理API调用：

import axios from 'axios'

const API_BASE_URL = 'http://localhost:8000' // 你的后端服务地址

export const transcribeAudio = async (audioBlob: Blob): Promise<string> => {
  const formData = new FormData()
  formData.append('audio', audioBlob, 'recording.wav')
  
  try {
    const response = await axios.post(`${API_BASE_URL}/transcribe`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      timeout: 300000, // 5分钟超时，处理长音频需要较长时间
    })
    
    return response.data.text
  } catch (error) {
    console.error('识别失败:', error)
    throw new Error('语音识别服务暂时不可用')
  }
}

在Vue组件中，我们添加调用识别功能的逻辑：

const transcribedText = ref('')
const isLoading = ref(false)

const transcribeAudio = async () => {
  if (!audioBlob.value) return
  
  isLoading.value = true
  try {
    transcribedText.value = await transcribeAudioService(audioBlob.value)
  } catch (error) {
    transcribedText.value = '识别过程中出现错误，请重试'
  } finally {
    isLoading.value = false
  }
}

// 当音频准备好后自动开始识别
watch(audioBlob, (newBlob) => {
  if (newBlob) {
    transcribeAudio()
  }
})

6. 后端服务搭建示例

虽然前端已经完成，但你还需要一个后端服务来运行Qwen3-ASR-1.7B模型。这里给出一个简单的Flask后端示例：

from flask import Flask, request, jsonify
from flask_cors import CORS
import torch
from transformers import AutoModelForSpeechSeq2Seq, AutoProcessor
import soundfile as sf
import io

app = Flask(__name__)
CORS(app)

# 加载模型和处理器
model = None
processor = None

def load_model():
    global model, processor
    model_id = "Qwen/Qwen3-ASR-1.7B"
    model = AutoModelForSpeechSeq2Seq.from_pretrained(
        model_id,
        torch_dtype=torch.float16,
        device_map="auto"
    )
    processor = AutoProcessor.from_pretrained(model_id)

@app.route('/transcribe', methods=['POST'])
def transcribe():
    if 'audio' not in request.files:
        return jsonify({'error': '没有提供音频文件'}), 400
    
    audio_file = request.files['audio']
    audio_data, sampling_rate = sf.read(io.BytesIO(audio_file.read()))
    
    # 处理音频并转录
    inputs = processor(
        audio_data, 
        sampling_rate=sampling_rate, 
        return_tensors="pt",
        padding=True
    )
    
    with torch.no_grad():
        generated_ids = model.generate(**inputs)
    
    transcription = processor.batch_decode(
        generated_ids, 
        skip_special_tokens=True
    )[0]
    
    return jsonify({'text': transcription})

if __name__ == '__main__':
    load_model()
    app.run(port=8000, debug=True)

这个后端服务接收音频文件，使用Qwen3-ASR模型进行转录，然后返回结果。

7. 完整应用调试与优化

现在把所有部分组合起来，确保应用能正常工作。你可能需要处理一些常见问题：

音频格式处理：确保前后端音频格式一致

// 在前端确保音频格式正确
const prepareAudio = async (blob: Blob): Promise<Blob> => {
  // 这里可以添加音频格式转换逻辑
  return blob
}

错误处理：完善错误处理机制

const transcribeAudio = async () => {
  if (!audioBlob.value) return
  
  isLoading.value = true
  try {
    const preparedBlob = await prepareAudio(audioBlob.value)
    transcribedText.value = await transcribeAudioService(preparedBlob)
  } catch (error) {
    console.error('识别失败:', error)
    transcribedText.value = '识别失败：' + (error instanceof Error ? error.message : '未知错误')
  } finally {
    isLoading.value = false
  }
}

用户体验优化：添加进度指示和状态反馈

<template>
  <div class="status-indicator" :class="status">
    {{ statusMessage }}
  </div>
</template>

8. 实际应用与扩展思路

这个基础应用已经可以处理很多实际场景了，但你还可以进一步扩展：

多语言支持：利用Qwen3-ASR的多语言能力

// 添加语言选择功能
const selectedLanguage = ref('zh') // 默认中文

const transcribeWithLanguage = async (blob: Blob, language: string) => {
  // 在请求中指定语言参数
}

批量处理：支持批量上传和转换

<template>
  <input type="file" multiple @change="handleBatchUpload" />
</template>

实时识别：实现真正的实时语音转文字

// 实时识别需要WebSocket连接
const setupRealtimeTranscription = async () => {
  // 建立WebSocket连接并实时发送音频数据
}

实际使用中，你可以把这个应用用于会议记录、访谈转录、语音笔记等各种场景。根据我们的测试，Qwen3-ASR-1.7B在中文识别上的准确率相当不错，特别是对于带有口音或者背景噪声的音频，表现比很多开源方案都要好。

---

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。