はじめに
積読の EPUB が溜まる一方なので、通勤中や家事の最中に「耳で読む」環境を作りたくなりました。
選択肢はだいたい 3 つです。
- 音声合成付きの読書アプリ（良い声はだいたいサブスク）
- EPUB をアップロードして音声化するオンラインサービス
- EPUB からテキストを抜き出して、自前で TTS に流すスクリプト
3 つ目を自作するなら、ブラウザ標準の Web Speech API（speechSynthesis）が使えます。この記事では API の基本を押さえたうえで、同じ仕組みで EPUB を丸ごと読み上げるブラウザツールの使い方をまとめます。
Web Speech API の最小構成
まずは素の API のおさらいです。DevTools のコンソールに貼れば、その場で喋ります。
const u = new SpeechSynthesisUtterance("吾輩は猫である。名前はまだ無い。");
u.lang = "ja-JP";
u.rate = 1.25; // 読み上げ速度（1 が標準）
const ja = speechSynthesis.getVoices().find(v => v.lang.startsWith("ja"));
if (ja) u.voice = ja;
// 単語境界イベント。対応ブラウザなら charIndex でハイライト位置が取れる
u.onboundary = e => console.log(e.name, e.charIndex);
speechSynthesis.speak(u);
ハマりどころは次の 2 点です。
-
getVoices()はページ読み込み直後だと空配列を返すことがあるので、voiceschangedイベントを待つ -
boundaryイベントで単語位置が返ってくるかどうかはブラウザ次第
もうひとつ知っておきたいのが、音声には「端末内で合成されるもの」と「ブラウザベンダーのクラウドで合成されるもの」の 2 種類があることです。API では SpeechSynthesisVoice.localService で見分けられます。
speechSynthesis.getVoices().forEach(v =>
console.log(v.name, v.lang, v.localService ? "local" : "cloud")
);
あとは EPUB（中身は XHTML の zip）を展開して、spine の順に本文を文単位で切り、Utterance をキューに積んでいけば読み上げアプリの骨格はできます。ただ、文単位のハイライトや再生位置の保存、速度変更まで作り込むとなるとそれなりの手間です。
ブラウザで完結する EPUB 読み上げツール
そこで便利なのが EPUB テキスト音声化ツール（iloveepub） です。EPUB の解析から音声合成まで、全部ブラウザの中で処理されます。インストールもアカウント登録も不要で、読み上げ時間の上限もありません。
EPUB ファイル自体はサーバーに送られません。気になる人は、DevTools の Network タブを開いたまま再生してみてください。アップロードのリクエストは 1 件も出ないはずです。なお、ピッカーで「クラウド」と表示された音声を選ぶと、読み上げ中のテキストはブラウザ側の音声サービス（Chrome なら Google の音声）で処理されます。前述の localService の話と同じで、完全にオフラインで使いたいなら「ローカル」表示の音声を選べば OK です。
使い方
- ページを開いて
.epubファイルを選ぶ - 再生ボタンを押す。前回の続きから読み上げが始まり、読んでいる文がハイライトされる
- 速度（0.75×〜2×）や音声を好みに合わせて変える
聞き逃したときは「5 文戻る」ボタンで巻き戻せます。読み上げ位置は本ごとに端末に保存されるので、タブを閉じても次回は続きから再開できます。
音声は本のメタデータの言語（dc:language）に合わせて自動で選ばれます。英語の本なら英語の音声、日本語の本なら日本語の音声が選ばれ、手動での切り替えもできます。
ブラウザごとの違い（ここが一番大事）
声の質はツールではなくブラウザと OS で決まります。ツールの説明ページの情報をもとに整理すると、こんな感じです。
| ブラウザ | 音声 | 単語ハイライト | バックグラウンド再生 |
|---|---|---|---|
| Microsoft Edge | Natural 音声（無料ではいちばん自然） | あり | デスクトップでは継続 |
| Chrome | Google の音声 | あり | デスクトップでは継続 |
| Safari / iOS | Apple のシステム音声 | 文単位 | 画面ロックで停止 |
iOS で画面をロックすると止まってしまうのは、Web ベースのリーダーならどれも同じプラットフォームの制約です。Android のブラウザは基本的にバックグラウンドでも読み続けてくれます。
「まともな声で長時間聴きたい」なら、PC なら Edge 一択だと思います。人間のナレーターによるオーディオブックには及びませんが、小説一冊を聴き通せるくらいの品質はあります。
活用 Tips
- 原稿の校正に使う：自分で書いた原稿を EPUB にして読み上げさせると、「のの」のような重複や、リズムの悪い文が驚くほど耳に引っかかります。未公開原稿でもサーバーに送られないので気兼ねなく使えます
- 語学学習：洋書を 0.75× で再生すると、ハイライトを目で追いながら聴けるので、いわゆる「聴き読み」の教材になります
- 倍速で流し読み：ビジネス書なら 1.5×〜2× で十分内容が入ってきます
なお、DRM 付きの EPUB はブラウザのツールでは開けません。ストアで買った本は、各ストア公式アプリの読み上げ機能を使いましょう。
まとめ
- Web Speech API だけで、EPUB の読み上げはかなり実用的なレベルまでできる
- 声の質はブラウザ次第。PC なら Edge の Natural 音声がおすすめ
- 自作するより先に、既存のブラウザツールで要件が満たせるか試してみる価値あり
自分で実装する予定の人も、まずは挙動の参考として一度触ってみると、boundary イベントの扱いやブラウザ差の雰囲気がつかめると思います。