浏览器端语音识别革命：whisper-web让AI语音识别直接在浏览器运行

【免费下载链接】whisper-web ML-powered speech recognition directly in your browser 项目地址: https://gitcode.com/GitHub_Trending/wh/whisper-web

你还在为语音识别需要依赖云端服务器而烦恼吗？还在担心语音数据传输的隐私安全问题吗？whisper-web带来了全新的解决方案——直接在浏览器中运行AI语音识别，无需后端支持，让语音转文字变得更快速、更安全、更便捷。

读完本文，你将了解到：

• whisper-web如何在浏览器中实现AI语音识别
• 项目的核心功能与架构设计
• 如何快速搭建本地开发环境
• 关键技术实现细节与代码解析

项目概述

whisper-web是一个基于机器学习的浏览器端语音识别项目，它利用🤗 Transformers.js在浏览器中直接实现语音识别功能。项目的核心理念是将强大的语音识别能力带到客户端，无需后端服务器支持，保护用户隐私的同时提高响应速度。

项目的主要特点包括：

• 完全在浏览器中运行，无需后端支持
• 支持多种语音模型和量化级别
• 实时语音转录与时间戳标记
• 多语言支持
• 简洁直观的用户界面

项目的完整代码结构可以通过README.md查看，其中包含了详细的项目介绍和使用说明。

快速开始

要在本地运行whisper-web项目，只需按照以下步骤操作：

1. 克隆仓库并安装依赖

git clone https://gitcode.com/GitHub_Trending/wh/whisper-web
cd whisper-web
npm install

2. 启动开发服务器

npm run dev

Firefox用户需要在about:config中将dom.workers.modules.enabled设置为true以启用Web Workers。更多详情请查看项目issue。

3. 在浏览器中打开应用

打开链接（如http://localhost:5173/）即可使用whisper-web的语音识别功能。

核心功能与界面

whisper-web提供了直观的用户界面，主要包含以下核心组件：

音频录制组件

src/components/AudioRecorder.tsx实现了浏览器端的音频录制功能。它使用MediaRecorder API捕获麦克风输入，并处理音频数据以进行后续识别。

const startRecording = async () => {
    // Reset recording (if any)
    setRecordedBlob(null);

    let startTime = Date.now();

    try {
        if (!streamRef.current) {
            streamRef.current = await navigator.mediaDevices.getUserMedia({
                audio: true,
            });
        }

        const mimeType = getMimeType();
        const mediaRecorder = new MediaRecorder(streamRef.current, {
            mimeType,
        });

        // ... 录制逻辑 ...
    } catch (error) {
        console.error("Error accessing microphone:", error);
    }
};

转录功能

转录功能的核心逻辑在src/hooks/useTranscriber.ts中实现。这个自定义Hook封装了语音识别的全部过程，包括模型加载、音频处理和结果返回。

export function useTranscriber(): Transcriber {
    const [transcript, setTranscript] = useState<TranscriberData | undefined>(
        undefined,
    );
    const [isBusy, setIsBusy] = useState(false);
    const [isModelLoading, setIsModelLoading] = useState(false);
    const [progressItems, setProgressItems] = useState<ProgressItem[]>([]);

    // ... 转录逻辑 ...

    return transcriber;
}

Web Worker处理

为了避免阻塞主线程影响用户体验，whisper-web使用Web Worker在后台处理语音识别任务。相关代码在src/worker.js中实现：

self.addEventListener("message", async (event) => {
    const message = event.data;

    // 处理音频数据并进行转录
    let transcript = await transcribe(
        message.audio,
        message.model,
        message.multilingual,
        message.quantized,
        message.subtask,
        message.language,
    );
    if (transcript === null) return;

    // 将结果发送回主线程
    self.postMessage({
        status: "complete",
        task: "automatic-speech-recognition",
        data: transcript,
    });
});

技术架构

whisper-web的技术架构可以分为以下几个主要部分：

前端界面层

• index.html: 应用入口点
• src/App.tsx: 主应用组件
• src/components/: UI组件集合，包括音频录制、播放器、转录按钮等

核心逻辑层

