Qwen3-ForcedAligner-0.6B与Vue.js构建语音标注平台

Qwen3-ForcedAligner-0.6B与Vue.js构建语音标注平台

你有没有遇到过这样的场景？手头有一段音频和对应的文字稿，想精确地知道每个词、甚至每个字在音频中的起止时间。无论是做字幕、分析演讲节奏，还是构建语音交互应用，这个“对齐”的过程都至关重要。传统方法要么精度不够，要么操作繁琐，对开发者来说是个不小的挑战。

最近，Qwen团队开源的Qwen3-ForcedAligner-0.6B模型，正好能解决这个问题。它就像一个“语音时间戳神探”，能快速、精准地找出文字在音频中的位置。但光有强大的后端模型还不够，我们还需要一个直观、易用的界面来操作和展示结果。

今天，我就带你用Vue.js这个流行的前端框架，结合Qwen3-ForcedAligner-0.6B，一步步搭建一个属于自己的交互式语音标注平台。整个过程就像搭积木，前端负责展示和交互，后端负责核心计算，两者通过API“握手”合作。即使你之前没怎么接触过语音处理，跟着做下来也能轻松上手。

1. 项目核心：理解我们要做什么

在动手写代码之前，我们先花几分钟搞清楚这个平台要干什么，以及为什么选择这两个技术组合。

简单来说，这个平台的核心功能是：用户上传一段音频文件（比如MP3、WAV格式），同时输入或上传对应的文字稿。然后，平台调用后端的Qwen3-ForcedAligner模型，自动分析出文字稿中每个词（或字）在音频中开始和结束的精确时间点。最后，前端以可视化的方式（比如一个可交互的波形图加文字高亮）把结果展示出来，让用户一目了然，甚至能进行微调。

为什么是Qwen3-ForcedAligner-0.6B？根据官方介绍，这个模型有几点特别吸引人：

• 精度高：在时间戳预测的准确性上，它比一些传统的主流对齐工具表现更好。
• 速度快：采用非自回归的推理方式，处理效率很高，单次推理的“实时率”很低，意味着处理音频很快。
• 支持多语言：能处理11种语言的语音文本对齐，适用性广。
• 模型小巧：0.6B的参数量，对部署的硬件要求相对友好。

为什么是Vue.js？Vue.js以其声明式渲染和组件化开发闻名，对于构建这类交互复杂、状态繁多的单页面应用（SPA）特别合适。我们可以很方便地管理音频播放、波形绘制、时间戳高亮等状态，并且能快速搭建出美观、响应式的用户界面。

整个项目的架构非常清晰：Vue.js前端作为“门面”和“控制中心”，负责收集用户输入、展示结果和交互；一个独立的Python后端服务（搭载Qwen3-ForcedAligner模型）作为“大脑”，负责执行核心的对齐计算；两者通过HTTP API进行通信。

2. 环境准备与后端服务搭建

我们的旅程从后端开始。你需要准备一个能运行Python的环境，建议使用Python 3.8或更高版本。

2.1 安装依赖与模型

首先，创建一个新的项目目录，并在里面为后端服务新建一个文件夹，比如叫backend。

mkdir voice-aligner-platform cd voice-aligner-platform mkdir backend cd backend

然后，我们创建一个Python虚拟环境来隔离依赖（这一步可选，但强烈推荐）。

python -m venv venv # 在Windows上激活: venv\Scripts\activate # 在Mac/Linux上激活: source venv/bin/activate

激活虚拟环境后，安装必要的Python包。核心是Qwen3-ASR的推理库，它包含了我们需要的对齐模型。

pip install qwen-asr

qwen-asr包会处理模型下载和推理框架。接下来，我们写一个简单的FastAPI应用来提供对齐服务。FastAPI能让我们快速构建出高性能的API。

pip install fastapi uvicorn

2.2 编写后端API服务

在backend目录下，创建一个名为main.py的文件，内容如下：

