> 风之谷家庭服务器系列 · 第 2 篇

## 前言

上一篇搭好了书屋，这一篇给它加"耳朵"。Kindle 有朗读功能，网页其实也可以有——不花钱、不申请 API Key、**断网也能用**，因为用的是操作系统自带的语音。

![md2-1-手机听书.jpg](https://developer.qcloudimg.com/http-save/yehe-12646891/d68969df4a1214b67d936d2abe8f953d.jpg)

*手机端听书：当前句高亮 + 语速调节 + 音色选择*

## 一、基础：三行代码开口说话

```js
const u = new SpeechSynthesisUtterance("床前明月光，疑是地上霜。");
u.lang = "zh-CN";
speechSynthesis.speak(u);
```

语音来自操作系统（Windows 自带的中文语音包等），完全本地运行，不经过任何云服务。这对隐私和离线场景是决定性优势。

## 二、逐句朗读 + 当前句高亮

整章一起读没法高亮。把正文按句读切分，逐句送 `speak`，`onstart` 时给当前句加背景高亮——听书瞬间有了"字幕"，跟 K 歌歌词一个效果：

```js
const sentences = text.split(/(?<=[。！？；\n])/).filter(s => s.trim());
```

这里用了 ES2018 的**后行断言** `(?<=...)`，在分隔符后面切开、保留标点，现代浏览器都支持。

![md2-1-听书朗读高亮.png](https://developer.qcloudimg.com/http-save/yehe-12646891/a9bbee6ede85e5dd01c26e8c015a7924.png)

*网页版逐句朗读，当前句带背景高亮*

然后就是一个简单的朗读队列：

```js
function speakNext(i) {
    if (i >= sentences.length) return onChapterDone();
    const u = new SpeechSynthesisUtterance(sentences[i]);
    u.lang = "zh-CN";
    u.rate = rate;                    // 语速 0.5 ~ 2
    u.onstart = () => highlight(i);   // 当前句高亮
    u.onend = () => speakNext(i + 1);
    speechSynthesis.speak(u);
}
```

## 三、读完自动翻页换章

`onChapterDone` 里调用翻页 API 拿到下一章文本，继续 `speakNext(0)`。整本书可以从头躺到尾听完，中途按暂停/继续/停止都好做。

## 四、三个必踩的坑

1. **voices 异步加载**：页面加载后立刻 `getVoices()` 返回空数组，必须监听 `voiceschanged` 事件再取一次；
2. **iOS 必须由用户手势触发**第一次 `speak`，不能页面一加载就开读（Safari 的策略限制）；
3. **语速**：`u.rate` 范围 0.5~2，中文默认 1，长辈们普遍喜欢 1.3 左右，做成可调的。

![md2-3-手机阅读页.jpg](https://developer.qcloudimg.com/http-save/yehe-12646891/25356d8db62e84c13438cc7b61f72987.jpg)

*手机端阅读页（朗读 / 解读工具条）*

## 结语

零后端、零 API Key、零流量费，听书功能就齐活了。配合上一篇的书屋，手机连上 WiFi 躺沙发上就能听《三国》。

**下篇预告**：《把网页装进手机：PWA + 触屏翻页改造实录》——让网页在手机桌面上像一个真正的 App。

上一篇搭好了书屋，这一篇给它加"耳朵"。Kindle 有朗读功能，网页其实也可以有——不花钱、不申请 API Key、断网也能用，因为用的是操作系统自带的语音。

网页听书零成本：Web Speech API 逐句朗读、当前句高亮、自动翻页换章

前端

开发工具

客户端

零后端零APIKey，用操作系统自带语音实现网页听书功能。支持逐句朗读、当前句高亮、语速调节与音色选择，断网可用，隐私安全。文章详解三行代码基础实现、朗读队列构建、自动翻页换章，并总结voices异步加载、iOS手势触发、语速调节三大坑点，手机连WiFi即可躺听全书。

WorkBuddy企业版限时双倍 Credits 活动

workbuddy

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

网页听书零成本：Web Speech API 逐句朗读、当前句高亮、自动翻页换章-腾讯云开发者社区-腾讯云

网页听书零成本：Web Speech API 逐句朗读、当前句高亮、自动翻页换章

网页听书零成本：Web Speech API 逐句朗读、当前句高亮、自动翻页换章

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