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();
});