from fastapi import FastAPI, File, UploadFile, Form from fastapi.middleware.cors import CORSMiddleware import tempfile import os from qwen_asr import Qwen3ForcedAligner # 初始化模型 # 第一次运行时会自动从Hugging Face下载模型，请确保网络通畅 print("正在加载Qwen3-ForcedAligner-0.6B模型，首次加载可能需要几分钟...") aligner = Qwen3ForcedAligner(model_name="Qwen/Qwen3-ForcedAligner-0.6B") print("模型加载完毕！") app = FastAPI(title="语音强制对齐API") # 非常重要：允许Vue前端跨域访问 app.add_middleware( CORSMiddleware, allow_origins=["http://localhost:8080"], # 替换为你的Vue开发服务器地址 allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) @app.post("/align") async def align_audio_text( audio: UploadFile = File(...), text: str = Form(...), language: str = Form("zh"), # 默认中文 granularity: str = Form("word") # 默认词级别对齐 ): """ 对齐音频和文本的API端点。 参数: audio: 上传的音频文件 text: 对应的文本 language: 语言代码，如 'zh', 'en' granularity: 对齐粒度，'word' 或 'char' """ # 将上传的音频保存到临时文件 suffix = os.path.splitext(audio.filename)[1] with tempfile.NamedTemporaryFile(delete=False, suffix=suffix) as tmp_audio: tmp_audio.write(await audio.read()) tmp_audio_path = tmp_audio.name try: # 调用模型进行对齐 # 注意：模型对输入音频长度有限制（例如5分钟），请确保音频长度在限制内 result = aligner.align( audio=tmp_audio_path, text=text, language=language, granularity=granularity ) # 整理返回结果，使其更易于前端处理 # 假设返回的result包含'segments'列表，每个段有'text', 'start', 'end' formatted_segments = [] if hasattr(result, 'segments'): for seg in result.segments: formatted_segments.append({ "text": seg.text, "start": seg.start, # 开始时间（秒） "end": seg.end # 结束时间（秒） }) else: # 如果模型返回格式不同，请根据实际情况调整 formatted_segments = [{"text": text, "start": 0, "end": 1}] # 示例 return { "success": True, "message": "对齐成功", "segments": formatted_segments, "audio_duration": result.duration if hasattr(result, 'duration') else 0 } except Exception as e: return { "success": False, "message": f"对齐过程中发生错误: {str(e)}", "segments": [] } finally: # 清理临时文件 os.unlink(tmp_audio_path) @app.get("/health") async def health_check(): return {"status": "healthy", "model": "Qwen3-ForcedAligner-0.6B"} if __name__ == "__main__": import uvicorn uvicorn.run(app, host="0.0.0.0", port=8000)

这段代码做了几件事：

1. 加载Qwen3-ForcedAligner模型。
2. 创建一个FastAPI应用，并添加CORS中间件（这样Vue前端才能调用它）。
3. 定义了一个/align接口，接收音频文件、文本、语言和粒度参数。
4. 在对齐完成后，将结果整理成结构化的JSON数据返回给前端。
5. 提供了一个/health接口用于检查服务状态。

现在，在backend目录下运行这个服务：

python main.py

如果一切顺利，你会看到模型加载的日志，然后服务在http://localhost:8000启动。访问http://localhost:8000/health应该能看到健康的返回信息。

注意：首次运行下载模型可能需要一些时间，取决于你的网速。模型文件较大，请耐心等待。

3. 使用Vue.js构建前端界面

后端服务跑起来了，现在我们来构建用户直接操作的前端。我们将使用Vue 3和Composition API，因为它更灵活。同时，我们会引入几个好用的库来简化开发：

• axios：用于调用后端API。
• wavesurfer.js：一个强大的音频波形可视化库。
• Element Plus或Vuetify：UI组件库，让我们快速搭建出好看的界面（这里以Element Plus为例）。

3.1 创建Vue项目并安装依赖

打开一个新的终端窗口，在项目根目录（voice-aligner-platform）下，运行：

