BOOTH

BOOTH（Browser-based One-line Oral Take Handler）は、原稿テキストを1文ずつ画面に表示し、ユーザーがマイクで読み上げを録音するWebアプリケーションである。録音はすべてブラウザ上で完結し、サーバーを必要としない。各文の録音をOK／NG判定しながら進行し、OKと判定された音声は個別のWAVファイルとしてその都度自動ダウンロードされる。

ナレーション収録、朗読練習、音声教材の作成など、テキスト原稿を1行ずつ確実に読み上げて音声ファイル化したい場面で活用できる。Web Audio APIとMediaRecorder APIを組み合わせた録音機能と、JavaScriptによるWAVエンコードにより、外部ライブラリやサーバーサイド処理に一切依存しない軽量な構成を実現している。

概要

BOOTHは、フロントエンドのみで構成されたブラウザ完結型の原稿読み上げ録音ツールである。ユーザーは原稿テキストを貼り付け、改行区切りで分割された各文を1文ずつ画面に表示させながら、マイクで読み上げを録音する。録音した音声はその場で再生して確認し、OK／NG判定を行う。OKと判定された音声はWAV（PCM、16bit、モノラル）フォーマットで自動ダウンロードされ、次の文へ進む。NGの場合は録音データが破棄され、同じ文で再度録音を行う。

Web Audio APIおよびMediaRecorder APIによる録音と、JavaScriptによる手動WAVエンコードを組み合わせることで、外部ライブラリやサーバーサイド処理を一切使用しない。対応ブラウザはChromeを主対象とする。

特徴

• サーバー不要 — HTML / CSS / JavaScriptのみで構成。ブラウザ上で録音からWAV出力まで完結する
• 1文ずつ録音 — 原稿を改行で分割し、1文ずつ表示・録音・判定するワークフロー
• OK／NG判定 — 録音後に再生して確認し、OKなら自動ダウンロード、NGなら即座にやり直し
• WAV出力 — PCM 16bit モノラルのWAVファイルを個別にダウンロード
• 連番ファイル名 — 001_こんにちは本日はお日柄もよく.wav のように連番＋冒頭20文字で自動命名
• 戻り操作 — 録音済みの文に戻って再録音が可能。新しい録音で上書きダウンロードされる
• インライン編集 — 未録音の文はクリックしてテキストを編集可能
• 視覚的な状態管理 — 未録音・現在の文・録音済みが色とアイコンで一目でわかる
• 録音中インジケーター — 赤い点滅インジケーターにより録音状態を明確に表示

技術構成

BOOTHはフロントエンド技術のみで構成されており、サーバーサイドの処理は一切使用しない。録音にはWeb Audio APIとMediaRecorder APIを使用し、取得した音声データをJavaScriptでWAVフォーマットにエンコードしてダウンロードする。

使い方

手順1：原稿の準備

1. BOOTHをブラウザで開く
2. 原稿入力画面のテキストエリアに、読み上げたい原稿テキストを貼り付ける
3. テキストは改行ごとに1文として分割される（空行は無視される）
4. 「録音を開始する」ボタンをクリックして録音画面に遷移する

手順2：録音の実施

1. 録音画面が表示され、最初の文が大きく表示される
2. 「録音開始」ボタンをクリックし、マイクで文を読み上げる
3. 読み終わったら「録音停止」ボタンをクリックする
4. 「再生」ボタンで録音内容を確認する
5. 問題なければ「OK（次へ）」をクリック → WAVファイルが自動ダウンロードされ、次の文へ進む
6. やり直したい場合は「NG（やり直し）」をクリック → 録音データが破棄され、同じ文で再度録音を開始できる
7. 全ての文がOK済みになると、完了メッセージが表示される

原稿入力画面

BOOTHを起動すると最初に表示される画面である。テキストエリアが1つ配置されており、ここにユーザーが原稿テキストを貼り付ける。貼り付けたテキストは改行ごとに1文として分割され、空行は無視される。原稿の入力が完了したら、「録音を開始する」ボタンを押すことで録音画面に遷移する。

