使用 Articulate.js 的叙事浏览器

许多拥有大量书面内容的网站都使用专门设计的打印样式表。这样，用户就可以打印出相关内容，而无需在导航、广告或任何其他无关内容上浪费纸张。

Articulate.js，一个 jQuery 插件，我认为是叙事的等价物。只需一行代码，它就能让开发者创建链接，允许用户点击、坐下来，并聆听浏览器朗读网页的重要内容。在某些方面，它可以将一篇有思想的论文或文章变成一个迷你播客。并且因为它使用了内置的 JavaScript 功能，所以不需要浏览器扩展或其他系统软件。

我想分享一下我如何创建 Articulate.js，希望它能为读者提供关于如何以不同方式应用这项技术的思路。

语音合成接口

Articulate.js 使用 Web Speech API 的语音合成接口。它目前在所有主流浏览器中都受支持，包括最新版本的 Edge、Safari、Chrome、Opera、Firefox、iOS Safari 和 Android 版 Chrome。

语音合成接口有两个 window 对象用于启用浏览器语音功能：SpeechSynthesis 和 SpeechSynthesisUtterance。第一步是创建一个 SpeechSynthesisUtterance 对象的实例，并指定您希望朗读的文本。如果需要，您可以设置其他属性，例如速率、音调、音量和语音。

要开始朗读，此对象将作为参数传递给 SpeechSynthesis.speak() 方法。其他播放功能，例如暂停、恢复和取消，都是 SpeechSynthesis 对象的方法。微软提供了一个 有用的演示，您可以使用它来体验这些功能。

在本文的末尾，列出了许多资源，它们将引导您了解此功能的复杂性并提供其他示例。

入门

轻量级的 Articulate.js 插件允许您利用 jQuery 的强大选择器选项来指定要朗读的网站部分。例如，根据页面的组织方式，一行代码（如下所示）可以指示浏览器朗读整篇文章或博客文章的内容

$('article').articulate('speak');

这是一个仅针对主要标题和段落的示例

$('h1, h2, p').articulate('speak');

在内部，Articulate.js 克隆匹配的元素集及其所有后代元素和文本节点。然后，它使用一组默认规则解析此克隆，确定哪些内容应该朗读和忽略，然后添加适当的停顿，使所有内容听起来更像叙事。

这些是基本方法以及 CodePen 示例

函数	描述
$(selector).articulate('speak');	朗读指定的 DOM 元素及其后代
$().articulate('pause');	暂停朗读
$().articulate('resume');	在暂停后恢复朗读
$().articulate('stop');	永久停止朗读

查看 CodePen 中 Adam Coti 的作品 Articulate: 基本函数 (@adamcoti) 在 CodePen 上。

您一次只能激活一个 SpeechSynthesisUtterance 实例，这就是为什么暂停、恢复或停止不需要 jQuery 选择器的原因。如前所述，这些方法作用于 SpeechSynthesis 对象。

此外，浏览器只有在没有更多文本要读取或执行“停止”调用时才会停止朗读。如果朗读已暂停，则必须在朗读其他内容之前恢复或停止。

可以调整速率、音调和音量。通过使用输入滑块，调整可以为用户提供一些额外的控制。虽然系统默认速率为 1，但在经过大量测试后，我将其略微提高到 1.1，因为这似乎提供了更自然的朗读速度。当然，这是主观的，可以被覆盖。

函数	描述
$().articulate('rate',num);	设置朗读语音的速率 默认值 = 1.1 范围 = [0.1 – 10]
$().articulate('pitch',num);	设置朗读语音的音调 默认值 = 1.0 范围 = [0 – 2]
$().articulate('volume',num);	设置朗读语音的音量 默认值 = 1.0 范围 = [0 – 1]

查看 CodePen 中 Adam Coti 的作品 Articulate : 语音参数 (@adamcoti) 在 CodePen 上。

开发人员可以使用更多选项，但让我们简单地讨论一下当 Articulate.js 被要求朗读页面上的内容时，幕后发生了什么。

Articulate.js 算法

Articulate.js 利用的语音合成接口将以最字面化的方式朗读提供的任何文本字符串。它会发一些符号的音（例如，遇到“%”时会说“percent”）；其他符号则会忽略（例如，引号符号不会被朗读）。它的节奏主要由逗号决定，逗号会产生短暂的停顿，句号的停顿稍长一些。

