当前位置：首页 > news >正文

实战演练：实现一个“声控”待办事项应用

news 2026/6/8 20:41:31

推荐一个学习网站，http://easelearningai.com 输入学习主题，会根据你的知识背景，帮你把学习内容讲得通俗易懂。

实战演练：实现一个“声控”待办事项应用

引言：从“点击”到“对话”的交互革命

简单说，声控待办应用就是让你的待办清单从“打字输入”变成“开口说话”。

想象一下这个场景：你正在厨房炒菜，满手油污，突然想起要提醒自己“明天下午三点开会”。传统做法是：擦手→找手机→解锁→打开待办应用→找到添加按钮→打字输入→保存。整个过程至少需要10秒，而且手还会弄脏手机。

现在换一种方式：你直接对着空气说一句：“帮我记一下，明天下午三点开会。”——浏览器立刻识别出你的声音，自动提取出“明天下午三点”这个时间点和“开会”这个任务，干净利落地添加到待办列表里。整个过程不到2秒，你甚至不需要停下手中的锅铲。

这就是从“点击”到“对话”的交互革命。传统前端交互就像你对着一个只会点头摇头的机器人，而声控交互就像你有了一个随时待命的助理。

3.1 项目初始化与基础设置

简单说，这一步就是给我们的“声控助理”搭建一个干净的工作台。

从零开始，就像搭积木

想象你要建一个智能厨房：首先得有个厨房（HTML框架），然后要有灶台和厨具（CSS样式），最后才是连接水电煤气（JavaScript逻辑）。我们的声控待办应用也是这个道理。

第一步：创建项目骨架

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>声控待办 - 你的语音助手</title> <style> /* 这里放样式，让界面看起来干净、友好 */ </style> </head> <body> <div id="app"> <h1>🎤 声控待办</h1> <div id="voice-status">点击麦克风开始说话</div> <ul id="todo-list"></ul> </div> <script src="app.js"></script> </body> </html>

第二步：准备“耳朵”和“嘴巴”

在JavaScript里，我们需要检查浏览器是否支持语音功能。就像检查厨房有没有通水电一样：

// 检查浏览器是否支持语音识别（耳朵） if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { alert('抱歉，你的浏览器还不支持语音识别，请使用Chrome浏览器'); } // 检查浏览器是否支持语音合成（嘴巴） if (!('speechSynthesis' in window)) { alert('你的浏览器不支持语音合成，无法听到反馈'); }

关键点：目前语音识别功能在Chrome浏览器上支持最好，其他浏览器可能需要降级方案（比如显示文字提示“请使用Chrome”）。这就像有些菜谱需要特定厨具，没有的话可以用替代方案。

3.2 集成语音识别与合成

简单说，这一步就是给浏览器装上“耳朵”和“嘴巴”，让它能听懂你说的话，也能开口回应你。

让浏览器“长耳朵”

还记得小时候玩的对讲机吗？按下按钮说话，松开按钮听。语音识别也是类似的原理——我们通过一个按钮来控制“听”的开关。

// 创建语音识别对象（给浏览器装耳朵） const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); // 设置语言为中文 recognition.lang = 'zh-CN'; // 设置连续识别模式（就像一直开着对讲机） recognition.continuous = true; // 当浏览器“听到”声音时触发 recognition.onresult = function(event) { // 获取识别到的文字 const transcript = event.results[event.results.length - 1][0].transcript; console.log('你说的是：', transcript); // 把文字显示在界面上 document.getElementById('voice-status').textContent = '你说的是：' + transcript; // 接下来要处理这个指令 processCommand(transcript); }; // 点击按钮开始“听” document.getElementById('start-btn').addEventListener('click', function() { recognition.start(); document.getElementById('voice-status').textContent = '🎧 正在听...'; });

生活类比：这就像你给手机装了个“语音备忘录”功能——按下录音键，它就开始听你说话，然后把你说的话转成文字显示出来。

让浏览器“长嘴巴”