# 使用Vue CLI创建项目，如果你没有安装，可以先运行 npm install -g @vue/cli vue create frontend # 在提示中，选择 Vue 3 和默认配置即可，或者手动选择需要的特性。 cd frontend # 安装必要的依赖 npm install axios wavesurfer.js element-plus # 如果你需要图标，也可以安装 @element-plus/icons-vue

3.2 构建核心组件

我们将创建一个主要的组件VoiceAligner.vue。为了清晰，我们把波形图和控制逻辑放在一个子组件里。首先，在src/components目录下创建VoiceAligner.vue。

<template> <div class="voice-aligner-container"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>语音文本强制对齐平台</span> <el-button type="primary" @click="handleAlign" :loading="alignLoading"> 开始对齐 </el-button> </div> </template> <!-- 文件与文本输入区域 --> <div class="input-area"> <el-row :gutter="20"> <el-col :span="12"> <el-card shadow="never"> <template #header>音频输入</template> <el-upload class="upload-demo" drag action="#" :auto-upload="false" :on-change="handleAudioUpload" :show-file-list="false" accept="audio/*" > <el-icon class="el-icon--upload"><upload-filled /></el-icon> <div class="el-upload__text"> 拖拽音频文件到此处，或 <em>点击上传</em> </div> <template #tip> <div class="el-upload__tip"> 支持 MP3, WAV 等格式，建议时长不超过5分钟。 </div> </template> </el-upload> <div v-if="audioFile" class="file-info"> 已选择文件: {{ audioFile.name }} <el-button size="small" type="danger" text @click="audioFile = null">清除</el-button> </div> </el-card> </el-col> <el-col :span="12"> <el-card shadow="never"> <template #header>文本输入</template> <el-input v-model="inputText" :rows="10" type="textarea" placeholder="请输入或粘贴与音频对应的文本内容..." resize="none" /> <div class="action-row"> <el-select v-model="selectedLanguage" placeholder="选择语言"> <el-option label="中文" value="zh" /> <el-option label="英文" value="en" /> <!-- 可根据需要添加更多语言 --> </el-select> <el-select v-model="selectedGranularity" placeholder="对齐粒度"> <el-option label="词级别" value="word" /> <el-option label="字级别" value="char" /> </el-select> </div> </el-card> </el-col> </el-row> </div> <!-- 波形图与结果展示区域 --> <div class="result-area" v-if="segments.length > 0"> <el-card shadow="never"> <template #header> <div class="result-header"> <span>对齐结果可视化</span> <span>音频时长: {{ (audioDuration || 0).toFixed(2) }} 秒</span> </div> </template> <AudioWaveform :audio-url="audioObjectUrl" :segments="segments" @segment-clicked="onSegmentClicked" /> </el-card> <!-- 时间戳列表 --> <el-card shadow="never" class="timestamp-list"> <template #header>详细时间戳</template> <el-table :data="segments" stripe style="width: 100%"> <el-table-column prop="text" label="文本" width="180" /> <el-table-column label="开始时间"> <template #default="scope"> {{ formatTime(scope.row.start) }} </template> </el-table-column> <el-table-column label="结束时间"> <template #default="scope"> {{ formatTime(scope.row.end) }} </template> </el-table-column> <el-table-column label="时长"> <template #default="scope"> {{ (scope.row.end - scope.row.start).toFixed(2) }}秒 </template> </el-table-column> <el-table-column label="操作" width="100"> <template #default="scope"> <el-button link type="primary" @click="playSegment(scope.row)"> 试听 </el-button> </template> </el-table-column> </el-table> </el-card> </div> <!-- 加载与错误提示 --> <div v-if="alignLoading" class="loading-overlay"> <el-icon class="is-loading"><Loading /></el-icon> <span>正在对齐中，请稍候...</span> </div> <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon closable @close="errorMessage = ''" /> </el-card> </div> </template> <script setup> import { ref, computed, onUnmounted } from 'vue' import { ElMessage } from 'element-plus' import { UploadFilled, Loading } from '@element-plus/icons-vue' import axios from 'axios' import AudioWaveform from './AudioWaveform.vue' // 我们稍后创建这个组件 // 响应式数据 const audioFile = ref(null) const inputText = ref('') const selectedLanguage = ref('zh') const selectedGranularity = ref('word') const alignLoading = ref(false) const segments = ref([]) // 对齐结果 const audioDuration = ref(0) const errorMessage = ref('') const audioObjectUrl = ref('') // 用于预览音频的Object URL // 处理音频文件上传 const handleAudioUpload = (file) => { audioFile.value = file.raw // 为上传的文件创建临时URL，用于波形图预览 if (audioObjectUrl.value) { URL.revokeObjectURL(audioObjectUrl.value) } audioObjectUrl.value = URL.createObjectURL(file.raw) } // 格式化时间显示 (秒 -> MM:SS.mmm) const formatTime = (seconds) => { const mins = Math.floor(seconds / 60) const secs = (seconds % 60).toFixed(3) return `${mins.toString().padStart(2, '0')}:${secs.padStart(6, '0')}` } // 播放指定片段 const playSegment = (segment) => { // 这个功能需要与AudioWaveform组件联动，我们可以在子组件内实现 // 这里先留空，通过事件传递给子组件 console.log('播放片段:', segment) } // 处理子组件传来的片段点击事件 const onSegmentClicked = (segment) => { console.log('点击了片段:', segment) // 可以在这里触发播放或高亮其他UI } // 核心对齐函数 const handleAlign = async () => { // 验证输入 if (!audioFile.value) { ElMessage.warning('请先上传音频文件') return } if (!inputText.value.trim()) { ElMessage.warning('请输入文本内容') return } alignLoading.value = true errorMessage.value = '' segments.value = [] const formData = new FormData() formData.append('audio', audioFile.value) formData.append('text', inputText.value) formData.append('language', selectedLanguage.value) formData.append('granularity', selectedGranularity.value) try { // 注意：这里的地址需要和后端服务地址一致 const response = await axios.post('http://localhost:8000/align', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) if (response.data.success) { segments.value = response.data.segments audioDuration.value = response.data.audio_duration ElMessage.success('对齐完成！') } else { errorMessage.value = response.data.message || '对齐失败' ElMessage.error(errorMessage.value) } } catch (err) { errorMessage.value = `请求出错: ${err.message}。请确保后端服务已启动 (http://localhost:8000)` ElMessage.error(errorMessage.value) console.error(err) } finally { alignLoading.value = false } } // 组件卸载时清理Object URL onUnmounted(() => { if (audioObjectUrl.value) { URL.revokeObjectURL(audioObjectUrl.value) } }) </script> <style scoped> .voice-aligner-container { padding: 20px; max-width: 1400px; margin: 0 auto; } .card-header { display: flex; justify-content: space-between; align-items: center; } .input-area { margin-bottom: 20px; } .file-info { margin-top: 10px; padding: 8px; background-color: #f5f7fa; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; } .action-row { margin-top: 15px; display: flex; gap: 10px; } .result-area { margin-top: 30px; } .result-header { display: flex; justify-content: space-between; align-items: center; } .timestamp-list { margin-top: 20px; } .loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.7); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2000; } </style>

