はじめに

積読の 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 イベントの扱いやブラウザ差の雰囲気がつかめると思います。