2026/08/23 ブラウザで動かす版を作ってたっぱ

08:03

著者: かっぱ

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

タグ:OBS, リアルタイム字幕, 翻訳ツール, Cloudflare Workers, Cloudflare Workers AI, Whisper, Silero VAD, Python, 配信ツール, 文字起こし

(o’Θ’o)ﾉ))　おぱよう　かっぱだっぱ♪

最近は各地のゲームが壊れたという民の相談を対応しつつ

片手間にPython版とブラウザ版の修正をしていたっぱ
え？自分のゲーム配信はって？

(´>Θ<)ゝ))　もうちょいこれを改修工事してから再開したいなって思っての

あと、最近古いゲームのゲーム配信に対して無関係な第三者が版権を主張して お金をせびり取る問題ってのが世の中にはあっての・・

その事をとばっちりを受けたゲーム会社さんに情報を提供していろいろしていたっぱ（謎
別に過半数の良い子には何の害もない話なのでスルーしていいっぱよo(･Θ･)oｳﾝ!!


私的にゃYoutubeにしろTwitchにしろKickにしろ

配信関係と著作権の関係はコンテンツ管理の問題をどこもAIが悪用される所為で少なからずあるので

適切な対応改善が進んでいくことを祈るばかりではあるっぱが（ボソ

祈る・・？へし折る？どちらも似た文字っぱがおいらは多分関係ないっぱよ(。Θ゜)ｳﾌﾌｯ
さていつも通りどうでもいい話が過ぎたっぱね∑(ノΘ)ｱﾁｬｰ
おいらと付き合いが長い方は

「あっ！またかっぱが長話はじめた！最初と最後だけ読んで結論だけ読んだほうが早いやつだ！」

とか言い出してる頃っぱね┐(・Θ・)┌ﾔﾚﾔﾚｶﾊﾟｶﾊﾟ　察してるっぱよ（笑


雑にいうとPython版よりトークン消費量が少ないブラウザ版を作った ただ、配信者の声を字幕や翻訳にするならブラウザ版でいいけど⋯ 配信内から聞こえてくる声を翻訳や字幕にするならPython版使ったほうが現時点いい感じっぱ⋯

この３行でいいと思うっぱ((。Θ゜))ｹﾗｹﾗ

まあ、下はAIが作ってくれた説明だけど・・

一度設定済みにしておけば

URL読ませりゃ使えるやつだの

赤の他人に翻訳字幕を使われる可能性はURLが漏洩してなければ無いけど

どうせ無料枠限度一杯使われるだけなので’,､ ’,､ (、Θ、) ’,､,､

（各人でID/PASS制限つける位はどうにでもなるしの・・それ込みで梱包しろって言われたらそうするけどこれ以上だと初心者が試せないって凹られるので⋯AskAIに相談しなさいと⋯）

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

はじめに

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ページがWebSocketでリアルタイム受信
  • 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消費ゼロ）
更新タイミング ファイルポーリング リアルタイム（WebSocket）
デバイス選択 コード内で固定 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消費ゼロ）なことが大きいです。

ブラウザ版のメリット

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に保存された字幕をWebSocketでリアルタイム受信するだけです。OBS用にページを開いてもNeuron消費は増えません。

ブラウザ版のデメリット

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

ブラウザの getUserMedia は入力デバイスしか拾えないため、PCの再生音を拾うには従来VoiceMeeterやVB-Cable等の仮想オーディオケーブルが必要でした。v9.5では入力ソース切替で「PC音声のみ」「ミックス」モードを追加し、getDisplayMediaでタブ/画面共有時に音声をキャプチャできるようになりました（追加ソフト不要・Chrome/Edgeのみ）。また、ブラウザのエコーキャンセル・ノイズ抑制がPC音声をカットしてしまう問題があり、コード側で無効化（echoCancellation: false, noiseSuppression: false, autoGainControl: false）しています。mixモードではエコーキャンセル有効で二重認識・ハウリングを防止しています。

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等の仮想デバイスを選んでも動画音声が拾えない、またはmixモードでPC音声が拾えない
  • 原因: ブラウザのエコーキャンセル/ノイズ抑制がPC音声をカット、またはAudioContextのクロスコンテキスト問題
  • 対策: v9.5でエコーキャンセル等を無効化済み。mixモードではVADとミックスストリームで同じAudioContext（16kHz）を共有するよう修正済み
  • 回避策: それでもダメな場合はWindowsのサウンド設定でサンプリングレートを一致させる

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

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

4. numThreads 警告

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

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で字幕を永続保存（最大500件、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

OBSのブラウザソースに設定。設定ページでマイク開始後、WebSocketでリアルタイム受信して字幕を表示（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文字上限撤廃）
  • ✅ mixモードAudioContext統一（クロスコンテキスト問題解消）

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

  • ⚠️ 動画音声の拾い方が環境依存（v9.5でgetDisplayMedia対応・mixモードAudioContext統一で改善）
  • ⚠️ 高精度モデルのハルシネーション（v9.5で抑制パラメータ追加で改善）
  • ⚠️ DAWとの排他制御問題

全体として、日常的な雑談配信なら無料枠で十分使えるレベルになりました。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 developers.cloudflare.com/workers-ai/models/whisper
@cf/meta/llama-3.1-8b-instruct-fast Llama Community License developers.cloudflare.com/workers-ai/models/llama-3.1-8b-instruct-fast

ブログ: 干し物かっぱの霈霈瑞兆のブログ

肝心の物はこちらっぱ! Enjoy Use It :D　Browser-ver9.1-3

あ、そういえぱ(´･Θ･) 日本語→英語を優先してこれは作ってあるけど⋯ 日本語→多言語選ばせろ！という需要がわずかにあったので 自己責任で選べるようにリストに入れておいたっぱからの((´Θ)) ちゃんと動くかは全部の言語は試してないっぱからの😂

え？それのPython版よこせって？ ⋯ ブラウザ版とPython版共通のプチバグがあっての Fixした後でアップロードする予定っぱ ブラウザ版はfix済みっぱが リアル用事があるときは一気にできないっぱ┌┛┌┛ｽﾞｺ！

コメント