JavaScript高级实战:构建智能语音交互Web应用
一、系统架构设计
语音输入 → 实时转写 → 指令解析 → 智能响应 → 语音反馈
二、核心功能实现
1. 语音识别控制
class VoiceControl {
constructor() {
this.recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
this.recognition.continuous = true;
this.recognition.interimResults = true;
this.recognition.lang = 'zh-CN';
this.commands = new Map();
this.context = {};
this.isListening = false;
}
start() {
this.recognition.start();
this.isListening = true;
this.recognition.onresult = (event) => {
const transcript = Array.from(event.results)
.map(result => result[0].transcript)
.join('');
this.processTranscript(transcript, event.results[0].isFinal);
};
this.recognition.onerror = (event) => {
console.error('语音识别错误:', event.error);
};
}
registerCommand(pattern, callback) {
this.commands.set(new RegExp(pattern, 'i'), callback);
}
processTranscript(transcript, isFinal) {
if (!isFinal) return;
for (const [regex, handler] of this.commands) {
if (regex.test(transcript)) {
const matches = transcript.match(regex);
handler(matches, this.context);
break;
}
}
}
}
2. 语音合成反馈
class VoiceFeedback {
constructor() {
this.synth = window.speechSynthesis;
this.utterance = null;
this.voices = [];
this.loadVoices();
}
loadVoices() {
this.voices = this.synth.getVoices().filter(v => v.lang.includes('zh'));
}
speak(text, onEnd) {
if (this.utterance) {
this.synth.cancel();
}
this.utterance = new SpeechSynthesisUtterance(text);
this.utterance.voice = this.voices.find(v => v.name === 'Ting-Ting') || this.voices[0];
this.utterance.rate = 0.9;
this.utterance.pitch = 1;
if (onEnd) {
this.utterance.onend = onEnd;
}
this.synth.speak(this.utterance);
}
}
3. 上下文智能管理
class ContextManager {
constructor() {
this.contextStack = [];
this.currentContext = {};
}
pushContext(name, data = {}) {
this.contextStack.push({
name,
data,
timestamp: Date.now()
});
this.updateCurrentContext();
}
popContext() {
if (this.contextStack.length > 0) {
this.contextStack.pop();
this.updateCurrentContext();
}
}
updateCurrentContext() {
this.currentContext = this.contextStack.length > 0
? this.contextStack[this.contextStack.length - 1].data
: {};
}
getCurrentContext() {
return this.currentContext;
}
}
三、高级功能实现
1. 多轮对话处理
class DialogManager {
constructor(voiceControl) {
this.voiceControl = voiceControl;
this.dialogs = new Map();
this.currentDialog = null;
}
registerDialog(name, steps) {
this.dialogs.set(name, {
steps,
currentStep: 0,
data: {}
});
}
startDialog(name) {
if (this.dialogs.has(name)) {
this.currentDialog = this.dialogs.get(name);
this.nextStep();
}
}
nextStep() {
if (!this.currentDialog) return;
const step = this.currentDialog.steps[this.currentDialog.currentStep];
if (step) {
this.voiceControl.registerCommand(
step.pattern,
(matches) => this.handleStepResponse(matches, step)
);
this.voiceControl.feedback.speak(step.prompt);
} else {
this.endDialog();
}
}
handleStepResponse(matches, step) {
step.handler(matches, this.currentDialog.data);
this.currentDialog.currentStep++;
this.nextStep();
}
}
2. 离线语音指令缓存
class OfflineCommandCache {
constructor() {
this.commandCache = new Map();
this.storageKey = 'voiceCommandCache';
this.loadFromStorage();
}
addCommand(transcript, action) {
this.commandCache.set(transcript.toLowerCase(), action);
this.saveToStorage();
}
getAction(transcript) {
return this.commandCache.get(transcript.toLowerCase());
}
loadFromStorage() {
const saved = localStorage.getItem(this.storageKey);
if (saved) {
this.commandCache = new Map(JSON.parse(saved));
}
}
saveToStorage() {
localStorage.setItem(
this.storageKey,
JSON.stringify(Array.from(this.commandCache.entries()))
);
}
}
四、实战案例演示
1. 智能家居控制集成
// 初始化语音控制系统
const voiceControl = new VoiceControl();
const feedback = new VoiceFeedback();
voiceControl.feedback = feedback;
// 注册基本指令
voiceControl.registerCommand('打开(.*)', (matches) => {
const device = matches[1];
feedback.speak(`正在打开${device}`);
// 调用设备控制API
});
voiceControl.registerCommand('关闭(.*)', (matches) => {
const device = matches[1];
feedback.speak(`正在关闭${device}`);
// 调用设备控制API
});
// 启动语音识别
document.getElementById('startBtn').addEventListener('click', () => {
voiceControl.start();
});
2. 性能优化方案
- Web Worker:语音识别处理移入后台线程
- 指令缓存:常用指令本地存储加速匹配
- 懒加载:语音合成引擎按需初始化
- 节流处理:高频指令合并处理