3.3 创建音频波形图组件

接下来，创建AudioWaveform.vue组件，这是平台最“炫酷”的部分。

<template> <div class="audio-waveform-container"> <!-- 波形图容器 --> <div ref="waveformRef" class="waveform"></div> <!-- 控制条 --> <div class="controls" v-if="wavesurfer"> <el-button-group> <el-button :icon="isPlaying ? 'VideoPause' : 'VideoPlay'" @click="togglePlay"> {{ isPlaying ? '暂停' : '播放' }} </el-button> <el-button icon="RefreshLeft" @click="skipBackward">-5s</el-button> <el-button icon="RefreshRight" @click="skipForward">+5s</el-button> </el-button-group> <div class="time-display"> {{ formatTime(currentTime) }} / {{ formatTime(duration) }} </div> <el-slider v-model="sliderTime" :max="duration * 1000" :step="100" @change="onSliderChange" style="flex-grow: 1; margin: 0 20px;" /> <el-slider v-model="volume" :max="1" :step="0.1" @change="onVolumeChange" style="width: 100px;" > <template #prefix> <el-icon><Headset /></el-icon> </template> </el-slider> </div> <!-- 区域标记层 (通过绝对定位覆盖在波形图上) --> <div class="regions-layer" ref="regionsLayerRef" v-if="segments.length > 0"> <div v-for="(segment, index) in segments" :key="index" class="region-marker" :style="{ left: `${(segment.start / duration) * 100}%`, width: `${((segment.end - segment.start) / duration) * 100}%` }" :title="`${segment.text} (${formatTime(segment.start)} - ${formatTime(segment.end)})`" @click="emit('segment-clicked', segment)" > <span class="region-text">{{ segment.text }}</span> </div> </div> </div> </template> <script setup> import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue' import WaveSurfer from 'wavesurfer.js' import { VideoPlay, VideoPause, RefreshLeft, RefreshRight, Headset } from '@element-plus/icons-vue' const props = defineProps({ audioUrl: String, segments: { type: Array, default: () => [] } }) const emit = defineEmits(['segment-clicked']) const waveformRef = ref(null) const regionsLayerRef = ref(null) const wavesurfer = ref(null) const isPlaying = ref(false) const currentTime = ref(0) const duration = ref(0) const sliderTime = ref(0) const volume = ref(0.5) // 初始化WaveSurfer onMounted(() => { if (!waveformRef.value) return wavesurfer.value = WaveSurfer.create({ container: waveformRef.value, waveColor: '#409EFF', progressColor: '#67C23A', cursorColor: '#F56C6C', barWidth: 2, barRadius: 3, cursorWidth: 1, height: 150, barGap: 3, responsive: true, backend: 'WebAudio', // 或 'MediaElement' }) // 绑定事件 wavesurfer.value.on('ready', () => { duration.value = wavesurfer.value.getDuration() wavesurfer.value.setVolume(volume.value) }) wavesurfer.value.on('audioprocess', () => { currentTime.value = wavesurfer.value.getCurrentTime() sliderTime.value = currentTime.value * 1000 }) wavesurfer.value.on('play', () => { isPlaying.value = true }) wavesurfer.value.on('pause', () => { isPlaying.value = false }) wavesurfer.value.on('finish', () => { isPlaying.value = false }) // 加载音频 if (props.audioUrl) { wavesurfer.value.load(props.audioUrl) } }) // 监听音频URL变化 watch(() => props.audioUrl, (newUrl) => { if (wavesurfer.value && newUrl) { wavesurfer.value.load(newUrl) } }) // 控制函数 const togglePlay = () => { if (wavesurfer.value) { wavesurfer.value.playPause() } } const skipBackward = () => { if (wavesurfer.value) { wavesurfer.value.skip(-5) } } const skipForward = () => { if (wavesurfer.value) { wavesurfer.value.skip(5) } } const onSliderChange = (val) => { if (wavesurfer.value) { wavesurfer.value.seekTo(val / 1000 / duration.value) } } const onVolumeChange = (val) => { if (wavesurfer.value) { wavesurfer.value.setVolume(val) } } // 格式化时间 const formatTime = (seconds) => { if (isNaN(seconds)) return '00:00' const mins = Math.floor(seconds / 60) const secs = (seconds % 60).toFixed(2) return `${mins.toString().padStart(2, '0')}:${secs.padStart(5, '0')}` } // 清理资源 onUnmounted(() => { if (wavesurfer.value) { wavesurfer.value.destroy() } }) </script> <style scoped> .audio-waveform-container { position: relative; margin-bottom: 20px; } .waveform { border: 1px solid #dcdfe6; border-radius: 4px; margin-bottom: 10px; } .controls { display: flex; align-items: center; padding: 10px; background: #f5f7fa; border-radius: 4px; gap: 10px; } .time-display { font-family: monospace; min-width: 120px; text-align: center; } .regions-layer { position: absolute; top: 0; left: 0; right: 0; height: 150px; /* 与波形图高度一致 */ pointer-events: none; /* 允许点击穿透到波形图 */ } .region-marker { position: absolute; top: 0; height: 100%; background-color: rgba(103, 194, 58, 0.3); /* 半透明绿色 */ border-left: 2px solid #67C23A; border-right: 2px solid #67C23A; pointer-events: auto; /* 允许区域本身接收点击事件 */ cursor: pointer; transition: background-color 0.2s; overflow: hidden; } .region-marker:hover { background-color: rgba(103, 194, 58, 0.5); } .region-text { position: absolute; bottom: 2px; left: 2px; right: 2px; font-size: 10px; color: #333; background: rgba(255, 255, 255, 0.8); padding: 1px 3px; border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } </style>

