2026/08/29ブラウザ版更新日本語版と英語版を⋯

00:55

著者: かっぱ

カテゴリー: パソコン・インターネット, 雑記, IT技術ネタ？

タグ:OBS, リアルタイム字幕, 自動翻訳, Cloudflare Workers AI, Silero VAD, Whisper, Llama 3.1, 配信ツール, 音声認識, ブラウザ完結, AI翻訳, 省負荷, ローカル負荷ゼロ, WebSocket, Durable Objects, リアルタイム文字起こし, 配信画面カスタマイズ, オープンソース

###2026/08/29　9:26追記　(´･Θ･)ゞｺﾞﾒﾝﾈ うっかり構成ファイルが３つ不足してたので補充して更新したっぱ┌┛┌┛ｽﾞｺ！ 幸いDownloadした人0人っぱ🤗ｾｰﾌ

📝:Just to be on the safe side, this version does include an English manual in the package.

タイトルの物は

自宅のパソコンのCPU/GPUにほぼ負荷をかけずに マイクから字幕を起こしたり翻訳したりするアレっぱね 巷じゃ数十%負荷をかけて字幕を出す方法が多いっぱが
これはそういうのじゃないっぱヾﾉ’Θ’o)

これは意図してやったやつじゃないけど・・ 数日前の動画があるっぱね ブラウザ版テストしつつ配信してた時のやつだの OBSの配信設定で音量設定が-30dbになってたっぱ( ･Θ･).*;’.､ﾌﾞｯ たまぁにおいらやらかすっぱ（不定期過去２度目） 2026/08/23　謎のせいでまた一ヶ月間が空いたっぱ⋯（Chef Life: A Restaurant Simulator）

出だしでブラウザ版の設定ページ開いていて使ってるっぱよ これもなぁ・・

”滑舌悪くて恐ろしく早口”で”だっぱだっぱ！”いう妖怪の類の声だと

日本語精度８割位になっちまうけど∑(ノΘ。)ｱﾁｬｰ

一般ユーザーだと９割以上だから安心っぱ(´-Θ-)ﾎｯ-３

英語の字幕化の方が曲者でおいらの滑舌の悪さだと６割位になるので

一般ユーザーだと８割９割なのにつくづくAIは人間向けだと思う今日このごろっぱ

┐(゜Θ。)┌ﾔﾚﾔﾚｶﾊﾟｶﾊﾟ⋯
まあそれを踏まえても即反映されるからのd(-Θ-｡)ﾈｯ

この速度感大事にしたいっぱ

ただ上の動画だと１０秒遅延の時があったよね？

(o’Θ’))ｩﾝｩﾝ　なのでそれ

今回から修正して６秒位になるようにしておいたっぱ⋯