録音画面

原稿入力画面で「録音を開始する」ボタンを押すと遷移する、メインの録音作業画面である。画面は大きく上下2つのエリアで構成される。

上部：原稿一覧エリア

全文が一覧表示されるエリアである。各文には現在の状態（未録音・現在の文・録音済み）が視覚的に表示される。録音済の文をクリックすると、その文に戻って録り直しができる（後述「戻り操作」）。未録音の文をクリックすると、その文のテキストをインライン編集できる。

下部：録音操作エリア

現在の文のテキストが大きなフォントで表示され、読みやすい形で提示される。その下に操作ボタン群と進捗カウンター（例：「3 / 15 文目」）が表示される。操作ボタンは録音の状態に応じて切り替わる。

文の状態表示

操作フロー

基本フロー

1文ごとの録音は、以下のフローで進行する。

各状態におけるボタン表示

録音操作エリアに表示されるボタンは、現在の録音状態に応じて切り替わる。

戻り操作と原稿編集

録音済みの文への戻り

上部の原稿一覧エリアで、録音済（OK済み）の文をクリックすると、その文に戻って再度録音を行うことができる。戻った文は「録音待機」状態にリセットされ、通常の録音フローで再度録音を行う。再度OKすると、新しい録音データが同じ連番のファイル名でダウンロードされる（上書き）。

未録音の文の編集

上部の原稿一覧エリアで、未録音の文をクリックすると、テキストをインライン編集できる。これにより、録音前に原稿の誤字を修正したり、読みやすいように文を調整したりすることが可能である。

ファイル出力

出力仕様

ファイル名の命名規則

出力されるWAVファイルの名前は、連番3桁と原稿テキストの冒頭20文字を組み合わせて自動生成される。

ファイル名の例：

全文録音完了

すべての文がOK済みになった時点で、画面に完了メッセージが表示される（例：「全ての録音が完了しました！」）。個別のWAVファイルは「OK（次へ）」ボタンを押した時点で都度ダウンロード済みであるため、一括ダウンロード機能は設けられていない。

デザイン

BOOTHのUIは、録音作業に集中できるよう、シンプル・ミニマルなデザインを採用している。

トラブルシューティング

マイクの使用許可が求められない・録音できない

• ブラウザのアドレスバー横にあるマイクアイコンをクリックし、マイクの使用が許可されているか確認する
• ブラウザの設定からサイトごとのマイク許可を確認する
• OS（Windows / macOS）側のマイク許可設定を確認する
• マイクが正しく接続されているか確認する
• 他のアプリケーションがマイクを占有していないか確認する

「録音開始」を押しても反応がない

• ブラウザがChromeであることを確認する（推奨ブラウザ）
• ブラウザを最新版に更新する
• HTTPSまたはlocalhostでアクセスしているか確認する（マイクAPIはセキュアコンテキストが必要）
• ページをリロードして再試行する

録音した音声が無音になる

• 正しいマイクデバイスが選択されているか確認する
• マイクの音量がミュートになっていないか確認する
• OS側の入力デバイス設定で正しいマイクが選択されているか確認する

ダウンロードされたファイルが再生できない

• WAV対応の音声プレーヤーで再生を試みる
• ファイルサイズが極端に小さい（0KB等）場合は、録音が正常に行われていない可能性がある。再度録音を試みる

自動ダウンロードが動作しない

• ブラウザのポップアップブロックが有効になっていないか確認する
• ブラウザの設定で自動ダウンロードが許可されているか確認する
• Chromeの場合：設定 → プライバシーとセキュリティ → サイトの設定 → 自動ダウンロード を確認する

ページをリロードしたら進捗が消えた

• BOOTHは進捗データをブラウザのメモリ上にのみ保持するため、ページのリロードや閉じた場合はすべてのデータが失われる。これは仕様である
• 既にダウンロード済みのWAVファイルはダウンロードフォルダに残っている

注意事項