当前位置：首页 > news >正文

Qwen3-ASR-0.6B快速上手：Chrome插件直连本地ASR服务实现网页语音转写

news 2026/5/12 11:09:21

Qwen3-ASR-0.6B快速上手：Chrome插件直连本地ASR服务实现网页语音转写

1. 语音识别新选择：Qwen3-ASR-0.6B简介

语音识别技术正在改变我们与设备交互的方式，而Qwen3-ASR-0.6B为这一领域带来了全新的选择。这个轻量级但功能强大的模型支持52种语言和方言的识别，包括30种语言和22种中文方言，甚至能识别不同国家和地区的英语口音。

最令人印象深刻的是，这个仅有0.6B参数的模型在精度和效率之间找到了完美平衡。在并发数为128时，吞吐量可以达到惊人的2000倍，这意味着它能够高效处理大量语音数据，而不会占用过多计算资源。

模型采用一体化设计，既能处理流式推理（实时识别），也能进行离线推理（处理已录制的音频），还能转录长音频文件。无论你是需要实时语音转文字，还是批量处理录音文件，这个模型都能胜任。

2. 环境准备与快速部署

2.1 系统要求与依赖安装

在开始之前，确保你的系统满足以下基本要求：

Python 3.8或更高版本
至少4GB可用内存（推荐8GB）
稳定的网络连接用于下载模型

安装必要的依赖包：

pip install transformers qwen3-asr gradio torch

如果你的系统有GPU，建议安装CUDA版本的PyTorch以获得更好的性能：

pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu118

2.2 模型快速部署

部署Qwen3-ASR-0.6B非常简单，只需要几行代码就能启动一个完整的语音识别服务：

from transformers import AutoModelForSpeechSeq2Seq, AutoProcessor import torch # 加载模型和处理器 model_id = "Qwen/Qwen3-ASR-0.6B" model = AutoModelForSpeechSeq2Seq.from_pretrained( model_id, torch_dtype=torch.float16, device_map="auto" ) processor = AutoProcessor.from_pretrained(model_id)

这段代码会自动下载模型权重并配置好推理环境。首次运行时会下载约2.4GB的模型文件，请确保有足够的磁盘空间和稳定的网络连接。

3. 创建Gradio语音识别界面

3.1 构建Web界面

Gradio让我们能够快速创建一个用户友好的语音识别界面：

import gradio as gr from transformers import pipeline import numpy as np # 创建语音识别管道 asr_pipeline = pipeline( "automatic-speech-recognition", model=model, tokenizer=processor.tokenizer, feature_extractor=processor.feature_extractor, device=0 if torch.cuda.is_available() else -1 ) def transcribe_audio(audio): # 处理上传的音频文件 if audio is None: return "请录制或上传音频文件" # 进行语音识别 result = asr_pipeline(audio) return result["text"] # 创建Gradio界面 interface = gr.Interface( fn=transcribe_audio, inputs=gr.Audio(sources=["microphone", "upload"], type="filepath"), outputs="text", title="Qwen3-ASR-0.6B 语音识别", description="录制语音或上传音频文件进行实时转写" ) # 启动服务 interface.launch(server_name="0.0.0.0", server_port=7860)

3.2 界面功能说明

启动后的Gradio界面提供两种输入方式：

实时录音：点击麦克风图标直接录制语音
文件上传：上传已有的音频文件（支持mp3、wav等常见格式）

识别完成后，转写文本会立即显示在结果区域。界面设计简洁直观，即使没有技术背景的用户也能轻松使用。

4. Chrome插件开发：连接本地ASR服务

4.1 插件基础结构

创建一个Chrome扩展来捕获网页中的音频并发送到本地ASR服务：

创建manifest.json文件：

{ "manifest_version": 3, "name": "网页语音转写助手", "version": "1.0", "description": "使用Qwen3-ASR-0.6B实现网页语音转写", "permissions": ["activeTab", "scripting"], "action": { "default_popup": "popup.html", "default_icon": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" } }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["contentScript.js"] } ] }

4.2 实现音频捕获功能

创建contentScript.js文件处理网页音频：

class AudioRecorder { constructor() { this.mediaRecorder = null; this.audioChunks = []; this.isRecording = false; } // 开始录制 async startRecording() { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: { channelCount: 1, sampleRate: 16000, sampleSize: 16 } }); this.mediaRecorder = new MediaRecorder(stream); this.audioChunks = []; this.mediaRecorder.ondataavailable = (event) => { this.audioChunks.push(event.data); }; this.mediaRecorder.start(); this.isRecording = true; } catch (error) { console.error('录音权限获取失败:', error); } } // 停止录制并发送到ASR服务 async stopRecording() { return new Promise((resolve) => { this.mediaRecorder.onstop = async () => { const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' }); // 发送到本地ASR服务 const text = await this.sendToASRService(audioBlob); resolve(text); }; this.mediaRecorder.stop(); this.isRecording = false; }); } // 发送音频到本地ASR服务 async sendToASRService(audioBlob) { const formData = new FormData(); formData.append('audio', audioBlob, 'recording.wav'); try { const response = await fetch('http://localhost:7860/api/transcribe', { method: 'POST', body: formData }); const result = await response.json(); return result.text; } catch (error) { console.error('ASR服务调用失败:', error); return '识别失败，请检查服务是否启动'; } } } // 创建全局录音器实例 window.audioRecorder = new AudioRecorder();

4.3 添加弹出界面

创建popup.html提供用户控制界面：

<!DOCTYPE html> <html> <head> <style> body { width: 300px; padding: 15px; } .btn { padding: 10px 15px; margin: 5px; border: none; border-radius: 5px; cursor: pointer; } .record-btn { background: #ff4757; color: white; } .stop-btn { background: #2ed573; color: white; } #result { margin-top: 10px; padding: 10px; border: 1px solid #ddd; } </style> </head> <body> <h3>网页语音转写</h3> <button id="recordBtn" class="btn record-btn">开始录音</button> <button id="stopBtn" class="btn stop-btn" disabled>停止并转写</button> <div id="result">准备就绪...</div> <script src="popup.js"></script> </body> </html>

创建popup.js处理用户交互：

document.getElementById('recordBtn').addEventListener('click', async () => { try { await chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { chrome.scripting.executeScript({ target: { tabId: tabs[0].id }, function: startRecording }); }); document.getElementById('recordBtn').disabled = true; document.getElementById('stopBtn').disabled = false; document.getElementById('result').textContent = '录音中...'; } catch (error) { console.error('录音启动失败:', error); } }); document.getElementById('stopBtn').addEventListener('click', async () => { try { const tabs = await chrome.tabs.query({ active: true, currentWindow: true }); const result = await chrome.scripting.executeScript({ target: { tabId: tabs[0].id }, function: stopRecording }); document.getElementById('result').textContent = result[0].result || '无识别结果'; document.getElementById('recordBtn').disabled = false; document.getElementById('stopBtn').disabled = true; } catch (error) { console.error('录音停止失败:', error); } }); // 注入到页面的函数 function startRecording() { if (window.audioRecorder) { window.audioRecorder.startRecording(); } } async function stopRecording() { if (window.audioRecorder && window.audioRecorder.isRecording) { return await window.audioRecorder.stopRecording(); } return '未检测到录音'; }