光能听还不够，还得能回应。语音合成（Speech Synthesis）就是让浏览器开口说话：

// 让浏览器开口说话的函数 function speak(text) { // 创建一个语音合成对象 const utterance = new SpeechSynthesisUtterance(text); // 设置中文语音 utterance.lang = 'zh-CN'; // 设置语速（0.1最慢，1正常，10最快） utterance.rate = 1.0; // 设置音调（0最低，2最高） utterance.pitch = 1.0; // 让浏览器开口 window.speechSynthesis.speak(utterance); } // 使用示例 speak('好的，任务已添加');

生活类比：这就像你手机里的导航语音——你输入目的地，它就用语音告诉你“前方300米右转”。

3.3 实现核心指令

简单说，这一步就是教浏览器理解你的“人话”，把它变成它能执行的“机器指令”。

指令解析：从“人话”到“机器话”

想象一下，你对朋友说：“帮我记一下，明天下午三点开会。”朋友会怎么做？他会提取出关键信息：动作是“添加”，内容是“开会”，时间是“明天下午三点”。

我们的程序也要做同样的事。但计算机不像人那么聪明，它需要明确的规则：

// 待办事项数据 let todos = []; // 处理语音指令的核心函数 function processCommand(transcript) { // 把语音转成的文字变成小写，方便匹配 const command = transcript.toLowerCase(); // 1. 添加任务指令 if (command.includes('添加') || command.includes('记一下') || command.includes('新增')) { // 提取任务内容：去掉指令词，剩下的就是任务 let taskContent = command.replace(/添加|记一下|新增|帮我/g, '').trim(); if (taskContent) { addTodo(taskContent); speak('好的，已添加任务：' + taskContent); } else { speak('请告诉我需要添加什么任务'); } } // 2. 标记完成指令 else if (command.includes('完成') || command.includes('搞定') || command.includes('做完了')) { // 提取任务编号或内容 let taskNumber = extractNumber(command); if (taskNumber) { completeTodo(taskNumber); speak('任务' + taskNumber + '已标记完成'); } else { // 尝试匹配任务内容 let matchedTodo = findTodoByContent(command); if (matchedTodo) { completeTodo(matchedTodo.id); speak('已标记完成：' + matchedTodo.content); } else { speak('没有找到对应的任务，请再说一遍'); } } } // 3. 删除指令 else if (command.includes('删除') || command.includes('移除') || command.includes('去掉')) { let taskNumber = extractNumber(command); if (taskNumber) { deleteTodo(taskNumber); speak('已删除任务' + taskNumber); } else { speak('请告诉我需要删除哪个任务，比如“删除第一个”'); } } // 4. 查看列表指令 else if (command.includes('查看') || command.includes('显示') || command.includes('有什么')) { if (todos.length === 0) { speak('当前没有待办事项'); } else { let todoList = todos.map((todo, index) => `第${index + 1}个：${todo.content}（${todo.completed ? '已完成' : '未完成'}）` ).join('，'); speak('当前有' + todos.length + '个任务：' + todoList); } } // 5. 模糊指令处理 else { speak('抱歉，我没有理解您的指令。您可以尝试说：添加任务、完成第一个、查看列表'); } }

生活类比：这就像你给新来的实习生下指令。一开始他可能听不懂“把那个弄一下”，但如果你说“请把第三行的数据复制到表格里”，他就能准确执行。我们的程序也需要明确的指令格式。

核心操作函数

// 添加任务 function addTodo(content) { const todo = { id: Date.now(), // 用当前时间作为唯一编号 content: content, completed: false, createdAt: new Date() }; todos.push(todo); renderTodoList(); // 刷新界面显示 } // 标记完成 function completeTodo(id) { const todo = todos.find(t => t.id === id); if (todo) { todo.completed = !todo.completed; // 切换完成状态 renderTodoList(); } } // 删除任务 function deleteTodo(id) { todos = todos.filter(t => t.id !== id); renderTodoList(); } // 渲染待办列表（显示在网页上） function renderTodoList() { const list = document.getElementById('todo-list'); list.innerHTML = ''; todos.forEach((todo, index) => { const li = document.createElement('li'); li.textContent = `${index + 1}. ${todo.content} ${todo.completed ? '✅' : '⬜'}`; list.appendChild(li); }); }

