尧图网页设计 
使用 Electron 构建跨平台语音转文字桌面应用从录音、云端与本地双模式识别到打包分发【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本文是一份以 docs/en/stage-3/cross-platform/electron-voice-to-text/index.md 为骨架的完整实战指南讲解如何从零构建一款可安装到 Windows、macOS、Linux 的语音转文字Speech-to-Text桌面应用。你将在 Easy Vibe 教程体系中完成一个完整闭环用 Electron Forge 初始化工程、理解主进程与渲染进程的 IPC 通信、通过getUserMedia采集麦克风音频再分别接入云端 Whisper API 与本地 whisper.cpp 两种识别模式最后用electron-forge make打包出可分发的安装包。读完本文你将具备独立完成录音 → 识别 → 展示 → 打包全流程的能力并掌握 Electron 多进程架构、权限处理与跨平台分发中的关键注意事项。为什么选择 Electron 构建桌面语音应用日常使用的 VS Code、Slack、Discord、Notion 等桌面软件底层都是基于 Electron 构建的。Electron 是一个开源框架允许你使用构建网页的同一套技术栈——HTML CSS JavaScript——开发可跨 Windows、macOS、Linux 运行的桌面应用。其原理非常直观把 Chromium 和 Node.js 打包在一起你的网页就变成了一个独立的桌面程序。一句话理解Electron 一个隐形 Chrome 浏览器 Node.js 系统能力。核心架构主进程、渲染进程与预加载脚本一个 Electron 应用包含两种进程类型理解它们之间的边界是开发的关键主进程Main Process应用的总指挥。负责创建窗口、管理应用生命周期、访问文件系统等原生能力。运行在 Node.js 环境中可以使用全部 Node.js 模块。每个应用只有一个主进程。渲染进程Renderer Process应用的门面。本质上是一个 Chromium 网页负责 UI 渲染。每个窗口对应一个渲染进程。出于安全考虑渲染进程不能直接访问 Node.js API。预加载脚本Preload Script主进程与渲染进程之间的桥梁。通过contextBridge将选定的 API 安全地暴露给渲染进程。它们之间通过IPC进程间通信Inter-Process Communication协作就像打电话渲染进程说我要开始录音主进程收到请求后去调用系统麦克风。我们将要构建什么本次教程将构建一款**语音转文字Speech-to-Text**桌面应用功能非常聚焦点击开始录音按钮应用开始监听麦克风说话完毕后点击停止应用将音频交给 AI 识别识别出的文字显示在 UI 中可一键复制。应用提供两种识别模式可通过设置面板切换对比维度云端 API 模式本地模型模式代表方案OpenAI Whisper APIwhisper.cpp是否依赖网络是否识别速度取决于网络取决于硬件Apple Silicon 上非常快中文识别质量优秀优秀large-v3 模型成本$0.006/分钟免费模型体积无需下载tiny 模型 75MBlarge 模型 3GB适用场景快速上手、轻量使用注重隐私、离线使用、长期高频使用重要提醒Web Speech API 在 Electron 中不可用如果你搜索过Electron 语音识别可能会看到建议使用浏览器内置Web Speech API的方案。请注意这在 Electron 中行不通。Google 已停止对非 Chrome/Edge 浏览器外壳的语音 API 支持。Electron 基于 Chromium但它本身不是 Chrome因此window.SpeechRecognition会直接报错。这正是我们需要 Whisper API 或 whisper.cpp 这类独立方案的原因。教程路线图本教程按以下步骤完成全流程创建 Electron 项目使用 Electron Forge 脚手架初始化工程理解进程间通信实现录音在渲染进程中采集麦克风输入并处理音频数据云端识别方案 A使用 OpenAI Whisper API 完成语音转文字本地识别方案 B使用 whisper.cpp 在本地无网环境下识别打包分发将应用打包为可安装的桌面程序。创建 Electron 项目用 AI 初始化项目打开你的 AI 编程助手Cursor / Trae / Claude Code输入以下提示词Please help me create a new Electron project with Electron Forge using the Vite template. The project name is voice-to-text. Please run: npx create-electron-app voice-to-text --templatevite After creation, enter the project directory and install dependencies.Electron Forge 是 Electron 官方推荐的脚手架工具负责处理项目初始化、打包、分发等繁琐配置。创建完成后项目结构大致如下voice-to-text/ ├── src/ │ ├── main.js # 主进程入口 │ ├── preload.js # 预加载脚本桥梁 │ ├── renderer.js # 渲染进程入口 │ └── index.html # 应用 HTML 页面 ├── forge.config.js # Electron Forge 配置 ├── vite.main.config.mjs # 主进程 Vite 配置 ├── vite.preload.config.mjs # 预加载脚本 Vite 配置 ├── vite.renderer.config.mjs # 渲染进程 Vite 配置 └── package.json启动并预览继续让 AI 启动开发服务器Please help me start the Electron development server by running npm start几秒后桌面窗口出现这就是你的 Electron 应用。虽然目前只是默认欢迎页但它已经是真正意义上的桌面程序了。理解 IPC进程间通信在实现语音功能之前需要理解 Electron 最重要的概念IPC。由于渲染进程UI与主进程系统能力相互隔离它们必须通过 IPC打电话来协作Renderer process (UI) Main process (system) │ │ │── I want to start recording ──────────→ │ │ │── Call microphone │ │── Process audio │ ←──── Here is the result ─────────────│ │ │ │── Display text in UI │在代码层面这个通信通过preload.js桥接// preload.js - safely expose APIs to renderer process const { contextBridge, ipcRenderer } require(electron) contextBridge.exposeInMainWorld(electronAPI, { // Renderer - Main sendAudio: (audioData) ipcRenderer.invoke(transcribe-audio, audioData), // Main - Renderer onResult: (callback) ipcRenderer.on(transcription-result, callback) })// main.js - main process listens for messages const { ipcMain } require(electron) ipcMain.handle(transcribe-audio, async (event, audioData) { // Call Whisper API or whisper.cpp here const text await transcribe(audioData) return text })需要留意的是contextBridge暴露 API 的方式与本仓库中的 Electron 示例工程一脉相承——例如 examples/trae-3d-block-game/electron/main.js 中的BrowserWindow同样通过webPreferences关闭nodeIntegration、开启contextIsolation与sandbox这正是 Electron 官方推荐的安全实践渲染进程不直接接触 Node.js所有系统能力一律经由预加载脚本与 IPC 中转。实现录音功能在渲染进程中采集麦克风输入浏览器即 Electron 渲染进程提供了navigator.mediaDevices.getUserMedia来访问麦克风。让 AI 帮助实现录音Please help me modify src/index.html and src/renderer.js to implement: UI: 1. A large circular Start Recording button, which turns into a red Stop Recording button when clicked 2. Show a simple pulse animation while recording 3. A text display area below for recognition results 4. Two buttons at the bottom: Copy Text and Clear 5. A settings icon at top-right to switch recognition mode (cloud/local) Recording logic (in renderer.js): 1. On button click, request microphone access via navigator.mediaDevices.getUserMedia 2. Use MediaRecorder to record audio in webm format 3. After stopping, convert audio Blob to ArrayBuffer 4. Send it to main process via window.electronAPI.sendAudio 5. Wait for recognition result from main process and display it核心录音代码如下// renderer.js let mediaRecorder null let audioChunks [] async function startRecording() { const stream await navigator.mediaDevices.getUserMedia({ audio: { channelCount: 1, sampleRate: 16000, echoCancellation: true, noiseSuppression: true } }) mediaRecorder new MediaRecorder(stream, { mimeType: audio/webm;codecsopus }) audioChunks [] mediaRecorder.ondataavailable (e) audioChunks.push(e.data) mediaRecorder.onstop async () { const audioBlob new Blob(audioChunks, { type: audio/webm }) const arrayBuffer await audioBlob.arrayBuffer() // Send to main process for transcription const result await window.electronAPI.sendAudio(arrayBuffer) document.getElementById(result).textContent result } mediaRecorder.start() }上述代码的配置项都是有讲究的channelCount: 1输出单声道、sampleRate: 16000是语音识别领域的标准采样率Whisper 与 whisper.cpp 对此支持最佳、echoCancellation与noiseSuppression可提升嘈杂环境下的识别准确率audio/webm;codecsopus是 Chromium 原生支持的录音封装格式。处理麦克风权限Electron 默认会拦截权限请求我们需要在主进程中显式放行麦克风Please help me add microphone permission handling in main.js: 1. Use session.defaultSession.setPermissionRequestHandler to handle permission requests 2. Auto-allow when request type is media 3. For macOS, ensure microphone usage description is declared in package.json or entitlements// Add to main.js const { session } require(electron) session.defaultSession.setPermissionRequestHandler( (webContents, permission, callback) { if (permission media) { callback(true) } else { callback(false) } } )macOS 用户注意macOS 会弹出系统级麦克风权限对话框这是正常现象点击允许即可。方案 A云端识别OpenAI Whisper API这是最简单的方案只需要一个 API Key 和几行代码。获取 OpenAI API Key访问 OpenAI Platform 注册并登录进入 API Keys 页面点击Create new secret key复制生成的密钥以sk-开头并妥善保存。成本参考Whisper API 价格为$0.006/分钟即识别 1 小时音频仅需 $0.36非常便宜。在主进程中调用 Whisper API让 AI 在主进程中实现语音识别Please help me implement OpenAI Whisper API in main.js: 1. Install node-fetch (if needed) or use built-in fetch in Node.js 2. Create transcribeWithWhisper function that accepts audio ArrayBuffer 3. Convert ArrayBuffer to Blob/File and build FormData 4. Call https://api.openai.com/v1/audio/transcriptions 5. Use model whisper-1 and set language to zh (Chinese) 6. Return the recognized text 7. Read API key from environment variables or config file核心代码// main.js async function transcribeWithWhisper(audioBuffer, apiKey) { const blob new Blob([audioBuffer], { type: audio/webm }) const formData new FormData() formData.append(file, blob, audio.webm) formData.append(model, whisper-1) formData.append(language, zh) const response await fetch( https://api.openai.com/v1/audio/transcriptions, { method: POST, headers: { Authorization: Bearer ${apiKey} }, body: formData } ) const data await response.json() return data.text }注意这里使用了 Node.js 18 内置的fetch无需额外安装请求库language: zh明确指定中文可显著提升识别准确性若不确定语言也可省略该参数让模型自动检测。添加设置面板让 AI 在渲染进程中添加一个简单的设置面板用于输入 API Key 和切换识别模式Please help me add a settings panel in index.html: 1. Add a gear icon in the top-right corner; click to expand settings panel 2. The panel includes: - Recognition mode switch (Cloud API / Local model) - API Key input (only visible in cloud mode) - Language dropdown (Chinese / English / Auto detect) 3. Save settings to localStorage 4. Close panel when clicking outside方案 B本地识别whisper.cpp如果你不想依赖云端 API或者需要离线使用whisper.cpp 是最佳选择。它是 OpenAI Whisper 模型的 C 移植版完全在本地运行无需联网。安装 whisper.cpp Node.js 绑定让 AI 安装并配置Please help me install nodejs-whisper in the project: npm install nodejs-whisper After installation, please help me download the whisper tiny model (small size, fast for testing). nodejs-whisper will handle model download automatically.模型选择指南tiny75MB速度最快适合测试和轻量使用准确率一般base142MB速度与准确率的平衡small466MB中文识别质量明显更好large-v3-turbo1.5GB推荐比 large 快 5-8 倍准确率仅低 1-2%large-v33GB准确率最高但更慢需要更好的硬件在主进程中集成 whisper.cpp让 AI 实现本地识别Please help me add whisper.cpp local recognition in main.js: 1. Import nodejs-whisper 2. Create transcribeWithLocal function 3. Accept audio ArrayBuffer and save it as a temporary WAV file first (16kHz mono) 4. Call nodejs-whisper for recognition 5. Return recognized text 6. Delete temporary file after recognition核心代码// main.js const { nodewhisper } require(nodejs-whisper) const path require(path) const fs require(fs) const os require(os) async function transcribeWithLocal(audioBuffer) { // Save as temp file const tempPath path.join(os.tmpdir(), recording-${Date.now()}.wav) fs.writeFileSync(tempPath, Buffer.from(audioBuffer)) try { const result await nodewhisper(tempPath, { modelName: base, autoDownloadModelName: base, whisperOptions: { language: zh, word_timestamps: true } }) return result.map(r r.speech).join() } finally { // Clean up temp file fs.unlinkSync(tempPath) } }这段代码用fs.writeFileSync把录音 ArrayBuffer 写入系统临时目录os.tmpdir()识别完成后在finally块中通过fs.unlinkSync清理临时文件保证异常时也不会残留垃圾文件。modelName与autoDownloadModelName都设为base表示模型缺失时自动下载该模型word_timestamps: true让返回结果携带词级时间戳。Apple Silicon 用户的好消息如果你使用的是 M1/M2/M3/M4 Macwhisper.cpp 可以自动利用Metal GPU 加速和Apple 神经网络引擎。识别可以超过实时速度运行即 1 分钟音频可能只需几秒即可处理完毕。对于 NVIDIA GPU 用户whisper.cpp 同样支持CUDA 加速性能同样强劲。打包与分发开发完成后需要将应用打包成可分发的安装包。使用 Electron Forge 打包Electron Forge 已包含在项目中打包非常简单Please help me run the Electron Forge packaging command: npx electron-forge make该命令会自动为当前操作系统生成安装包macOS.dmg安装镜像和.zip压缩包Windows.exe安装程序Squirrel 格式Linux.debDebian/Ubuntu和.rpmFedora软件包构建产物位于out/make/目录。应用体积优化Electron 应用的一个痛点是包体积偏大因为内置了 Chromium。优化建议确保只有dependencies中的包被打进安装包开发依赖保留在devDependencies利用 Vite 的 tree-shaking 减小 JavaScript 体积如果使用本地模型考虑首次启动时再下载模型而不是随安装包一起分发。配置预估体积纯 Electron 应用不含模型~150-200 MB whisper tiny 模型~250 MB whisper large-v3-turbo 模型~1.7 GB跨平台注意事项macOS发布到 App Store 或分发给他人需要代码签名Apple Developer ID$99/年还需要 Apple 的**公证Notarization**流程麦克风权限必须在Info.plist中声明NSMicrophoneUsageDescription建议构建通用二进制Universal Binary以同时支持 Intel 与 Apple Silicon。Windows建议进行代码签名否则 Windows SmartScreen 会显示安全警告未签名的应用用户仍可选择仍然运行。Linux无需代码签名建议同时提供.deb和.AppImage两种格式。提示对于个人项目或小规模分发可以暂时跳过代码签名直接与朋友分享打包好的文件。总结与进阶方向恭喜你已经从零构建了一款跨平台语音转文字桌面应用。回顾我们完成的工作使用 Electron Forge 脚手架创建了跨平台桌面应用理解了主进程、渲染进程与 IPC 通信实现了麦克风录音与音频采集集成了两种语音识别方案云端 Whisper API 与本地 whisper.cpp学会了如何打包和分发 Electron 应用。Electron 的强大之处在于你可以用 Web 技术栈构建出 VS Code、Slack 级别的桌面应用。而借助成熟的 AI 语音识别能力语音转文字这类曾经需要专门团队开发的功能如今一个人就能完成。进阶方向实时字幕使用 AudioWorklet 流式处理音频配合流式识别 API 实现实时转写会议助手录制完整会议自动生成带时间戳的逐字稿并用 AI 提炼要点多语言翻译将语音转写后调用翻译 API 实现实时语言转换语音笔记本结合本地数据库如 SQLite构建可搜索的语音笔记。以上内容源自 Easy Vibe 教程体系的 electron-voice-to-text 章节该章节位于 跨平台开发Cross-Platform课程 中与 Android 应用、Flutter 应用、iOS 应用 等课程共同构成了完整的多端开发学习路径。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 使用 Electron 构建跨平台语音转文字桌面应用：从录音、云端与本地双模式识别到打包分发
使用 Electron 构建跨平台语音转文字桌面应用从录音、云端与本地双模式识别到打包分发【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本文是一份以 docs/en/stage-3/cross-platform/electron-voice-to-text/index.md 为骨架的完整实战指南讲解如何从零构建一款可安装到 Windows、macOS、Linux 的语音转文字Speech-to-Text桌面应用。你将在 Easy Vibe 教程体系中完成一个完整闭环用 Electron Forge 初始化工程、理解主进程与渲染进程的 IPC 通信、通过getUserMedia采集麦克风音频再分别接入云端 Whisper API 与本地 whisper.cpp 两种识别模式最后用electron-forge make打包出可分发的安装包。读完本文你将具备独立完成录音 → 识别 → 展示 → 打包全流程的能力并掌握 Electron 多进程架构、权限处理与跨平台分发中的关键注意事项。为什么选择 Electron 构建桌面语音应用日常使用的 VS Code、Slack、Discord、Notion 等桌面软件底层都是基于 Electron 构建的。Electron 是一个开源框架允许你使用构建网页的同一套技术栈——HTML CSS JavaScript——开发可跨 Windows、macOS、Linux 运行的桌面应用。其原理非常直观把 Chromium 和 Node.js 打包在一起你的网页就变成了一个独立的桌面程序。一句话理解Electron 一个隐形 Chrome 浏览器 Node.js 系统能力。核心架构主进程、渲染进程与预加载脚本一个 Electron 应用包含两种进程类型理解它们之间的边界是开发的关键主进程Main Process应用的总指挥。负责创建窗口、管理应用生命周期、访问文件系统等原生能力。运行在 Node.js 环境中可以使用全部 Node.js 模块。每个应用只有一个主进程。渲染进程Renderer Process应用的门面。本质上是一个 Chromium 网页负责 UI 渲染。每个窗口对应一个渲染进程。出于安全考虑渲染进程不能直接访问 Node.js API。预加载脚本Preload Script主进程与渲染进程之间的桥梁。通过contextBridge将选定的 API 安全地暴露给渲染进程。它们之间通过IPC进程间通信Inter-Process Communication协作就像打电话渲染进程说我要开始录音主进程收到请求后去调用系统麦克风。我们将要构建什么本次教程将构建一款**语音转文字Speech-to-Text**桌面应用功能非常聚焦点击开始录音按钮应用开始监听麦克风说话完毕后点击停止应用将音频交给 AI 识别识别出的文字显示在 UI 中可一键复制。应用提供两种识别模式可通过设置面板切换对比维度云端 API 模式本地模型模式代表方案OpenAI Whisper APIwhisper.cpp是否依赖网络是否识别速度取决于网络取决于硬件Apple Silicon 上非常快中文识别质量优秀优秀large-v3 模型成本$0.006/分钟免费模型体积无需下载tiny 模型 75MBlarge 模型 3GB适用场景快速上手、轻量使用注重隐私、离线使用、长期高频使用重要提醒Web Speech API 在 Electron 中不可用如果你搜索过Electron 语音识别可能会看到建议使用浏览器内置Web Speech API的方案。请注意这在 Electron 中行不通。Google 已停止对非 Chrome/Edge 浏览器外壳的语音 API 支持。Electron 基于 Chromium但它本身不是 Chrome因此window.SpeechRecognition会直接报错。这正是我们需要 Whisper API 或 whisper.cpp 这类独立方案的原因。教程路线图本教程按以下步骤完成全流程创建 Electron 项目使用 Electron Forge 脚手架初始化工程理解进程间通信实现录音在渲染进程中采集麦克风输入并处理音频数据云端识别方案 A使用 OpenAI Whisper API 完成语音转文字本地识别方案 B使用 whisper.cpp 在本地无网环境下识别打包分发将应用打包为可安装的桌面程序。创建 Electron 项目用 AI 初始化项目打开你的 AI 编程助手Cursor / Trae / Claude Code输入以下提示词Please help me create a new Electron project with Electron Forge using the Vite template. The project name is voice-to-text. Please run: npx create-electron-app voice-to-text --templatevite After creation, enter the project directory and install dependencies.Electron Forge 是 Electron 官方推荐的脚手架工具负责处理项目初始化、打包、分发等繁琐配置。创建完成后项目结构大致如下voice-to-text/ ├── src/ │ ├── main.js # 主进程入口 │ ├── preload.js # 预加载脚本桥梁 │ ├── renderer.js # 渲染进程入口 │ └── index.html # 应用 HTML 页面 ├── forge.config.js # Electron Forge 配置 ├── vite.main.config.mjs # 主进程 Vite 配置 ├── vite.preload.config.mjs # 预加载脚本 Vite 配置 ├── vite.renderer.config.mjs # 渲染进程 Vite 配置 └── package.json启动并预览继续让 AI 启动开发服务器Please help me start the Electron development server by running npm start几秒后桌面窗口出现这就是你的 Electron 应用。虽然目前只是默认欢迎页但它已经是真正意义上的桌面程序了。理解 IPC进程间通信在实现语音功能之前需要理解 Electron 最重要的概念IPC。由于渲染进程UI与主进程系统能力相互隔离它们必须通过 IPC打电话来协作Renderer process (UI) Main process (system) │ │ │── I want to start recording ──────────→ │ │ │── Call microphone │ │── Process audio │ ←──── Here is the result ─────────────│ │ │ │── Display text in UI │在代码层面这个通信通过preload.js桥接// preload.js - safely expose APIs to renderer process const { contextBridge, ipcRenderer } require(electron) contextBridge.exposeInMainWorld(electronAPI, { // Renderer - Main sendAudio: (audioData) ipcRenderer.invoke(transcribe-audio, audioData), // Main - Renderer onResult: (callback) ipcRenderer.on(transcription-result, callback) })// main.js - main process listens for messages const { ipcMain } require(electron) ipcMain.handle(transcribe-audio, async (event, audioData) { // Call Whisper API or whisper.cpp here const text await transcribe(audioData) return text })需要留意的是contextBridge暴露 API 的方式与本仓库中的 Electron 示例工程一脉相承——例如 examples/trae-3d-block-game/electron/main.js 中的BrowserWindow同样通过webPreferences关闭nodeIntegration、开启contextIsolation与sandbox这正是 Electron 官方推荐的安全实践渲染进程不直接接触 Node.js所有系统能力一律经由预加载脚本与 IPC 中转。实现录音功能在渲染进程中采集麦克风输入浏览器即 Electron 渲染进程提供了navigator.mediaDevices.getUserMedia来访问麦克风。让 AI 帮助实现录音Please help me modify src/index.html and src/renderer.js to implement: UI: 1. A large circular Start Recording button, which turns into a red Stop Recording button when clicked 2. Show a simple pulse animation while recording 3. A text display area below for recognition results 4. Two buttons at the bottom: Copy Text and Clear 5. A settings icon at top-right to switch recognition mode (cloud/local) Recording logic (in renderer.js): 1. On button click, request microphone access via navigator.mediaDevices.getUserMedia 2. Use MediaRecorder to record audio in webm format 3. After stopping, convert audio Blob to ArrayBuffer 4. Send it to main process via window.electronAPI.sendAudio 5. Wait for recognition result from main process and display it核心录音代码如下// renderer.js let mediaRecorder null let audioChunks [] async function startRecording() { const stream await navigator.mediaDevices.getUserMedia({ audio: { channelCount: 1, sampleRate: 16000, echoCancellation: true, noiseSuppression: true } }) mediaRecorder new MediaRecorder(stream, { mimeType: audio/webm;codecsopus }) audioChunks [] mediaRecorder.ondataavailable (e) audioChunks.push(e.data) mediaRecorder.onstop async () { const audioBlob new Blob(audioChunks, { type: audio/webm }) const arrayBuffer await audioBlob.arrayBuffer() // Send to main process for transcription const result await window.electronAPI.sendAudio(arrayBuffer) document.getElementById(result).textContent result } mediaRecorder.start() }上述代码的配置项都是有讲究的channelCount: 1输出单声道、sampleRate: 16000是语音识别领域的标准采样率Whisper 与 whisper.cpp 对此支持最佳、echoCancellation与noiseSuppression可提升嘈杂环境下的识别准确率audio/webm;codecsopus是 Chromium 原生支持的录音封装格式。处理麦克风权限Electron 默认会拦截权限请求我们需要在主进程中显式放行麦克风Please help me add microphone permission handling in main.js: 1. Use session.defaultSession.setPermissionRequestHandler to handle permission requests 2. Auto-allow when request type is media 3. For macOS, ensure microphone usage description is declared in package.json or entitlements// Add to main.js const { session } require(electron) session.defaultSession.setPermissionRequestHandler( (webContents, permission, callback) { if (permission media) { callback(true) } else { callback(false) } } )macOS 用户注意macOS 会弹出系统级麦克风权限对话框这是正常现象点击允许即可。方案 A云端识别OpenAI Whisper API这是最简单的方案只需要一个 API Key 和几行代码。获取 OpenAI API Key访问 OpenAI Platform 注册并登录进入 API Keys 页面点击Create new secret key复制生成的密钥以sk-开头并妥善保存。成本参考Whisper API 价格为$0.006/分钟即识别 1 小时音频仅需 $0.36非常便宜。在主进程中调用 Whisper API让 AI 在主进程中实现语音识别Please help me implement OpenAI Whisper API in main.js: 1. Install node-fetch (if needed) or use built-in fetch in Node.js 2. Create transcribeWithWhisper function that accepts audio ArrayBuffer 3. Convert ArrayBuffer to Blob/File and build FormData 4. Call https://api.openai.com/v1/audio/transcriptions 5. Use model whisper-1 and set language to zh (Chinese) 6. Return the recognized text 7. Read API key from environment variables or config file核心代码// main.js async function transcribeWithWhisper(audioBuffer, apiKey) { const blob new Blob([audioBuffer], { type: audio/webm }) const formData new FormData() formData.append(file, blob, audio.webm) formData.append(model, whisper-1) formData.append(language, zh) const response await fetch( https://api.openai.com/v1/audio/transcriptions, { method: POST, headers: { Authorization: Bearer ${apiKey} }, body: formData } ) const data await response.json() return data.text }注意这里使用了 Node.js 18 内置的fetch无需额外安装请求库language: zh明确指定中文可显著提升识别准确性若不确定语言也可省略该参数让模型自动检测。添加设置面板让 AI 在渲染进程中添加一个简单的设置面板用于输入 API Key 和切换识别模式Please help me add a settings panel in index.html: 1. Add a gear icon in the top-right corner; click to expand settings panel 2. The panel includes: - Recognition mode switch (Cloud API / Local model) - API Key input (only visible in cloud mode) - Language dropdown (Chinese / English / Auto detect) 3. Save settings to localStorage 4. Close panel when clicking outside方案 B本地识别whisper.cpp如果你不想依赖云端 API或者需要离线使用whisper.cpp 是最佳选择。它是 OpenAI Whisper 模型的 C 移植版完全在本地运行无需联网。安装 whisper.cpp Node.js 绑定让 AI 安装并配置Please help me install nodejs-whisper in the project: npm install nodejs-whisper After installation, please help me download the whisper tiny model (small size, fast for testing). nodejs-whisper will handle model download automatically.模型选择指南tiny75MB速度最快适合测试和轻量使用准确率一般base142MB速度与准确率的平衡small466MB中文识别质量明显更好large-v3-turbo1.5GB推荐比 large 快 5-8 倍准确率仅低 1-2%large-v33GB准确率最高但更慢需要更好的硬件在主进程中集成 whisper.cpp让 AI 实现本地识别Please help me add whisper.cpp local recognition in main.js: 1. Import nodejs-whisper 2. Create transcribeWithLocal function 3. Accept audio ArrayBuffer and save it as a temporary WAV file first (16kHz mono) 4. Call nodejs-whisper for recognition 5. Return recognized text 6. Delete temporary file after recognition核心代码// main.js const { nodewhisper } require(nodejs-whisper) const path require(path) const fs require(fs) const os require(os) async function transcribeWithLocal(audioBuffer) { // Save as temp file const tempPath path.join(os.tmpdir(), recording-${Date.now()}.wav) fs.writeFileSync(tempPath, Buffer.from(audioBuffer)) try { const result await nodewhisper(tempPath, { modelName: base, autoDownloadModelName: base, whisperOptions: { language: zh, word_timestamps: true } }) return result.map(r r.speech).join() } finally { // Clean up temp file fs.unlinkSync(tempPath) } }这段代码用fs.writeFileSync把录音 ArrayBuffer 写入系统临时目录os.tmpdir()识别完成后在finally块中通过fs.unlinkSync清理临时文件保证异常时也不会残留垃圾文件。modelName与autoDownloadModelName都设为base表示模型缺失时自动下载该模型word_timestamps: true让返回结果携带词级时间戳。Apple Silicon 用户的好消息如果你使用的是 M1/M2/M3/M4 Macwhisper.cpp 可以自动利用Metal GPU 加速和Apple 神经网络引擎。识别可以超过实时速度运行即 1 分钟音频可能只需几秒即可处理完毕。对于 NVIDIA GPU 用户whisper.cpp 同样支持CUDA 加速性能同样强劲。打包与分发开发完成后需要将应用打包成可分发的安装包。使用 Electron Forge 打包Electron Forge 已包含在项目中打包非常简单Please help me run the Electron Forge packaging command: npx electron-forge make该命令会自动为当前操作系统生成安装包macOS.dmg安装镜像和.zip压缩包Windows.exe安装程序Squirrel 格式Linux.debDebian/Ubuntu和.rpmFedora软件包构建产物位于out/make/目录。应用体积优化Electron 应用的一个痛点是包体积偏大因为内置了 Chromium。优化建议确保只有dependencies中的包被打进安装包开发依赖保留在devDependencies利用 Vite 的 tree-shaking 减小 JavaScript 体积如果使用本地模型考虑首次启动时再下载模型而不是随安装包一起分发。配置预估体积纯 Electron 应用不含模型~150-200 MB whisper tiny 模型~250 MB whisper large-v3-turbo 模型~1.7 GB跨平台注意事项macOS发布到 App Store 或分发给他人需要代码签名Apple Developer ID$99/年还需要 Apple 的**公证Notarization**流程麦克风权限必须在Info.plist中声明NSMicrophoneUsageDescription建议构建通用二进制Universal Binary以同时支持 Intel 与 Apple Silicon。Windows建议进行代码签名否则 Windows SmartScreen 会显示安全警告未签名的应用用户仍可选择仍然运行。Linux无需代码签名建议同时提供.deb和.AppImage两种格式。提示对于个人项目或小规模分发可以暂时跳过代码签名直接与朋友分享打包好的文件。总结与进阶方向恭喜你已经从零构建了一款跨平台语音转文字桌面应用。回顾我们完成的工作使用 Electron Forge 脚手架创建了跨平台桌面应用理解了主进程、渲染进程与 IPC 通信实现了麦克风录音与音频采集集成了两种语音识别方案云端 Whisper API 与本地 whisper.cpp学会了如何打包和分发 Electron 应用。Electron 的强大之处在于你可以用 Web 技术栈构建出 VS Code、Slack 级别的桌面应用。而借助成熟的 AI 语音识别能力语音转文字这类曾经需要专门团队开发的功能如今一个人就能完成。进阶方向实时字幕使用 AudioWorklet 流式处理音频配合流式识别 API 实现实时转写会议助手录制完整会议自动生成带时间戳的逐字稿并用 AI 提炼要点多语言翻译将语音转写后调用翻译 API 实现实时语言转换语音笔记本结合本地数据库如 SQLite构建可搜索的语音笔记。以上内容源自 Easy Vibe 教程体系的 electron-voice-to-text 章节该章节位于 跨平台开发Cross-Platform课程 中与 Android 应用、Flutter 应用、iOS 应用 等课程共同构成了完整的多端开发学习路径。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考