朗读
使用浏览器自带的语音合成器,逐句朗读文档或选中的文本,并在朗读时选中当前的句子。窗口底部的一个小栏提供暂停、停止、语音和语速控制。不涉及任何库、服务器或密钥。

启用
该功能由 readaloud.js 插件提供(也包含在 plugins/all_plugins.js 中)。它的命令和工具栏项为 readaloud(工具提示为 "Read aloud")。使用默认工具栏时,按钮位于 "More"(⋮)菜单中;在您自己的工具栏中,请添加 readaloud。该命令会打开朗读栏并立即开始朗读;再次运行它会关闭朗读栏。
<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/readaloud.js"></script>
<div id="editor"><p>The station opened in 1911. Trains ran twice a day.</p></div>
<script>
var editor = new RichTextEditor("#editor", {
toolbar: "mytoolbar",
toolbar_mytoolbar: "{bold,italic,underline}|{readaloud}"
});
</script>
朗读栏的样式位于 rte_theme_default.css 中,因此请在页面上保留这个样式表。
朗读栏
- Play / Pause 暂停和继续;朗读结束后会重新开始。
- Stop 结束朗读,并恢复用户之前的选区。
- Voice 以“名称(语言)”的形式列出
speechSynthesis.getVoices()中的每个语音,并标记浏览器的默认语音。浏览器报告其语音后,列表才会填充。 - Speed:0.75×、1×、1.25×、1.5× 或 2×,初始为 1×。更改从下一句开始生效。
- 状态显示 "Reading… (3/10)"、"Paused" 或 "Nothing to read"。Close 停止朗读并移除朗读栏。
如果开始朗读时有选中的内容,则只朗读选区。句子在 .、!、?、换行以及中日文标点 。!? 处拆分。页面被隐藏时(切换到另一个标签页)朗读会暂停,离开页面时朗读会停止。
选项与 API
| 选项 | 默认值 | 作用 |
|---|---|---|
readAloudHighlight | true | 朗读时在编辑器中选中每个句子。false 则朗读时不移动选区。 |
readAloudRate | 1.0 | 朗读栏未打开时 editor.readAloud() 使用的语速。朗读栏打开时,改用其语速菜单。 |
editor.readAloud({ rate: 1.5, voice: "Microsoft Zira - English (United States)" });
editor.stopReadAloud();
editor.readAloud(options) 不打开朗读栏直接朗读。rate 会被限制在 0.5–2 之间;voice 是与 speechSynthesis.getVoices() 报告的完全一致的语音 name。如果找不到该名称,则使用浏览器的默认语音。
注意事项
- 它需要
window.speechSynthesis。在没有它的浏览器中,命令会显示一个对话框,说明朗读不可用。 - 语音和语言来自浏览器和操作系统,而不是编辑器,因此不同计算机上的列表各不相同。插件不设置语言:所选的语音决定文本如何发音,因此请选择与文档语言一致的语音。
- 文本逐个节点收集,中间没有分隔符。没有句号的标题会与下一句连在一起朗读,而且两者相接处的两个单词会连读("station" + "The")。
- 当前句子以普通选区的形式显示,因此朗读时编辑器的浮动格式工具栏可能会出现在文本上方。
- 不会向文档添加任何内容;保存的 HTML 保持不变。
- 朗读栏中的文字来自
text_ra_play、text_ra_pause、text_ra_stop和text_ra_readingof等语言键。