Alan AI 语音控制新闻应用 —— JavaScript Mastery 实战项目解析

开口就能看新闻：一场改变人机交互方式的实验

想象这样一个场景：清晨刚睡醒，双手还握着咖啡杯，你对手机说一声「帮我看看今天的科技新闻」，屏幕上立刻列出了最新的资讯——不需要解锁屏幕，不需要打开 App，不需要任何点击。这不是科幻电影里的场景，而是 JavaScript Mastery 频道创始人 Adrian Hajdin 在 2020 年就带着观众一起动手实现的实用案例。

项目起源与作者背景

本项目来自 JavaScript Mastery（简称 JSMastery），由 Adrian Hajdin 创办的 YouTube 技术频道。该频道专注于 Web 开发、React 和 AI 应用实战教学，在 YouTube 拥有数十万订阅者，以高质量的「从零到一」实战项目著称。

Adrian Hajdin 的教学风格强调可运行的结果：每个项目都有对应的线上 Demo，让初学者能直观看到技术落地的样子。这个新闻应用是他在探索语音交互领域时的早期实践，核心技术栈选用了当时最流行的 React 框架 + Alan AI 语音 SDK。

图1：项目运行截图，支持语音指令控制新闻浏览

技术全景：从语音指令到新闻卡片

如果把整个应用比作一个餐厅点餐系统，那么用户的声音就是「口头菜单」，Alan AI 是那个「听懂顾客说话的服务员」，React 组件则是「厨房里分工明确的各个班组」，NewsAPI 是「食材供应商」。

前端架构方面，项目基于 React 16（当时的主流版本），使用 Create React App 脚手架快速初始化，配合 Material-UI 4 组件库实现新闻卡片的视觉设计。React 版本虽然不是最新的（React 18 已发布），但对于教学目的来说稳定性良好，生态兼容。

语音交互完全依赖 Alan AI SDK（@alan-ai/alan-sdk-web）。Alan AI 是专门面向 Web 应用的语音 AI 平台，提供即装即用的语音识别和自然语言处理能力，开发者只需在 HTML 中嵌入一段 JS 代码，配置 API Key，即可获得完整的语音交互能力。项目中的 words-to-numbers 库负责将「open article number four」这类口语化数字表达转换为程序可处理的数值。

数据流如下：用户语音指令 → Alan AI 解析意图 → 返回 onCommand 回调 → React 更新状态 → 渲染新闻卡片。整个过程无需页面刷新，是典型的 SPA（单页应用）模式。

核心代码：语音命令处理逻辑

应用的核心逻辑集中于 src/App.js 中的 useEffect hook，负责初始化 Alan AI 并处理各种语音命令：

useEffect(() => {
  alanBtn({
    key: 'YOUR_ALAN_AI_KEY',
    onCommand: ({ command, articles, number }) => {
      if (command === 'newHeadlines') {
        setNewsArticles(articles);
        setActiveArticle(-1);
      } else if (command === 'open') {
        const parsedNumber = wordsToNumbers(number, { fuzzy: true });
        const article = articles[parsedNumber - 1];
        if (article) window.open(article.url, '_blank');
      }
    },
  });
}, []);

这个设计模式体现了命令模式（Command Pattern）的精髓：Alan AI 作为中央调度器，根据不同的语音命令分发到不同的处理函数，职责清晰，扩展方便。添加新的语音指令只需在 onCommand 回调中新增一个 if 分支即可。

组件化设计

项目采用标准的 React 组件化结构：

• src/App.js：根组件，管理全局状态（新闻列表、当前选中文章、模态框），初始化 Alan AI
• src/components/NewsCards/：新闻卡片列表组件，负责渲染每条新闻的摘要信息
• src/components/Modal/：模态框组件，显示语音交互使用说明
• src/styles.js：JSS 样式定义，Material-UI makeStyles 语法
• src/index.css：全局样式覆盖

组件之间通过 props 传递数据，模态框通过回调函数受控于父组件，遵循了 React 推荐的「受控组件」设计原则。

图2：JavaScript Mastery 品牌标识

局限性与现实挑战

本项目虽然创意十足，但也存在一些值得关注的局限性：

1. Alan AI 服务依赖：Alan AI 并非免费服务（免费额度有限），生产环境使用需要购买套餐。如果 Alan AI 服务商调整定价策略或服务不可用，整个语音功能将瘫痪。这意味着项目隐含了一个外部 SaaS 依赖。

2. NewsAPI 的 CORS 限制：NewsAPI 对免费层的 API 调用有严格的 CORS 限制，在生产环境中无法直接从浏览器端调用，需要通过后端代理转发。这是从教程代码到生产部署必须跨越的一个坑。

3. React 16 版本偏旧：项目基于 React 16.13.1，距今已有数年。虽然 React 的核心概念变化不大，但新版的 Hooks API（React 18）、并发特性等都无法享受，存在一定的技术债务。

4. API Key 硬编码：Alan AI 的 API Key 直接写在代码中（src/App.js），没有环境变量分离机制。这在教学场景中可以理解，但直接部署到生产环境会面临安全风险。

行业意义：从语音助手到无障碍革命

本项目的意义远不止于一个「酷炫 Demo」。它代表了一个重要趋势：语音交互正在从智能音箱走向每一个普通 Web 页面。

对于视障用户来说，语音控制的 Web 应用意味着前所未有的可访问性——不需要鼠标操作，不需要屏幕阅读器，用户可以直接「对话」来使用互联网服务。

对于移动用户来说，在开车、做饭、手被占用等场景下，语音操控是解放双手的唯一方案。结合 PWA（渐进式 Web 应用）技术，语音 Web 应用甚至可以添加到手机主屏幕，在离线环境下也能工作。

从更宏观的视角看，随着 GPT-4o、Claude 等多模态大模型的崛起，语音将成为继文字、图片之后，Web 应用最重要的第三种交互形态。Adrian Hajdin 在 2020 年就开始布局这一方向，体现了他对技术趋势的敏锐嗅觉。

目前，该项目在 GitHub 上已获得 514 颗星、180 个 Fork，反映了社区对语音 + 前端结合方向的高度关注。