快捷導(dǎo)航

基于Vue + SpringBoot實(shí)現(xiàn)離線MP3轉(zhuǎn)文字的具體方案

更新時(shí)間：2026年03月05日 09:24:29 作者：每日技術(shù)

本文介紹了一個(gè)基于Vue.js和SpringBoot的離線MP3轉(zhuǎn)文字方案,使用Vosk作為語(yǔ)音識(shí)別引擎,支持多種語(yǔ)言和格式,前端實(shí)現(xiàn)文件上傳和進(jìn)度顯示,后端處理音頻文件并調(diào)用語(yǔ)音識(shí)別引擎,需要的朋友可以參考下

整體架構(gòu)

這個(gè)方案將使用Vue作為前端框架，SpringBoot作為后端服務(wù)，結(jié)合本地語(yǔ)音識(shí)別庫(kù)實(shí)現(xiàn)離線MP3轉(zhuǎn)文字功能。

技術(shù)選型

前端 (Vue.js)

Vue 3 + Vite
Web Audio API - 用于音頻處理
FileReader API - 讀取本地文件
axios - 與后端通信

后端 (SpringBoot)

Spring Web - 提供REST API
JNA (Java Native Access) - 調(diào)用本地語(yǔ)音識(shí)別庫(kù)
FFmpeg (可選) - 音頻格式轉(zhuǎn)換

語(yǔ)音識(shí)別引擎 (離線)

Vosk (推薦) - 開(kāi)源離線語(yǔ)音識(shí)別工具，支持多種語(yǔ)言
PocketSphinx - 輕量級(jí)語(yǔ)音識(shí)別引擎
DeepSpeech - Mozilla開(kāi)發(fā)的語(yǔ)音識(shí)別引擎

實(shí)現(xiàn)步驟

1. 前端實(shí)現(xiàn) (Vue)

文件上傳組件

<template>
  <div>
    <input type="file" accept=".mp3" @change="handleFileUpload" />
    <button @click="transcribe" :disabled="!file">轉(zhuǎn)換</button>
    <div v-if="result">{{ result }}</div>
    <div v-if="loading">轉(zhuǎn)換中...</div>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import axios from 'axios';
 
const file = ref(null);
const result = ref('');
const loading = ref(false);
 
const handleFileUpload = (event) => {
  file.value = event.target.files[0];
};
 
const transcribe = async () => {
  if (!file.value) return;
  
  loading.value = true;
  result.value = '';
  
  const formData = new FormData();
  formData.append('file', file.value);
  
  try {
    const response = await axios.post('/api/transcribe', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    result.value = response.data.text;
  } catch (error) {
    console.error('轉(zhuǎn)換失敗:', error);
    result.value = '轉(zhuǎn)換失敗，請(qǐng)重試';
  } finally {
    loading.value = false;
  }
};
</script>

2. 后端實(shí)現(xiàn) (SpringBoot)

依賴配置 (pom.xml)

<dependencies>
    <!-- Spring Boot Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    
    <!-- JNA for native library access -->
    <dependency>
        <groupId>net.java.dev.jna</groupId>
        <artifactId>jna</artifactId>
        <version>5.10.0</version>
    </dependency>
    
    <!-- FFmpeg wrapper (optional) -->
    <dependency>
        <groupId>org.bytedeco</groupId>
        <artifactId>javacv-platform</artifactId>
        <version>1.5.6</version>
    </dependency>
</dependencies>

控制器類

@RestController
@RequestMapping("/api")
public class TranscriptionController {
    
    @PostMapping("/transcribe")
    public ResponseEntity<TranscriptionResult> transcribeAudio(@RequestParam("file") MultipartFile file) {
        try {
            // 1. 保存上傳的文件到臨時(shí)目錄
            Path tempFile = Files.createTempFile("audio_", ".mp3");
            file.transferTo(tempFile);
            
            // 2. 轉(zhuǎn)換音頻格式（如果需要）
            Path wavFile = convertToWav(tempFile);
            
            // 3. 調(diào)用語(yǔ)音識(shí)別引擎
            String text = SpeechRecognitionEngine.transcribe(wavFile);
            
            // 4. 清理臨時(shí)文件
            Files.deleteIfExists(tempFile);
            Files.deleteIfExists(wavFile);
            
            return ResponseEntity.ok(new TranscriptionResult(text));
        } catch (Exception e) {
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
                    .body(new TranscriptionResult("轉(zhuǎn)換失敗: " + e.getMessage()));
        }
    }
    
    private Path convertToWav(Path inputFile) throws Exception {
        // 使用FFmpeg將MP3轉(zhuǎn)換為WAV（如果需要）
        // 實(shí)現(xiàn)略...
        return inputFile; // 簡(jiǎn)化示例
    }
}
 
class TranscriptionResult {
    private String text;
    
    // 構(gòu)造函數(shù)、getter和setter
}

3. 語(yǔ)音識(shí)別引擎集成 (Vosk示例)

下載Vosk模型

從Vosk官網(wǎng)下載適合的語(yǔ)言模型（如中文模型），解壓到resources目錄

語(yǔ)音識(shí)別服務(wù)

public class SpeechRecognitionEngine {
    
    private static Model model;
    private static Recognizer recognizer;
    
    static {
        // 初始化Vosk模型
        String modelPath = "path/to/vosk-model";
        model = new Model(modelPath);
        recognizer = new Recognizer(model, 16000.0f);
    }
    
    public static String transcribe(Path audioFile) throws IOException, UnsupportedAudioFileException {
        // 讀取音頻文件
        AudioInputStream ais = AudioSystem.getAudioInputStream(audioFile.toFile());
        AudioFormat format = ais.getFormat();
        
        // 確保音頻格式兼容
        if (format.getSampleRate() != 16000 || format.getSampleSizeInBits() != 16) {
            throw new UnsupportedAudioFileException("不支持的音頻格式");
        }
        
        // 讀取音頻數(shù)據(jù)
        byte[] buffer = new byte[4096];
        int bytesRead;
        StringBuilder result = new StringBuilder();
        
        while ((bytesRead = ais.read(buffer)) >= 0) {
            // 處理音頻數(shù)據(jù)
            int status = recognizer.acceptWaveForm(buffer, bytesRead);
            if (status > 0) {
                result.append(recognizer.getResult()).append(" ");
            }
        }
        
        // 獲取最終結(jié)果
        result.append(recognizer.getFinalResult());
        ais.close();
        
        return result.toString();
    }
}

部署注意事項(xiàng)

模型文件：確保語(yǔ)音識(shí)別模型文件隨應(yīng)用一起部署
本地依賴：Vosk等庫(kù)可能需要本地.so/.dll文件
內(nèi)存要求：語(yǔ)音識(shí)別模型通常需要較大內(nèi)存
性能優(yōu)化：對(duì)于大音頻文件，考慮分塊處理

替代方案

如果不想使用JNA調(diào)用本地庫(kù)，可以考慮：

使用Python服務(wù)：通過(guò)Python調(diào)用Vosk/DeepSpeech，SpringBoot通過(guò)ProcessBuilder調(diào)用Python腳本
TensorFlow.js：在瀏覽器端直接進(jìn)行語(yǔ)音識(shí)別（需要加載模型）
WebAssembly：將語(yǔ)音識(shí)別引擎編譯為WASM在瀏覽器運(yùn)行