3.4 集成到主应用

最后，修改src/App.vue和main.js来使用我们的组件和Element Plus。

src/main.js:

import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' const app = createApp(App) app.use(ElementPlus) app.mount('#app')

src/App.vue:

<template> <div id="app"> <VoiceAligner /> </div> </template> <script> import VoiceAligner from './components/VoiceAligner.vue' export default { name: 'App', components: { VoiceAligner } } </script> <style> body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background-color: #f0f2f5; } </style>

现在，在frontend目录下运行开发服务器：

npm run serve

访问http://localhost:8080（端口可能不同，以终端输出为准），你应该能看到完整的语音标注平台界面了！

4. 快速上手示例

让我们用一个简单的例子来测试整个流程。

1. 准备素材：找一段简短的普通话录音（比如手机录一句“今天天气真好”），保存为test.wav。准备好对应的文字稿：“今天天气真好”。
2. 启动服务：确保后端服务 (python main.py) 和前端服务 (npm run serve) 都在运行。
3. 操作平台：
   • 在前端界面，将test.wav拖拽到“音频输入”区域。
   • 在“文本输入”框内粘贴或输入“今天天气真好”。
   • 语言选择“中文”，粒度选择“词级别”。
   • 点击“开始对齐”按钮。
4. 查看结果：稍等片刻（模型推理需要一点时间），下方会显示出波形图，并且“今天”、“天气”、“真好”这几个词应该会被不同颜色的半透明矩形框在波形图上标记出来，分别对应它们发音的时间段。同时，表格里会列出每个词的精确开始和结束时间。

