Ver. 1.0 | 2025
HTML Text Reader
HTMLドキュメントの本文のみを自動抽出し、ブラウザ内蔵の音声合成エンジンで読み上げるWebアプリケーションです。タグは一切読まれません。
ソフトウェア概要
Web上の記事・ドキュメント・仕様書など、あらゆるHTMLファイルをアップロードするだけで、 タグ・スクリプト・スタイル情報を自動除去し、純粋な本文テキストのみを取り出して音声で読み上げます。 文単位でハイライト表示され、画面を見ながらでも・目を閉じていても使えます。
HTMLファイルを画面上にドロップするか、ダイアログから選択するだけで即座に処理を開始します。.html / .htm 形式に対応。
DOMParserでHTMLを解析し、<script>・<style>・<nav>・<footer> 等を除去。本文テキストのみを余分な空白なしで取り出します。
ブラウザ標準の Web Speech API(SpeechSynthesis)を使用。日本語音声を優先して自動選択し、インストール不要で動作します。
読み上げ中の文をリアルタイムでハイライト表示し、自動スクロール追従します。クリックで任意の文から再生することも可能です。
速度(0.5〜2.0倍)・音量・音程をスライダーでリアルタイム調整。複数の音声エンジンから使いたいものを選択できます。
抽出した本文テキストを .txt ファイルとしてダウンロードできます。HTMLを受け取ってプレーンテキストで納品したい場面にも活用できます。
インストール不要。ブラウザさえあれば、HTMLファイルを用意するだけで今すぐ使い始められます。 アップロードしたファイルはサーバーに送信されず、すべてブラウザ内で処理されるため、機密文書も安心して扱えます。
動作環境
モダンブラウザChrome / Edge / Safari / Firefox
インストール
不要ブラウザで開くだけ
通信
完全オフラインファイルは外部送信なし
対応形式
.html / .htmUTF-8 推奨
ドラッグ&ドロップまたはクリックでファイルを選択します。複数ファイルには対応していません(1ファイルずつ処理)。
タグを除去した本文がテキストエリアに表示されます。文字数と文の数も確認できます。
使用する音声エンジンを選択し、速度・音量・音程を好みに合わせてスライダーで調整します。
読み上げが始まります。読み上げ中は文単位でハイライトされます。任意の文をクリックすると、その文から再生できます。
| 操作 | 名称 | 説明 |
|---|---|---|
| ▶ / ⏸ |
再生 / 一時停止
PLAY
|
読み上げを開始・一時停止します。再度押すと再開します。一時停止中も位置は保持されます。 |
| ⏹ |
停止
STOP
|
読み上げを完全に停止し、進捗をリセットします。 |
| ⏮ |
前の文へ
|
ひとつ前の文に戻り、ハイライト位置を移動します。 |
| ⏭ |
次の文へ
|
ひとつ次の文に進み、ハイライト位置を移動します。 |
| 🖱 クリック |
文の指定再生
|
テキストエリア内の任意の文をクリックすると、その文から読み上げを開始します。 |
| 速度スライダー |
読み上げ速度
|
0.5〜2.0倍の範囲で読み上げ速度を調整します。デフォルトは 1.0 倍速です。 |
| 音量スライダー |
音量
|
0〜1.0 の範囲で音量を調整します。 |
| 音程スライダー |
ピッチ
|
0.5〜2.0 の範囲で声のピッチ(音程)を調整します。 |
| 音声セレクト |
音声エンジン選択
|
ブラウザに搭載されている音声エンジンから選択できます。日本語音声が自動的に優先表示されます。 |
| 💾 |
テキスト保存
|
抽出した本文テキストを extracted_text.txt としてダウンロードします。 |
本アプリはすべて標準Web技術(HTML・CSS・JavaScript)のみで実装されています。 テキスト抽出には DOMParser API、音声読み上げには SpeechSynthesis API(Web Speech API) を使用しています。 外部ライブラリやフレームワークは一切使用していません。
日本語読み上げの品質はブラウザの音声エンジンに依存します。ChromeまたはEdgeで最も多くの日本語音声が利用できます。 文字コードはUTF-8を推奨します。Shift-JISのHTMLは文字化けする場合があります。 大容量のHTMLファイルは処理に時間がかかる場合があります。
テキスト抽出
DOMParser APIタグ・スクリプト・スタイルを除去
音声合成
Web Speech APISpeechSynthesis インターフェース
ファイル読み込み
FileReader APIローカル処理・非送信
文区切り
正規表現。!?.!? で文単位に分割
ファイル保存
Blob + ObjectURLtext/plain; UTF-8
依存ライブラリ
なしバニラJS・標準API のみ