あとはまあ例によっておいらは雑説明なのでAIに任せるっぱo(`･Θ･´)oｳﾝ!!（ぉぃ （Python版のほうが私的にゃ好きだけどの⋯）

あ、あんまいないはずだけど・・ OBS側にはるURLの仕様が微かに変わっているのでReadMeで確認おすすめだの⋯

ブラウザだけで動くリアルタイム字幕翻訳ツールを作った話 — Python版からCloudflare Workers版への移行記

更新履歴: v9.11fix4b (2026-08-26) — バッチ待機時間0ms・計測コード削除・mixモード記述削除。v9.11fix4b (2026-08-25) — OBS側インジケーター消灯・OBS固有設定保持。v9.11fix4 (2026-08-25) — ASR正規化+fuzzy match+助詞剥離+Dictionary RAG。v9.11fix3 (2026-08-24) — AIインジケーター停止時残灯修正、停止後遅延レスポンスガード、用語辞書の説明文・バリデーション強化。v9.11fix2 (2026-08-24) — 文字色変更修正、AIインジケーター修正。v9.11 (2026-08-23) — 二段階トリアージ・バッチ翻訳キュー・VAD詳細パラメータUI・セッション統計。

はじめに

OBS配信でリアルタイム字幕翻訳を行うツールを、Pythonデスクトップアプリからブラウザだけで動くバージョンに移行しました。Cloudflare Workers AI + Silero VADの組み合わせで、インストール不要・URLを開くだけで使えるツールが完成しました。

この記事では、Python版（v6.5）とブラウザ版（v9.5）の違い、メリット・デメリット、既知の不具合、そしてCloudflareのサービスをどう使っているかをまとめます。

アーキテクチャ概要

Python版 v6.5

マイク → Python (FFT VAD) → Cloudflare Workers AI REST API (Whisper + LLM) → テキストファイル → OBS テキストソース
  • Pythonプロセスが常駐
  • FFTベースの自作VADで音声区間検出
  • REST API + Bearer tokenでWorkers AIを呼び出し
  • 結果をテキストファイルに書き出し、OBSがポーリングで読み取り

ブラウザ版 v9.5

設定ページ: マイク → ブラウザ (Silero VAD) → Worker (Whisper + LLM via AI binding) → 字幕表示 + Durable Objectに保存
OBSページ:  WebSocketでリアルタイム受信（フォールバック: 1.5秒ポーリング） → 字幕表示（VADなし・Neuron消費ゼロ）
  • ブラウザだけで完結（Python不要）
  • Silero VAD（DNNベース）がブラウザ内で実行（Neuron消費ゼロ）
  • Workers AI bindingを直接使用（APIトークン不要・REST API不要）
  • Durable Objectに字幕を保存し、OBSページがポーリング取得
  • OBSはブラウザソースで直接表示

Python版 vs ブラウザ版：比較表

項目 Python版 v6.5 ブラウザ版 v9.5
インストール Python 3.10+ + pip 不要（ブラウザだけ）
VAD方式 自作FFT（200-3400Hz帯域パワー） Silero VAD（DNN、ONNX Runtime Web）
VAD実行場所 Pythonプロセス内 ブラウザ内（Neuron消費ゼロ）
VAD精度 BGM/SFXを誤判定しやすい MLベースでBGM/SFXを高精度に除外
送信単位 固定5-8秒チャンク（無音含む） 発話区間のみ（無音カット済み）
文の分断 チャンク境界で分断される 発話終了まで待つので分断なし
API認証 REST API + Bearer token Workers AI binding（トークン不要）
APIトークン ローカル環境変数 不要（AI binding使用）
OBS連携 テキストソース（GDI+）+ ファイルポーリング ブラウザソース（URLを貼るだけ）
字幕スタイル GDI+フォント制限 HTML/CSS自由・カスタムCSSでOBS上で調整可
字幕表示 上書き（2行） チャット風累積（最大20行、フェードイン）
タブ間同期 なし Durable Object + WebSocket（Neuron消費ゼロ）
更新タイミング ファイルポーリング リアルタイム（JS DOM更新）
デバイス選択 コード内で固定 UIドロップダウンで選択

Neuron消費・利用時間の比較

マイクモード（雑談配信）

項目 Python版 v6.5 ブラウザ版 v9.5
VAD棄却率 50-70% 70-85%
Whisper Neurons/分 ~12.3 ~10.3
翻訳 Neurons/分 ~2.6 ~2.0
合計 Neurons/分 ~15 ~12.3
推定利用時間 ~11時間 ~13.5時間

配信モード（ゲーム配信・常時会話）

項目 Python版 v6.5 ブラウザ版 v9.5
VAD棄却率 13% 30-40%
合計 Neurons/分 ~32 ~23
推定利用時間 ~5.2時間 ~7.2時間

実測値（ブラウザ版 v9.5）

実際のテストでは ~10.2 Neurons/分 で、~16.4時間 の利用が可能でした。想定より少なめだったのは、OBSページがVADを動かさずポーリングのみ（Neuron消費ゼロ）なことが大きいです。

⚠️ 早口配信者向け: モデル選択でNeuron効率が逆転する可能性

上記の比較表は「送信音声時間がモデル選択で変わらない」という仮定で計算しています。しかし、早口で長文が多い配信者の場合、標準モデル（41.14 Neurons/min）より高精度モデル（46.63 Neurons/min）の方が結果的にNeuron効率が良くなる可能性があります。

標準モデルでは長文の誤認識・ハルシネーションで棄却されるセグメントのNeuronが無駄になりますが、高精度モデルでは棄却率が下がるため、13%高い単価を吸収できる場合があります。

実測例（ゲーム配信・約57分・約500エントリ）では、配信者自身が「早口になるから長文がたまに出る」と発言し、50文字以上の長文が15件以上で翻訳精度の顕著な低下が確認されました。標準モデルの長文誤認識率が15-20%と推定されれば、高精度モデルの13%高い単価を吸収できる可能性があります。

⚠️ これは推定です。標準モデルと高精度モデルで同一音声を比較する検証は今後の課題です。

ブラウザ版のメリット

1. インストール不要

Python環境の構築が不要。ブラウザでURLを開くだけで使えます。配信者以外にもURLを共有するだけで使えるのが大きいです。

2. VAD精度が高い

Silero VADはMLベースなので、BGMや効果音を「人の声」と誤判定しません。Python版のFFT VADは配信モードで棄却率13%しかありませんでしたが、Silero VADは30-40%まで跳ね上がります。これがWhisper呼び出しの大幅削減に直結します。

3. OBS連携が簡単

ブラウザソースにURLを貼るだけ。テキストソース（GDI+）のフォント制限やファイルポーリングの遅延がなくなります。カスタムCSSでOBS上で字幕サイズ・色・位置を自由に調整できます。

4. APIトークンが不要

Python版ではREST APIのBearer token認証が必要でしたが、ブラウザ版ではWorkers AI bindingを直接使用するためAPIトークン不要です。トークン管理の手間がゼロになります。

5. チャット風字幕

最大20行まで累積表示され、フェードインアニメーション付きで新しい発話が下に追加されます。長い会話でも読み返せます。

6. OBSページのNeuron消費ゼロ

OBSページはVADを動かさず、Durable Objectに保存された字幕を /api/latest で1.5秒間隔でポーリング取得するだけです。OBS用にページを開いてもNeuron消費は増えません。

ブラウザ版のデメリット

1. 動画音声（PC再生音）の拾い方が難しい

ブラウザの getUserMedia は入力デバイスしか拾えないため、PCの再生音を拾うにはVoiceMeeterやVB-Cable等の仮想オーディオケーブルが必要です。また、ブラウザのエコーキャンセル・ノイズ抑制がPC音声をカットしてしまう問題があり、コード側で無効化（echoCancellation: false, noiseSuppression: false, autoGainControl: false）しています。

2. 高精度モデル（whisper-large-v3-turbo）のハルシネーション

高精度モデルは temperature パラメータに非対応のため、temperature=0（決定的出力）が使えません。無音やノイズに対してもっともらしい日本語を生成してしまうことがあります。v9.5ではハルシネーション抑制パラメータ（condition_on_previous_text: false, compression_ratio_threshold: 2.0, hallucination_silence_threshold: 1.0, vad_filter: true, no_speech_threshold: 0.6）を追加してモデル側でも抑制しています。標準モデルなら temperature=0 が効くのでハルシネーションはさらに減ります。

3. DAWとの排他制御問題

Cakewalk等のDAWがWASAPI排他モードでオーディオデバイスを占有していると、ブラウザが同じデバイスにアクセスできません。DAW側をWASAPI Sharedに変更するか、仮想オーディオケーブルでデバイスを分離する必要があります。

4. バックグラウンドタブの省電力

別のタブに切り替えるとブラウザが音声処理を停止することがあります。Subtitle Browserを独立ウィンドウで開くか、ブラウザの省電力設定から除外する必要があります。

5. ブラウザのマイク許可がややこしい

ブラウザは「過去に許可したマイク」を優先して使うため、デバイス選択で別のデバイス（VoiceMeeter B2等）を選んでも、許可済みの別マイクが使われてしまうことがあります。ブラウザのマイク許可をリセットする必要があります。

既知の不具合

1. 高精度モデルのハルシネーション

  • 症状: 高精度モデル（whisper-large-v3-turbo）使用時、無音やノイズに対してもっともらしい日本語・ポルトガル語・ヘブライ語等のテキストが生成される
  • 原因: temperature パラメータ非対応のため、決定的出力ができない
  • 対策: v9.5でturboモデルにハルシネーション抑制パラメータ（condition_on_previous_text: false, compression_ratio_threshold: 2.0, hallucination_silence_threshold: 1.0, vad_filter: true, no_speech_threshold: 0.6）を追加済み
  • 回避策: 標準モデルを使用する。またはWhisper言語を「日本語」に固定してハルシネーションフィルターを全力で動かす

2. 動画音声が拾えない（環境依存）

  • 症状: VoiceMeeter B2等の仮想デバイスを選んでも動画音声が拾えない
  • 原因: ブラウザのエコーキャンセル/ノイズ抑制がPC音声をカット
  • 対策: エコーキャンセル等を無効化済み（echoCancellation: false, noiseSuppression: false, autoGainControl: false）
  • 回避策: それでもダメな場合はWindowsのサウンド設定でサンプリングレートを一致させる

3. デバイス変更時の「Device in use」エラー

  • 症状: デバイスを変更すると「Device in use」エラーが出る
  • 原因: 前のマイクストリームが解放されていない
  • 回避策: 必ず「停止」ボタンを押してからデバイスを変更し、再度「マイク開始」を押す

4. numThreads 警告

  • 症状: env.wasm.numThreads is set to 4 という警告が出る
  • 原因: ONNX Runtime Webが内部でマルチスレッドを設定しようとする（crossOriginIsolated未対応のため機能しない）
  • 影響: なし（シングルスレッドで動作）
  • 回避策: なし（無視してOK）

5. AIインジケーターが停止後も点灯したまま (v9.11fix3で修正)

  • 症状: 停止ボタンを押してもオレンジのAIインジケーターが消えない
  • 原因: stop() 関数に hideAIIndicator() の呼び出しが漏れていた。また、停止後に送信済みリクエストの遅延レスポンスが届くとインジケーターが再点灯していた
  • 対策: stop() に hideAIIndicator() を追加。sendToWorker のレスポンス処理に isRunning チェックを追加して停止後の遅延レスポンスを無視

6. 用語辞書が効いていない (v9.11fix3で修正)

  • 症状: 辞書にJSONを入れているのに triage=needs-llama ばかりで辞書マッチしない
  • 原因: カテゴリ分けされたネスト構造JSONを入力すると、parseGameDictionary() が配列/オブジェクト値に対して toLowerCase() を呼んでTypeError → 辞書全体が無効化
  • 対策: parseGameDictionary() に型検証を追加。非文字列値をスキップ＋警告ログ。UI説明文をフラット翻訳ペア形式に明確化
  • 回避策: {"牛肉":"beef","切る":"cut"} のフラット翻訳ペア形式を使用

Cloudflareのサービス構成

このツールは以下のCloudflareサービスを使っています：

Cloudflare Workers

  • 用途: Workerコード（TypeScript）のホスティング + 静的アセット配信
  • 料金: Free プランで月10万リクエストまで無料。本番運用にはWorkers Paid（$5/月）が推奨（Workers AI bindingの本番利用に必要な場合がある）
  • 設定: wrangler.toml でAI binding + 静的アセット（public/）+ Durable Objectを設定

Cloudflare Workers AI

  • 用途: Whisper（音声認識）+ LLM（翻訳）の推論
  • 料金: 無料枠 10,000 Neurons/日。超過しても自動課金されず、エラーで停止するだけ
  • 課金: Workers Paid（$5/月）にアップグレードすると、より多くのNeuronsが使える
  • 使用モデル:
    • @cf/openai/whisper（標準、41.14 Neurons/min）
    • @cf/openai/whisper-large-v3-turbo（高精度、46.63 Neurons/min）
    • @cf/meta/llama-3.1-8b-instruct-fast（翻訳用LLM）
  • 認証: Workers AI bindingを使用（APIトークン不要）

Cloudflare Durable Objects

  • 用途: 字幕の共有ストレージ（設定ページとOBSページ間）
  • 料金: Free プランで月100万リクエストまで無料
  • 機能: SQLite-backed Durable Objectで字幕を永続保存（最大30件、seq番号付き）

課金について

無料枠でどこまで使える？

プラン Neurons/日 推定利用時間（マイクモード） 推定利用時間（配信モード）
Free 10,000 ~13.5時間 ~7.2時間
Workers Paid ($5/月) より多く さらに延長 さらに延長

重要: 超過しても自動課金されません。Neuron上限に達するとエラーで停止するだけです。課金には意図的にWorkers Paid（$5/月）へのアップグレードが必要です。

実際の消費ペース

テスト実測値では ~10.2 Neurons/分 で、1日あたり ~16.4時間 の利用が可能でした。日常的な雑談配信なら無料枠で十分です。

課金するべきタイミング

  • 10,000 Neurons/日では足りない（長時間配信や複数人で使う場合）
  • Workers AI bindingを本番運用する場合
  • より高いレイテンシ保証が必要な場合

Workers Paid（$5/月）にアップグレードすれば、これらが解決できます。

セットアップ手順（ざっくり）

  1. Cloudflareアカウント作成（無料）
  2. npm install → npm run setup → npx wrangler deploy
  3. アクセストークン設定（npx wrangler secret put ACCESS_TOKEN、必須）
  4. ブラウザで https://your-worker.workers.dev/?token=xxx を開く

詳細は README を参照してください。

使い方

配信者用（設定パネル）

https://your-worker.workers.dev/?token=xxx

設定パネルで入力デバイス・翻訳方向・Whisper言語・モデル・ジャンル等を選択して「マイク開始」。

OBS用（字幕表示のみ）

https://your-worker.workers.dev/?token=xxx&display=subtitle

色・フォント・サイズを起動時から指定する場合:

https://your-worker.workers.dev/?token=xxx&display=subtitle&position=top&layout=dual&indicator=1&color=%2327c47b&trans_color=%23125931&font_size=40&trans_size=32&font=Noto%20Sans%20JP

（# は %23 にエンコード。設定ページで変更すればWebSocketで即時反映されます） OBSのブラウザソースに設定。設定ページでマイク開始後、WebSocketでリアルタイム受信（フォールバック: 1.5秒ポーリング・Neuron消費ゼロ）。

今後の予定

モード2: Hybrid Lite（超節約）

ブラウザ内のWeb Speech APIで文字起こし → Workerは翻訳のみ。Whisper不要でNeuron消費93%削減。推定利用時間~83時間。

モード3: Hybrid+ transformers.js

ブラウザ内でwhisper-tinyモデルを動かす。Neuron消費ゼロで精度★★★★☆。かっぱ語尾の語彙ヒントも使える可能性。

まとめ

Python版からブラウザ版への移行で、以下が改善されました：

  • ✅ インストール不要（ブラウザだけ）
  • ✅ VAD精度向上（MLベース）
  • ✅ Neuron消費削減（~23%改善）
  • ✅ OBS連携が簡単（ブラウザソース）
  • ✅ APIトークン不要（AI binding使用）
  • ✅ チャット風字幕
  • ✅ OBSページNeuron消費ゼロ（WebSocket・フォールバック: ポーリング）
  • ✅ トークン使用量ログ出力（Worker Observabilityで [Token] in=X out=Y 確認可能）
  • ✅ 長文翻訳ループ検出改善（200文字上限撤廃）
  • ✅ AIインジケーター停止時残灯修正（v9.11fix3）
  • ✅ 停止後の遅延レスポンスガード（v9.11fix3）
  • ✅ 用語辞書バリデーション強化・UI説明文改善（v9.11fix3）
  • ✅ 文字色変更のインラインスタイル対応（v9.11fix2）
  • ✅ AIインジケーター動作修正（v9.11fix2）
  • ✅ 二段階トリアージ・バッチ翻訳キュー（v9.11）
  • ✅ VAD詳細パラメータUI・セッション統計（v9.11）
  • ✅ ASR正規化+fuzzy match+助詞剥離+Dictionary RAG（v9.11fix4）
  • ✅ OBS側インジケーター消灯・OBS固有設定保持（v9.11fix4b）
  • ✅ バッチ待機時間0msで表示遅延~0.6秒に削減（v9.11fix4b・実測）

一方で、ブラウザの制限による課題もあります：

  • ⚠️ 動画音声の拾い方が環境依存（仮想オーディオケーブル必要・エコーキャンセル無効化で改善）
  • ⚠️ 高精度モデルのハルシネーション（v9.5で抑制パラメータ追加で改善）
  • ⚠️ DAWとの排他制御問題

バッチ待機時間の実測結果（BATCH_MAX_WAIT_MS）

バッチ翻訳キューの待機時間を3段階で実測比較しました。測定値は「Whisper応答返却 → 字幕表示」の所要時間です。

BATCH_MAX_WAIT_MS 平均遅延 代表値
3000ms（初期値） ~3.5秒 3.530s, 3.394s, 4.750s
1000ms ~1.4秒 1.550s, 1.427s, 1.385s
0ms（確定値） ~0.6秒 0.465s, 0.590s, 0.364s, 0.545s

結論: BATCH_MAX_WAIT_MS = 0 を確定値とする。

  • 0msでも翻訳品質への明確な悪影響は確認されず、通常は1件即時送信でバッチ化はほぼ発生しない
  • 残りの~0.6秒はLlama翻訳処理時間＋ネットワーク往復（バッチ待ちでは削減不可）
  • リアルタイム字幕としては~0.6秒が実用上の下限（Llamaを呼ぶ限りこれ以上は短縮困難）

全体として、日常的な雑談配信なら無料枠で十分使えるレベルになりました。Cloudflare Workers AIのbindingを使えばAPIトークン管理の手間もなく、サーバーレスでリアルタイムAI処理を行うのに非常に使いやすい構成だと思います。

ライセンス

MIT License。使用するライブラリ・モデルは以下の通り：

コンポーネント ライセンス リポジトリ
@ricky0123/vad-web MIT github.com/ricky0123/vad
Silero VAD MIT github.com/snakers4/silero-vad
ONNX Runtime Web MIT github.com/microsoft/onnxruntime
@cf/openai/whisper MIT —
@cf/meta/llama-3.1-8b-instruct-fast Llama Community License —

↓🗃️d(-Θ-｡)いつも言っているっぱが

↓これをつかってなにがおきても利用者の問題なのでおいらは一切責任持てないっぱよ

↓(人Θ’o)ﾈｯ　ﾉｰｻﾎﾟｰﾄ・ﾉｰｸﾚｰﾑ♪ Enjoy Use It :D　Browser-ver9.5

まあそういいつつ日本語のReadMe（免責記載含む）も🗃️に梱包されてるっぱが⋯

コメント