当前位置：首页 > JavaScript

js实现语音

2026-02-01 03:17:05JavaScript

语音识别（Speech Recognition）

在JavaScript中实现语音识别通常使用Web Speech API。以下是一个基本示例：

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'zh-CN'; // 设置语言为中文

recognition.onresult = function(event) {
  const transcript = event.results[0][0].transcript;
  console.log('识别结果:', transcript);
};

recognition.start();

关键点：

需要浏览器支持（Chrome、Edge等）
首次使用需要用户授权麦克风权限
lang属性可设置识别语言

语音合成（Text-to-Speech）

使用Web Speech API的语音合成功能：

const utterance = new SpeechSynthesisUtterance();
utterance.text = '你好，这是语音合成示例';
utterance.lang = 'zh-CN'; // 设置中文语音
utterance.rate = 1.0; // 语速（0.1-10）

window.speechSynthesis.speak(utterance);

可调整参数：

pitch: 音高（0-2）
volume: 音量（0-1）
可通过speechSynthesis.getVoices()获取可用语音列表

第三方库方案

annyang（轻量级语音识别库）：
```
import annyang from 'annyang';
```

annyang.addCommands({ '打开菜单': () => { console.log('打开菜单'); }, '搜索 *term': (term) => { console.log('搜索:', term); } });

annyang.start();


2. TensorFlow.js（自定义语音模型）：
```javascript
import * as speechCommands from '@tensorflow-models/speech-commands';

const recognizer = await speechCommands.create('BROWSER_FFT');
recognizer.listen(result => {
  console.log(result.scores); // 识别置信度
}, { probabilityThreshold: 0.7 });

注意事项

移动端设备可能有额外的权限要求
连续识别需要设置continuous属性为true
语音质量受环境噪音影响较大
中文识别准确率可能低于英语

兼容性处理

if (!('webkitSpeechRecognition' in window)) {
  alert('您的浏览器不支持语音识别');
} else {
  // 初始化代码
}

实时可视化

结合Web Audio API可实现声波可视化：

const audioContext = new AudioContext();
const analyser = audioContext.createAnalyser();

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const source = audioContext.createMediaStreamSource(stream);
    source.connect(analyser);
    // 使用requestAnimationFrame绘制波形
  });

以上方案可根据具体需求组合使用，建议在支持的环境中测试效果。

js实现语音