5. 实用技巧与进阶想法

到这里，一个可用的基础平台就搭建完成了。但在实际使用中，你可能还会遇到一些情况，这里提供几点思路：

• 处理长音频：Qwen3-ForcedAligner对单次处理的音频长度有限制（例如5分钟）。如果音频很长，可以在后端先对音频进行分段（VAD，语音活动检测），然后分段调用对齐模型，最后将结果合并。
• 结果微调：对齐结果可能不完全精确。你可以在前端增加交互，允许用户拖动波形图上的区域标记来手动调整时间戳，然后将调整后的数据保存或导出。
• 导出格式：增加导出功能，将时间戳结果导出为SRT字幕格式、JSON或CSV文件，方便在其他软件中使用。
• 性能优化：对于频繁使用的场景，可以考虑在后端使用模型缓存、异步队列来处理请求，避免让用户长时间等待。
• 错误处理：完善前端的错误提示，比如文件格式不支持、网络超时、模型推理失败等，给用户更友好的反馈。

整体用下来，Vue.js和Qwen3-ForcedAligner的组合确实能快速搭建出一个功能实用的语音标注工具。前端负责让一切操作变得直观简单，后端则默默提供了强大的计算能力。这种前后端分离的模式也便于后续扩展，比如换用更强大的对齐模型，或者为波形图增加更多分析功能。

如果你刚开始接触Vue或语音处理，这个项目是一个很好的练手机会。你可以先从理解现有代码开始，然后尝试添加上面提到的一个小功能，比如导出SRT字幕，逐步把它改造成更符合自己需求的工具。

获取更多AI镜像

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