如何在Angular中通过按钮触发Windows默认语音听写（Win+H功能）

首先明确：纯网页版Angular项目无法直接触发系统级的Win+H快捷键——浏览器出于安全限制，不允许JavaScript模拟系统级按键（尤其是Win键这类系统核心按键）。如果你的项目可以打包成桌面应用，可通过Electron结合Node.js模块实现，具体方案如下：

方案：Electron打包Angular应用+模拟系统按键 #

通过Electron将Angular转为桌面应用，借助Node.js的按键模拟库实现Win+H的触发：

1. 依赖准备 #

安装Electron和按键模拟库robotjs：

npm install electron robotjs --save-dev

2. 主进程（Electron）配置 #

在Electron的主进程文件（如main.js）中，添加IPC监听和按键模拟逻辑：

const { app, BrowserWindow, ipcMain } = require('electron');
const robot = require('robotjs');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true,
      preload: './preload.js' // 用preload脚本安全暴露IPC方法
    }
  });

  // 加载Angular项目（开发环境用本地服务，打包后加载dist文件）
  mainWindow.loadURL('http://localhost:4200');
}

// 监听来自Angular的触发指令
ipcMain.on('invoke-win-h', () => {
  // 模拟Win+H组合键的按下与释放
  robot.keyToggle('win', 'down');
  robot.keyTap('h');
  robot.keyToggle('win', 'up');
});

app.whenReady().then(createWindow);

3. 预加载脚本（preload.js） #

为安全地在Angular中调用Electron的IPC接口，创建preload.js：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  triggerDictation: () => ipcRenderer.send('invoke-win-h')
});

4. Angular组件实现 #

在需要添加按钮的组件中，调用暴露的Electron API：

import { Component } from '@angular/core';

// 声明全局的electronAPI对象
declare global {
  interface Window {
    electronAPI: {
      triggerDictation: () => void;
    };
  }
}

@Component({
  selector: 'app-dictation-button',
  template: `<button (click)="openSystemDictation()">打开系统语音听写</button>`
})
export class DictationButtonComponent {
  openSystemDictation() {
    window.electronAPI.triggerDictation();
  }
}

纯Web项目替代方案 #

如果无法打包成桌面应用，可使用浏览器原生的Web Speech API实现语音识别功能，虽不是调用系统默认的Win+H听写，但能达到类似的语音转文字效果：

import { Component } from '@angular/core';

@Component({
  selector: 'app-web-speech',
  template: `<button (click)="startRecognition()">开始语音识别</button>
             <p>识别结果：{{recognitionResult}}</p>`
})
export class WebSpeechComponent {
  recognitionResult = '';
  recognition: SpeechRecognition | null = null;

  constructor() {
    // 兼容不同浏览器的API前缀
    const SpeechRecognition = window.SpeechRecognition || (window as any).webkitSpeechRecognition;
    if (SpeechRecognition) {
      this.recognition = new SpeechRecognition();
      this.recognition.continuous = true;
      this.recognition.interimResults = true;

      this.recognition.onresult = (event) => {
        let transcript = '';
        for (let i = event.resultIndex; i < event.results.length; i++) {
          transcript += event.results[i][0].transcript;
        }
        this.recognitionResult = transcript;
      };
    }
  }

  startRecognition() {
    this.recognition?.start();
  }
}

内容的提问来源于stack exchange，提问作者swapnil pisal