読み上げ

ブラウザーの音声合成で、文書または選択したテキストを 1 文ずつ読み上げ、読んでいる文を選択します。ウィンドウ下部の小さなバーで、一時停止、停止、音声、速度を操作できます。ライブラリ、サーバー、キーは不要です。

有効にする

この機能は 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() のすべての音声を「name (language)」形式で表示し、ブラウザーの既定の音声に印を付けます。ブラウザーが音声を通知した時点で一覧を設定します。
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 が必要です。対応しないブラウザーでは、読み上げを利用できないことを示すダイアログを表示します。
音声と言語はエディターではなく、ブラウザーと OS が提供するため、コンピューターによって一覧が異なります。プラグインは言語を設定しません。発音は選んだ音声で決まるため、文書の言語に合った音声を選んでください。
テキストは区切りを挟まずノードごとに収集します。終止符のない見出しは次の文と一緒に読み、境目の単語は連結されます（「station」+「The」）。
通常の選択範囲で文を示すため、読み上げ中にフローティング書式ツールバーがテキストに重なる場合があります。
文書には何も追加しません。保存する HTML は変わりません。
バーの文言は、text_ra_play、text_ra_pause、text_ra_stop、text_ra_readingof などの言語キーから取得します。

関連情報：音声入力（音声からテキストへの変換）、アクセシビリティ、ツールバー項目のリファレンス。