3.4 添加可视化反馈与错误处理

简单说，这一步就是让用户知道“浏览器正在做什么”以及“出了什么问题”。

为什么需要可视化反馈？

想象一下，你对朋友说“帮我拿杯水”，然后朋友一声不吭地走了。你会不会有点慌？他听到了吗？他去拿水了吗？还是根本没理我？

同样，当用户对浏览器说话时，它需要给出明确的反馈：

正在听：显示麦克风图标闪烁
听懂了：显示识别到的文字
正在执行：显示操作动画
执行完成：显示成功提示
没听懂：显示错误信息并引导重试

实现反馈系统

<!-- 在HTML中添加反馈区域 --> <div id="feedback-panel"> <div id="mic-status"> <span id="mic-icon">🎤</span> <span id="mic-text">点击开始说话</span> </div> <div id="recognized-text" style="display:none;"> 你说的是：<span id="text-display"></span> </div> <div id="action-feedback" style="display:none;"> <span id="action-icon">✅</span> <span id="action-text"></span> </div> <div id="error-feedback" style="display:none; color: #e74c3c;"> ⚠️ <span id="error-text"></span> </div> </div>

// 更新麦克风状态 function updateMicStatus(status) { const icon = document.getElementById('mic-icon'); const text = document.getElementById('mic-text'); switch(status) { case 'listening': icon.textContent = '🎧'; text.textContent = '正在听...'; icon.style.animation = 'pulse 1s infinite'; // 脉冲动画 break; case 'processing': icon.textContent = '🤔'; text.textContent = '正在处理...'; break; case 'idle': icon.textContent = '🎤'; text.textContent = '点击开始说话'; icon.style.animation = 'none'; break; } } // 显示识别到的文字 function showRecognizedText(text) { document.getElementById('text-display').textContent = text; document.getElementById('recognized-text').style.display = 'block'; // 3秒后自动隐藏 setTimeout(() => { document.getElementById('recognized-text').style.display = 'none'; }, 3000); } // 显示操作反馈 function showActionFeedback(message, type = 'success') { const icon = document.getElementById('action-icon'); const text = document.getElementById('action-text'); icon.textContent = type === 'success' ? '✅' : '❌'; text.textContent = message; document.getElementById('action-feedback').style.display = 'block'; // 2秒后自动隐藏 setTimeout(() => { document.getElementById('action-feedback').style.display = 'none'; }, 2000); } // 显示错误信息 function showError(message) { document.getElementById('error-text').textContent = message; document.getElementById('error-feedback').style.display = 'block'; // 5秒后自动隐藏 setTimeout(() => { document.getElementById('error-feedback').style.display = 'none'; }, 5000); } // 错误处理：语音识别失败时 recognition.onerror = function(event) { console.error('语音识别错误：', event.error); updateMicStatus('idle'); let errorMessage = ''; switch(event.error) { case 'no-speech': errorMessage = '没有检测到语音，请再试一次'; break; case 'audio-capture': errorMessage = '麦克风被禁用，请在浏览器设置中允许麦克风权限'; break; case 'not-allowed': errorMessage = '麦克风权限被拒绝，请点击地址栏左侧的锁图标开启权限'; break; default: errorMessage = '出现未知错误，请刷新页面重试'; } showError(errorMessage); speak(errorMessage); // 语音提示错误 };

生活类比：这就像你家的智能音箱——你说“播放音乐”，它会先亮一圈蓝灯表示“听到了”，然后说“好的，正在播放周杰伦的歌曲”，最后才开始播放。每一步都有明确的反馈，让你知道系统正在做什么。