← 全部文档

朗读

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

编辑器中正在朗读并选中一篇文章的第三句,窗口底部的朗读栏显示 Pause、Stop、语音 Microsoft David - English、语速 1x 以及状态 Reading 3 of 10
正在朗读十个句子中的第三句,它在编辑器中处于选中状态。语音列表是浏览器在该计算机上提供的列表。

启用

该功能由 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

选项默认值作用
readAloudHighlighttrue朗读时在编辑器中选中每个句子。false 则朗读时不移动选区。
readAloudRate1.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 等语言键。

相关内容:语音听写(语音转文字)、无障碍、工具栏项参考。