1. 项目概述在浏览器里“开口说话”几年前如果要在网页上实现文字转语音你可能需要依赖笨重的Flash插件或者调用后端服务过程相当繁琐。但现在情况完全不同了。得益于现代浏览器内置的Web Speech API我们完全可以用纯前端技术——HTML5和JavaScript——轻松地让网页“开口说话”。这个项目就是带你从零开始亲手实现一个功能完备的网页端语音合成TTS工具。简单来说语音合成就是将一段文字信息通过算法转换成一段可以播放的、接近人声的语音。这在很多场景下都极其有用比如为视障用户提供网页内容朗读的无障碍支持在在线教育应用中为学习材料配上标准发音在数据大屏或后台系统中用语音播报关键告警信息甚至是在你开发的游戏或互动应用里为角色添加配音。它的核心价值在于用听觉丰富了网页的交互维度让信息传递更自然、更高效也更具包容性。实现这个功能我们主要依赖的是window.speechSynthesis这个浏览器原生API。它就像浏览器内置的一个“语音合成器”我们只需要用JavaScript告诉它“读什么”和“怎么读”它就能帮我们处理好所有复杂的音频生成和播放工作。整个过程完全在用户本地浏览器中完成无需网络传输音频数据速度快隐私性也好。接下来我会以一个实际可运行的语音合成工具为例拆解其设计思路、核心代码、不同浏览器的兼容性“坑点”以及如何让它听起来更自然。无论你是前端新手想给个人项目加点“黑科技”还是有一定经验的开发者需要为产品集成语音播报功能这篇内容都能给你一套可以直接“抄作业”的完整方案。2. 核心原理与API深度解析2.1 Web Speech API 架构浅析Web Speech API 实际上包含两大独立的部分语音识别Speech Recognition和语音合成Speech Synthesis。我们这次聚焦的是后者。整个API的设计非常直观主要围绕几个核心对象展开window.speechSynthesis: 这是入口也是控制器。你可以把它想象成一个“语音合成管理器”它负责获取可用的语音列表、控制语音的播放、暂停和停止。SpeechSynthesisUtterance: 这是核心的“话语”对象。你需要创建它的一个实例并为其设置要朗读的文本内容以及各种朗读参数如语速、音调、音量、选择哪种语音。SpeechSynthesisVoice: 代表一个具体的“语音”。它包含了语音的语言类型如zh-CN,en-US、名称如Microsoft Xiaoxiao Online (Natural) - Chinese (Mainland)以及是否为本地/网络语音等信息。它们之间的关系是你创建一个SpeechSynthesisUtterance订单订单上写明了要读什么、用什么语调然后把这个订单提交给speechSynthesis这个管理器去执行。管理器会调用你指定的SpeechSynthesisVoice来“生产”语音。注意speechSynthesis是一个单例。这意味着在整个页面生命周期中无论你在哪里调用window.speechSynthesis你访问的都是同一个全局管理器。这简化了控制但也意味着你需要妥善管理播放队列避免冲突。2.2 SpeechSynthesisUtterance 关键属性详解创建话语对象后你可以通过设置其属性来精细控制合成效果const utterance new SpeechSynthesisUtterance(你好世界); // 1. 文本内容最基本的属性 utterance.text 这是要转换为语音的文本内容。; // 2. 语速 (rate): 默认值为1。范围通常在0.1到10之间但0.5到2是更自然、更被广泛支持的范围。 // 0.5表示半速2表示两倍速。 utterance.rate 1.2; // 比默认稍快一点 // 3. 音高 (pitch): 默认值为1。范围通常在0到2之间。值越高声音越尖细如卡通角色值越低声音越低沉。 utterance.pitch 1.0; // 标准音高 // 4. 音量 (volume): 默认值为1。范围在0到1之间。1代表最大音量。 utterance.volume 0.8; // 80%的音量避免突然太响 // 5. 语音 (voice): 这是一个 SpeechSynthesisVoice 对象。需要从 speechSynthesis.getVoices() 返回的列表中选取。 // 设置方法见下文。 // 6. 语言 (lang): 设置文本的语言。这很重要因为它会影响合成引擎对单词发音和语调的处理。 // 即使设置了voice也建议设置正确的lang作为后备。 utterance.lang zh-CN; // 简体中文为什么这些参数重要调整rate和pitch是让合成语音摆脱“机器人感”的第一步。例如播报紧急告警时可以适当提高rate和pitch以制造紧迫感而朗读一篇散文时则可以使用稍慢的语速和稳定的音高让听感更舒适。2.3 异步性与事件驱动模型Web Speech API 的操作是异步的。当你调用speechSynthesis.speak(utterance)时它不会阻塞你的JavaScript主线程而是立即返回将语音任务加入队列。语音的合成与播放状态通过事件来通知。你需要监听SpeechSynthesisUtterance对象上的事件来了解任务进展utterance.onstart (event) { console.log(语音开始合成并播放); // 可以在这里更新UI比如将按钮状态改为“播放中” }; utterance.onend (event) { console.log(语音播放结束); // 在这里恢复UI状态比如将按钮改回“播放” // 或者播报队列中的下一条内容 }; utterance.onerror (event) { console.error(语音合成或播放过程中发生错误:, event.error); // 处理错误例如提示用户“语音服务暂不可用” }; utterance.onpause (event) { /* 处理暂停 */ }; utterance.onresume (event) { /* 处理恢复 */ }; utterance.onboundary (event) { /* 当读到某个词或句子边界时触发可用于高亮跟随 */ };实操心得onend事件非常关键。如果你需要实现“自动播报下一段”的功能一定要在onend回调里触发下一个speak操作。如果直接在循环中连续调用speak很可能会因为队列处理问题导致只有最后一条被播出。3. 完整实现步骤与代码拆解3.1 基础HTML结构与样式搭建我们先构建一个简单但功能清晰的界面。这个界面将包含文本输入区、控制参数滑块、语音选择下拉框以及控制按钮。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML5JS 语音合成工具/title style body { font-family: sans-serif; max-width: 800px; margin: 2rem auto; padding: 1rem; } .container { background: #f5f5f5; padding: 2rem; border-radius: 10px; } textarea { width: 100%; height: 120px; margin-bottom: 1rem; padding: 0.8rem; box-sizing: border-box; } .controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; } .control-group label { display: block; margin-bottom: 0.3rem; font-weight: bold; } .control-group input[typerange], .control-group select { width: 100%; } .buttons { display: flex; gap: 1rem; } button { padding: 0.8rem 1.5rem; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; flex: 1; } #speakBtn { background: #4CAF50; color: white; } #pauseBtn { background: #FF9800; color: white; } #resumeBtn { background: #2196F3; color: white; } #stopBtn { background: #f44336; color: white; } button:disabled { background: #cccccc; cursor: not-allowed; } .status { margin-top: 1rem; padding: 0.8rem; background: #e8f5e9; border-radius: 5px; display: none; } /style /head body div classcontainer h1 网页语音合成工具/h1 textarea idtextInput placeholder请输入需要转换成语音的文字...欢迎使用基于Web Speech API的语音合成演示。这是一个纯前端实现的文字转语音工具。/textarea div classcontrols div classcontrol-group label forrateControl语速: span idrateValue1.0/span/label input typerange idrateControl min0.5 max2 step0.1 value1.0 /div div classcontrol-group label forpitchControl音高: span idpitchValue1.0/span/label input typerange idpitchControl min0.5 max1.5 step0.1 value1.0 /div div classcontrol-group label forvolumeControl音量: span idvolumeValue1.0/span/label input typerange idvolumeControl min0 max1 step0.1 value1.0 /div div classcontrol-group label forvoiceSelect选择发音人:/label select idvoiceSelect/select /div /div div classbuttons button idspeakBtn播放/button button idpauseBtn disabled暂停/button button idresumeBtn disabled继续/button button idstopBtn disabled停止/button /div div idstatus classstatus/div /div script srctts.js/script !-- 我们将JS代码放在单独文件 -- /body /html这个界面提供了所有必要的控制元素。使用grid布局让控制面板更整齐按钮状态启用/禁用将通过JavaScript动态控制。3.2 JavaScript核心逻辑实现我们将所有逻辑放在tts.js文件中。代码将按模块化思路组织便于理解和维护。// tts.js (() { // 获取DOM元素 const textInput document.getElementById(textInput); const rateControl document.getElementById(rateControl); const pitchControl document.getElementById(pitchControl); const volumeControl document.getElementById(volumeControl); const voiceSelect document.getElementById(voiceSelect); const speakBtn document.getElementById(speakBtn); const pauseBtn document.getElementById(pauseBtn); const resumeBtn document.getElementById(resumeBtn); const stopBtn document.getElementById(stopBtn); const statusEl document.getElementById(status); const rateValue document.getElementById(rateValue); const pitchValue document.getElementById(pitchValue); const volumeValue document.getElementById(volumeValue); // 核心状态变量 let currentUtterance null; let voices []; // 1. 初始化加载可用语音列表 function loadVoices() { // 注意在某些浏览器中getVoices()是异步的初始可能返回空数组。 voices window.speechSynthesis.getVoices(); voiceSelect.innerHTML ; // 清空下拉框 // 过滤并添加语音选项 voices.forEach((voice, index) { const option document.createElement(option); option.value index; // 显示语音名称和语言 option.textContent ${voice.name} (${voice.lang})${voice.default ? - 默认 : }; voiceSelect.appendChild(option); }); // 尝试默认选择中文语音 const defaultChineseVoice voices.find(voice voice.lang.startsWith(zh)); if (defaultChineseVoice) { voiceSelect.value voices.indexOf(defaultChineseVoice); } updateStatus(已加载 ${voices.length} 种语音。); } // 关键点监听语音列表变化事件 window.speechSynthesis.onvoiceschanged loadVoices; // 页面加载时也立即尝试加载一次 loadVoices(); // 2. 更新滑块数值显示 rateControl.addEventListener(input, () rateValue.textContent rateControl.value); pitchControl.addEventListener(input, () pitchValue.textContent pitchControl.value); volumeControl.addEventListener(input, () volumeValue.textContent volumeControl.value); // 3. 更新按钮状态函数 function updateButtonState(isSpeaking, isPaused) { speakBtn.disabled isSpeaking !isPaused; pauseBtn.disabled !isSpeaking || isPaused; resumeBtn.disabled !isSpeaking || !isPaused; stopBtn.disabled !isSpeaking; } // 4. 更新状态提示 function updateStatus(message, isError false) { statusEl.textContent message; statusEl.style.display block; statusEl.style.background isError ? #ffebee : #e8f5e9; statusEl.style.color isError ? #c62828 : #2e7d32; // 3秒后自动隐藏非错误状态 if (!isError) { setTimeout(() { statusEl.style.display none; }, 3000); } } // 5. 核心播放函数 function speakText() { const text textInput.value.trim(); if (!text) { updateStatus(请输入要转换的文本。, true); return; } // 停止当前可能正在播放的语音 window.speechSynthesis.cancel(); // 创建新的话语实例 currentUtterance new SpeechSynthesisUtterance(text); // 设置参数 currentUtterance.rate parseFloat(rateControl.value); currentUtterance.pitch parseFloat(pitchControl.value); currentUtterance.volume parseFloat(volumeControl.value); // 设置选中的语音 const selectedVoiceIndex voiceSelect.value; if (selectedVoiceIndex ! voices[selectedVoiceIndex]) { currentUtterance.voice voices[selectedVoiceIndex]; currentUtterance.lang voices[selectedVoiceIndex].lang; // 同步语言 } // 绑定事件监听器 currentUtterance.onstart () { updateStatus(语音播放开始...); updateButtonState(true, false); }; currentUtterance.onend () { updateStatus(播放完成。); updateButtonState(false, false); currentUtterance null; }; currentUtterance.onerror (event) { console.error(SpeechSynthesisUtterance error:, event); updateStatus(播放出错: ${event.error}, true); updateButtonState(false, false); currentUtterance null; }; currentUtterance.onpause () { updateStatus(已暂停。); updateButtonState(true, true); }; currentUtterance.onresume () { updateStatus(继续播放...); updateButtonState(true, false); }; // 开始播放 window.speechSynthesis.speak(currentUtterance); } // 6. 控制函数 function pauseSpeech() { if (window.speechSynthesis.speaking) { window.speechSynthesis.pause(); } } function resumeSpeech() { if (window.speechSynthesis.paused) { window.speechSynthesis.resume(); } } function stopSpeech() { window.speechSynthesis.cancel(); updateStatus(已停止。); updateButtonState(false, false); currentUtterance null; } // 7. 绑定按钮事件 speakBtn.addEventListener(click, speakText); pauseBtn.addEventListener(click, pauseSpeech); resumeBtn.addEventListener(click, resumeSpeech); stopBtn.addEventListener(click, stopSpeech); // 8. 可选支持回车键快速播放在文本区域按CtrlEnter textInput.addEventListener(keydown, (e) { if (e.ctrlKey e.key Enter) { e.preventDefault(); speakText(); } }); // 初始化按钮状态 updateButtonState(false, false); updateStatus(准备就绪。请先确保浏览器支持Web Speech API。); })();代码逻辑解析立即执行函数使用(() { ... })()包裹代码避免污染全局命名空间。语音加载loadVoices函数是关键。我们不仅要在页面加载时调用它还必须监听onvoiceschanged事件因为语音列表的加载是异步的尤其在Chrome中页面刚加载时getVoices()可能返回空数组稍后事件触发时才填充。状态管理updateButtonState函数根据speechSynthesis.speaking和speechSynthesis.paused这两个全局状态来禁用/启用对应按钮这是实现良好用户体验的核心。错误处理在onerror事件中捕获并显示错误信息。常见的错误有interrupted被中断、audio-busy音频设备忙等。播放控制cancel()方法会立即停止播放并清空队列pause()和resume()则用于暂停和恢复当前话语。3.3 功能增强与优化实践基础功能完成后我们可以考虑一些增强体验的优化点优化一队列管理与连续播报上面的示例一次只处理一段文本。如果要播报一个文章列表需要更精细的队列管理。class TTSQueue { constructor() { this.queue []; this.isPlaying false; } add(text, config {}) { this.queue.push({ text, ...config }); if (!this.isPlaying) { this._playNext(); } } _playNext() { if (this.queue.length 0) { this.isPlaying false; return; } this.isPlaying true; const { text, ...config } this.queue.shift(); const utterance new SpeechSynthesisUtterance(text); Object.assign(utterance, config); utterance.onend () this._playNext(); utterance.onerror () this._playNext(); // 出错也播放下一条 window.speechSynthesis.speak(utterance); } clear() { this.queue []; window.speechSynthesis.cancel(); this.isPlaying false; } } // 使用示例 // const ttsQueue new TTSQueue(); // ttsQueue.add(第一条消息, { rate: 1.0 }); // ttsQueue.add(第二条消息, { rate: 1.2 });优化二语音缓存与预加载对于固定不变的提示音如“操作成功”、“收到新消息”可以预合成并缓存实现零延迟播放。但请注意SpeechSynthesisUtterance对象本身不能被“缓存”后重复播放。一个变通方案是使用AudioContext结合speechSynthesis将语音输出到音频流并缓存但这比较复杂。更简单的做法是准备好固定的Utterance实例在需要时重新设置文本并播放。优化三更友好的状态反馈除了文字状态还可以结合CSS动画。例如在播放时让播放按钮有一个脉动的效果或者在状态栏显示一个模拟的声波动画。keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .is-speaking { animation: pulse 1.5s infinite ease-in-out; }在onstart和onend事件中为按钮添加/移除这个类即可。4. 浏览器兼容性“深坑”与实战避坑指南Web Speech API 的兼容性总体不错但魔鬼藏在细节里。不同浏览器、不同操作系统的表现差异巨大必须提前了解并做好应对。4.1 核心兼容性现状浏览器/平台语音合成支持主要语音来源关键特性差异Chrome / Edge (Chromium)优秀在线语音服务 (如Google Cloud TTS)语音质量高种类多。onvoiceschanged事件必须监听否则初始语音列表可能为空。Firefox良好系统本地语音 (如Windows的OneCore, macOS的VoiceOver)依赖操作系统已安装的语音包。中文语音可能需要手动在系统设置中安装。Safari良好系统本地语音 (macOS VoiceOver)表现与Firefox类似同样依赖系统语音。移动端浏览器参差不齐系统语音或在线服务iOS Safari支持尚可Android Chrome支持较好但权限和策略可能更严格。重要提示几乎所有浏览器的语音合成功能都要求页面通过HTTPS协议加载或者在localhost本地开发环境中。在普通的HTTP网站上speechSynthesisAPI可能被完全禁用或功能受限。4.2 五大常见“坑”及解决方案坑点一Chrome中语音列表初始为空这是最常见的问题。在Chrome中speechSynthesis.getVoices()在页面加载初期返回空数组需要等待onvoiceschanged事件触发。解决方案必须实现“事件监听 立即调用”的双保险模式。let voices []; function populateVoiceList() { voices window.speechSynthesis.getVoices(); // ... 更新UI } // 方案A监听事件必须 speechSynthesis.onvoiceschanged populateVoiceList; // 方案B延迟调用备选解决某些情况下事件不触发 setTimeout(populateVoiceList, 500); // 方案C在用户交互如点击后触发最可靠 document.getElementById(someButton).addEventListener(click, () { if (voices.length 0) { populateVoiceList(); } });坑点二语音播放被浏览器自动阻止现代浏览器为了用户体验和节省电量通常不允许页面在用户没有与页面交互如点击、触摸之前自动播放音频。这被称为“自动播放策略”。解决方案所有speechSynthesis.speak()的调用必须在一个由用户手势如click,touchstart触发的事件处理函数中同步执行。// 正确做法在按钮的click事件中直接调用speak speakBtn.addEventListener(click, () { // 直接在这里创建utterance并speak const utterance new SpeechSynthesisUtterance(text); speechSynthesis.speak(utterance); // 此行代码必须在click事件同步执行栈内 }); // 错误做法在异步回调如setTimeout, fetch.then中调用可能被阻止 speakBtn.addEventListener(click, () { setTimeout(() { speechSynthesis.speak(utterance); // 可能失败 }, 0); });坑点三pause()和resume()行为不一致在某些浏览器尤其是旧版本中pause()可能无法在单词中间暂停而是暂停在下一个词边界。resume()后也可能有轻微延迟或音调异常。解决方案将重要的暂停/恢复功能视为“锦上添花”核心功能保证speak和cancel的稳定。在UI上用“停止”代替“暂停”可能更符合用户预期因为停止后重新播放是可靠的。实测目标浏览器如果pause/resume体验不佳可以考虑禁用这两个按钮。坑点四长时间文本被截断或合成失败浏览器或底层引擎对单次speak的文本长度可能有限制通常很大但并非无限。极长的文本可能导致合成失败或内存问题。解决方案实现文本分片。将长文本按标点符号句号、问号、感叹号或固定长度切分成多个短句依次加入播放队列。function splitLongText(text, maxLength 200) { const sentences text.match(/[^。.!?][。.!?]/g) || [text]; const chunks []; let currentChunk ; sentences.forEach(sentence { if ((currentChunk sentence).length maxLength currentChunk) { chunks.push(currentChunk); currentChunk sentence; } else { currentChunk sentence; } }); if (currentChunk) chunks.push(currentChunk); return chunks; } // 然后使用前面的 TTSQueue 类依次播放 chunks。坑点五离线环境或网络问题Chrome的在线语音服务在断网时可能无法工作或者回退到质量很差的本地语音。解决方案功能检测与降级在应用启动时检查if (speechSynthesis in window)并尝试播放一个简短的测试文本。如果失败或超时则在UI上提示用户“语音功能当前不可用”并隐藏或禁用相关控件。引导用户在设置区域提示用户“为了获得最佳语音效果请确保网络连接并使用最新版本的Chrome或Edge浏览器。”提供备选方案对于关键的通知考虑同时提供视觉闪烁或震动在支持的设备上作为备选。4.3 实战调试技巧打开浏览器控制台在Console中直接测试API是最快的。// 在Console中快速测试 let synth window.speechSynthesis; let voices synth.getVoices(); console.log(voices); // 查看所有可用语音 let u new SpeechSynthesisUtterance(测试); u.voice voices[0]; // 选择一个 synth.speak(u);监听所有事件在开发时可以为utterance的所有事件添加日志方便追踪状态流。使用speechSynthesis.speaking和paused这两个全局只读属性可以帮你判断当前合成器的状态用于UI同步。注意内存虽然不常见但快速、大量地创建和播放Utterance对象而不进行管理在极端情况下可能引发内存问题。确保在不需要时如页面卸载前调用speechSynthesis.cancel()。5. 进阶应用场景与扩展思路掌握了基础实现和避坑技巧后我们可以将这个技术应用到更具体的场景中。5.1 场景一无障碍阅读辅助为视力障碍用户或希望“听”文章的用户提供支持。核心是与页面内容深度结合。实现要点内容获取不是让用户手动复制文本而是通过JavaScript提取文章主体内容例如通过document.querySelector(article).innerText。阅读进度高亮利用utterance.onboundary事件该事件在朗读到单词或句子边界时触发并提供字符索引。你可以用这个索引来高亮当前正在朗读的文本。const articleElement document.getElementById(article); const articleText articleElement.innerText; const utterance new SpeechSynthesisUtterance(articleText); utterance.onboundary (event) { if (event.name word || event.name sentence) { // 根据需求选择 const charIndex event.charIndex; const charLength event.charLength; // 清除之前的高亮 // 高亮从 charIndex 开始长度为 charLength 的文本 // 这里需要操作DOM可能涉及Range和Selection API或预先给文本包裹span } };播放控制浮动条创建一个始终悬浮在页面角落的控制条包含播放/暂停、停止、调节语速音量和跳转到上一句/下一句的功能。5.2 场景二动态数据播报在后台监控系统或数据大屏中当某些关键指标超过阈值时自动用语音播报警告。实现要点事件驱动监听你的数据更新事件如WebSocket消息、轮询API返回。优先级队列不同级别的告警如错误、警告、通知使用不同的语音参数语速、音调和可能的排队策略。高优先级告警可以打断当前低优先级播报。class PriorityTTS { speakWithPriority(text, priority normal) { const utterance new SpeechSynthesisUtterance(text); if (priority high) { utterance.rate 1.4; utterance.pitch 1.2; window.speechSynthesis.cancel(); // 打断当前播放 } window.speechSynthesis.speak(utterance); } }防骚扰机制避免在短时间内重复播报相同或相似的告警可以设置一个简单的防抖debounce或节流throttle逻辑。5.3 场景三交互式语音反馈在游戏或教育类H5应用中为用户的交互操作提供即时语音反馈。实现要点资源预加载虽然不能直接缓存音频但可以预创建好所有需要用到的Utterance对象实例放在一个对象池里。当需要播放时直接从池中取出实例并speak。这比每次动态创建对象稍快。const soundPool { correct: new SpeechSynthesisUtterance(太棒了), wrong: new SpeechSynthesisUtterance(再试试看。), levelUp: new SpeechSynthesisUtterance(恭喜升级) }; // 初始化时设置好参数 Object.values(soundPool).forEach(u { u.rate 1.1; u.volume 0.9; }); // 使用时 function playSound(soundName) { // 注意一个Utterance对象不能同时播放两次需要复制或重新创建 const utterance new SpeechSynthesisUtterance(soundPool[soundName].text); Object.assign(utterance, { rate: soundPool[soundName].rate, /*...其他属性*/ }); window.speechSynthesis.speak(utterance); }与动画同步确保语音反馈与屏幕上的视觉动画如得分特效、角色动作在时间上同步可以通过utterance.onstart来触发动画。5.4 扩展思路从合成到识别双向交互既然提到了Web Speech API包含语音识别一个更高级的应用是构建一个简单的语音助手雏形。用户点击麦克风按钮通过SpeechRecognitionAPI需用户授权将语音转换为文字。将识别出的文字显示在输入框中或直接作为命令解析例如“朗读页面标题”。根据命令调用我们上面实现的speechSynthesis功能进行回复。 这实现了从“听”到“说”的完整闭环可以创造出非常有趣的交互体验。不过语音识别的兼容性和准确性挑战更大需要更细致的错误处理和用户引导。整个项目实践下来我的体会是Web Speech API 的门槛比想象中低但要做好、做稳定需要花费大量精力处理不同平台的细微差别。它不是一个“设置完就一劳永逸”的功能而是一个需要根据你的具体应用场景、目标用户群所使用的浏览器进行充分测试和适配的功能点。建议在项目初期就将其纳入兼容性测试清单尤其是如果你打算将其用于核心功能而非锦上添花的特效。最后始终把无障碍访问放在心里即使你的主要用户不是视障人士一个能“朗读”的网页在很多场景下如驾驶时、双手被占用时也能提供巨大的便利。