• src/hooks/useTranscriber.ts: 转录功能的核心Hook
• src/utils/: 工具函数集合，包括音频处理、Blob修复等
• src/worker.js: Web Worker脚本，处理后台语音识别任务

配置与构建层

• package.json: 项目依赖和脚本配置
• vite.config.ts: Vite构建配置
• tsconfig.json: TypeScript配置
• tailwind.config.cjs: Tailwind CSS配置

关键技术解析

音频录制与处理

whisper-web使用浏览器的MediaRecorder API进行音频录制。src/components/AudioRecorder.tsx中的getMimeType函数会自动选择浏览器支持的最佳音频格式：

function getMimeType() {
    const types = [
        "audio/webm",
        "audio/mp4",
        "audio/ogg",
        "audio/wav",
        "audio/aac",
    ];
    for (let i = 0; i < types.length; i++) {
        if (MediaRecorder.isTypeSupported(types[i])) {
            return types[i];
        }
    }
    return undefined;
}

录制完成后，音频数据会经过处理，特别是对于WebM格式，会进行持续时间修复：

if (mimeType === "audio/webm") {
    blob = await webmFixDuration(blob, duration, blob.type);
}

模型加载与管理

whisper-web使用src/worker.js中的PipelineFactory类来管理模型实例，确保每种类型的模型只创建一个实例：

class PipelineFactory {
    static task = null;
    static model = null;
    static quantized = null;
    static instance = null;

    static async getInstance(progress_callback = null) {
        if (this.instance === null) {
            this.instance = pipeline(this.task, this.model, {
                quantized: this.quantized,
                progress_callback,
                revision: this.model.includes("/whisper-medium") ? "no_attentions" : "main"
            });
        }
        return this.instance;
    }
}

实时转录实现

实时转录功能通过回调函数实现，在src/worker.js中定义了处理中间结果的回调：

function callback_function(item) {
    // 更新最后一个块的tokens
    last.tokens = [...item[0].output_token_ids];

    // 合并文本块
    let data = transcriber.tokenizer._decode_asr(chunks_to_process, {
        time_precision: time_precision,
        return_timestamps: true,
        force_full_sequences: false,
    });

    // 发送更新到主线程
    self.postMessage({
        status: "update",
        task: "automatic-speech-recognition",
        data: data,
    });
}

自定义与扩展

whisper-web提供了多种自定义选项，允许用户根据需求调整语音识别参数：

模型选择

在src/hooks/useTranscriber.ts中，定义了模型选择相关的状态管理：

const [model, setModel] = useState<string>(Constants.DEFAULT_MODEL);
const [subtask, setSubtask] = useState<string>(Constants.DEFAULT_SUBTASK);
const [quantized, setQuantized] = useState<boolean>(Constants.DEFAULT_QUANTIZED);
const [multilingual, setMultilingual] = useState<boolean>(Constants.DEFAULT_MULTILINGUAL);
const [language, setLanguage] = useState<string>(Constants.DEFAULT_LANGUAGE);

音频处理

src/utils/AudioUtils.ts提供了音频处理的工具函数，包括音频格式化、时间戳处理等功能，方便对音频数据进行各种转换和操作。

总结与展望

whisper-web通过将AI语音识别能力直接带到浏览器中，为用户提供了一种快速、安全、隐私友好的语音转文字解决方案。它充分利用了现代浏览器的强大能力，将复杂的机器学习模型运行在客户端，展示了前端技术在AI领域的巨大潜力。

未来，whisper-web可以在以下方面进一步优化和扩展：

• 模型优化：减小模型体积，提高加载速度
• 功能扩展：增加语音合成、实时翻译等功能
• 性能提升：优化识别速度和准确性
• 兼容性增强：提高在各种浏览器和设备上的兼容性

通过GitHub_Trending/wh/whisper-web仓库，你可以获取项目的完整代码，参与贡献，或者根据自己的需求进行二次开发。

无论是开发人员还是普通用户，whisper-web都为我们展示了一个更加开放、去中心化的AI应用未来。立即尝试，体验浏览器端语音识别的魅力吧！

【免费下载链接】whisper-web ML-powered speech recognition directly in your browser 项目地址: https://gitcode.com/GitHub_Trending/wh/whisper-web