考虑到这一点，需要进行大量的操作才能准备一个网页进行朗读。不幸的是，人们不能简单地连接 DOM 中所有选定的文本节点，因为这会导致大量断句的文本（例如列表），包含不适合以连贯方式朗读的内容（例如表格），并忽略应该描述的项目（例如图像）。

Articulate.js 通过对 jQuery 选择器中指定的 DOM 元素应用以下规则（其中包括）来处理此问题

• 删除可能包含文本节点但不应朗读的 HTML 标签，例如 <form> 和 <s>。默认情况下，指定了 21 个标签应被忽略。
• 查找 <h1> 到 <h6>、<li> 和 <br> 标签的实例，并在每个实例后面追加句号或逗号。这样做是为了确保在朗读时会发生停顿，因为这些元素通常在视觉上表示为不带标点的。
• 插入从图像的 alt 属性、表格的 <caption> 标签和图形的 <figcaption> 标签收集的描述性文本。

完成后，剩下的内容将转换为一个长文本字符串，该字符串现在需要进一步操作，包括

• 查找 <q> 标签和成对的弯引号，并在开头插入“quote”，在结尾插入“unquote”，以便在朗读时区分它们。
• 添加开始和结束文本以指定列表和块引用。
• 查找 em 破折号，并将其替换为逗号以产生短暂的停顿。
• 删除其余的 HTML 标签和注释。
• 删除其余的换行符和回车符，以及残留的 HTML 特殊字符。

此时，文本字符串已准备好发送到语音合成接口，由浏览器朗读。如果您查看此字符串，您会看到多个句号、逗号和空格的实例——没关系——因为这不会影响它的发音。也就是说，一个或多个逗号或句号组合在一起不会产生更长的停顿。

自定义

通过使用 JavaScript 和 HTML 数据属性，可以自定义 Articulate.js 以优化用户体验。如下面的 CodePen 演示所示，您可以

• 指定要朗读的 HTML 标签，否则这些标签会被忽略，反之亦然。
• 在文本中执行搜索和替换，这对于缩写很有帮助。例如，您可以指定所有“i.e.”的实例都应读作“that is”。
• 指定要忽略的文本块。例如，一句“点击此处了解更多信息”的句子不需要朗读。
• 指定要拼读的单词。
• 在专门制作的注释标签中指定要朗读的副本，这些副本在屏幕上是隐藏的。

查看 CodePen 中 Adam Coti 的作品 Articulate: 文本操作 (@adamcoti) 在 CodePen 上。

查看 CodePen 中 Adam Coti 的作品 Articulate: HTML 数据属性 (@adamcoti) 在 CodePen 上。

浏览器一致性

您会注意到，语音合成接口在不同的浏览器和操作系统之间略有不同。例如，在 iPhone 上，默认的语音速度听起来会比桌面实现快一些。开发人员可以为用户提供输入滑块或单选按钮以微调他们的体验。

此外，根据操作系统和设备的不同，浏览器会向语音合成接口公开不同的语音。如前面提到的微软演示中所示，可以选择这些语音以覆盖默认的“本机”语音。但是，为了简单起见，Articulate.js 仅使用默认语音——更高版本也将允许修改此参数。

一些最后的思考

Articulate.js 的灵感来源于这样一个想法：只需轻轻一点，我就能在不方便或不想盯着屏幕的时候享受文章朗读——尤其是在使用手机时。也许是在公园里闭着眼睛躺着，或者是在忙着准备晚餐的时候。目标是允许开发者进行适当的定制，使其听起来不像是屏幕阅读器，而更像是朋友在为你朗读网页。

Articulate.js 可用于网页上的任何内容的语音选项，从发音单个单词到传达屏幕上未显示的内容。如果您有兴趣，请下载源代码并进行实验。最重要的是，玩得开心！

下载和文档

带注释的源代码和 Articulate.js 的压缩版本可以在其 Github 主页下载。完整的文档也可以在那里找到。

资源

• 我可以使用 SpeechSynthesis 接口吗
• W3C：SpeechSynthesis 接口
• 会说话的 Web 应用程序 – Speech Synthesis API 简介
• 在 Microsoft Edge 中引入 Speech Synthesis API
• Mozilla 开发者网络：使用 Web Speech API