Skip to content
cccskills
FreePublished on GitHub

realtime-speech

Code Apps などのブラウザ アプリで、Azure AI Speech のストリーミング文字起こしと録音を実装する。ブラウザから Speech へ WebSocket で直結し、短期トークンは Managed Identity の Function からカスタム コネクタ経由で受け取る。

Code Apps の CSP・iframe・メインスレッドの制約に合わせた音声経路(同一オリジン AudioWorklet、Push ストリーム、Worker タイマー無効)と、端末・ホスト再現・実機の 3 段階の検証を提供する。

The English summary is being prepared. Showing the original description.

Works withAzure
See how to install

Files included (36)

  • SKILL.md10.6 KB
  • references/.env.example1.0 KB
  • references/auth.md4.6 KB
  • references/continuous-segmentation.md5.9 KB
  • references/latency-accuracy.md2.5 KB
  • references/mai-transcribe.md4.8 KB
  • references/speaker-identification.md5.1 KB
  • references/troubleshooting.md7.0 KB
  • scripts/get_speech_token.ps11.9 KB
  • scripts/synthesize_script_wav.ps12.4 KB
  • scripts/verify_push_stream.mjs3.2 KB
  • scripts/verify_speech_roundtrip.mjs4.0 KB
  • templates/code-apps-addon/public/pcm-capture-worklet.js1.2 KB
  • templates/code-apps-addon/README.md3.4 KB
  • templates/code-apps-addon/scaffold.json900 B
  • templates/code-apps-addon/src/hooks/use-transcription-session.ts12.0 KB
  • templates/code-apps-addon/src/lib/debug-log.ts3.4 KB
  • templates/code-apps-addon/src/lib/speech/audio-pipeline.ts4.3 KB
  • templates/code-apps-addon/src/lib/speech/pcm-segmenter.ts2.3 KB
  • templates/code-apps-addon/src/lib/speech/recognizer.ts2.8 KB
  • templates/code-apps-addon/src/lib/speech/token.ts4.1 KB
  • templates/speech-token-broker/.funcignore63 B
  • templates/speech-token-broker/.gitignore46 B
  • templates/speech-token-broker/connector/apiDefinition.swagger.json2.0 KB
  • templates/speech-token-broker/connector/apiProperties.json1.0 KB
  • templates/speech-token-broker/host.json267 B
  • templates/speech-token-broker/local.settings.sample.json142 B
  • templates/speech-token-broker/package.json573 B
  • templates/speech-token-broker/README.md2.7 KB
  • templates/speech-token-broker/scaffold.json1.4 KB
  • templates/speech-token-broker/src/functions/speechToken.ts1.4 KB
  • templates/speech-token-broker/src/index.ts33 B
  • templates/speech-token-broker/src/lib/auth.ts4.4 KB
  • templates/speech-token-broker/src/lib/speech.ts1.7 KB
  • templates/speech-token-broker/test/auth.test.cjs2.3 KB
  • templates/speech-token-broker/tsconfig.json250 B

SKILL.md (original)

Review the instructions the agent will receive before you install.

リアルタイム音声文字起こしスキル

ブラウザ アプリ(主に Code Apps)で、話している内容をその場で文字にしながら録音する機能を作る。

マイク ─▶ AudioContext ─▶ AudioWorklet(同一オリジン)─▶ 16 kHz PCM ─▶ Push ストリーム ─▶ Speech SDK ─(WebSocket)─▶ Azure AI Speech
   └────▶ MediaRecorder(録音・opus)                                                              ▲ 短期トークン
Code Apps ─(カスタム コネクタ)─▶ トークン発行 Function(Managed Identity)────────────────────────────┘
判断理由
ブラウザから Speech へ直結する途中結果を 0.2〜0.4 秒間隔で受け取れる。サーバー中継は遅延と運用が増える
トークンはコネクタ経由の Function から受け取るキーをブラウザに置かない(キー認証が無効なテナントでも動く)。コネクタ呼び出しは CSP の追加が不要
音声は自前で PCM にして Push ストリームで渡すSDK にマイクを直接渡すと、Code Apps では音声が SDK に届かない

リファレンス: 認証とロール / 遅延と精度 / 連続録音の区切り / 名乗りからの話者の特定 / MAI-Transcribe との組み合わせ / 異常系 / パラメータ

Step 0: 事前確認(会話の最初に 1 回だけ)

standard の共通契約に加え、1 回の AskUserQuestion で確認する。

#質問合格条件
1Speech リソースのサブスクリプション・リージョン・既存リソースの有無リージョンが決まり、カスタム サブドメインを付けられる
2環境の CSP に connect-src wss://<region>.stt.speech.microsoft.com を追加してよいかCSP は環境全体に効く。変更の承認者が決まっている
3ロール付与・コネクタ作成・DLP 分類の担当者Azure RBAC、Power Platform のコネクタ、DLP の担当が分かれて記録されている
4音声と文字起こしのデータ分類・保存期間・保存先録音を扱ってよい根拠と保存先が決まっている
5利用端末と会場(マイク、ブラウザ、ほかに動かすアプリ)端末の負荷とマイクの経路(ミキサー等)が分かっている

Step 1: Speech リソースと権限を用意する

  1. Speech リソース(kind=SpeechServices)をカスタム サブドメイン付きで作る。キー認証が無効でもよい(Entra ID で認証する)
  2. 開発者とトークン発行 Function の Managed Identity に Foundry User を付ける。Managed Identity はリソース グループの範囲で付ける (実測で数秒〜2 分で反映。リソース範囲は反映に約 12 分かかった。通らなかったロールは 認証とロール)

Step 2: 端末で往復検証する

アプリを作る前に、リソース・権限・リージョンが正しいことを端末だけで確かめる。 Speech SDK を入れたプロジェクトのフォルダーで実行する。

$env:SPEECH_TOKEN = (powershell -File .github/skills/realtime-speech/scripts/get_speech_token.ps1 -Raw)
node .github/skills/realtime-speech/scripts/verify_speech_roundtrip.mjs --out samples/question.wav --phrase <専門用語>
node .github/skills/realtime-speech/scripts/verify_push_stream.mjs --wav samples/question.wav

1 本目は音声合成で質問音声を作って認識する(作った WAV は後の疑似マイクに使う)。 2 本目はブラウザと同じ変換経路(48 kHz → 16 kHz → Push ストリーム)で認識する。両方で確定文が出れば次へ進む。

Step 3: トークン発行 Function とコネクタを用意する

構成は azure-infra のトークン ブローカー パターン に従い、実装はテンプレートから生成する。

python .github/skills/update-skills/scripts/scaffold_from_template.py `
  --template .github/skills/realtime-speech/templates/speech-token-broker --target <出力先> --dry-run

生成後は scaffold.json の手順(ビルド → deploy_mcp_function.py)で Function をデプロイし、 コネクタと接続は custom-connector スキル の Step 1〜7 で作る (deploy_connector.py --connector-dir <出力先>/connector → create_connection.py plan / apply / invoke --path /speech/token)。 コネクタのテンプレートは on-behalf-of が有効なので、接続はブラウザ操作なしで、スクリプトを実行したサインイン ユーザーの権限で作られる。 Function はコネクタのトークン(scp=User.Read、appid=API アプリ)を信頼クライアントとして受け付ける(authorizeClaims())。

Step 4: Code Apps の CSP を設定する

python .github/skills/code-apps/scripts/configure_code_app_csp.py --directive Connect-Src --source wss://<region>.stt.speech.microsoft.com --apply
python .github/skills/code-apps/scripts/configure_code_app_csp.py --directive Connect-Src --source wss://<region>.stt.speech.microsoft.com --assert

worker-src や script-src に data: / blob: は追加しない(Step 5 の部品はどちらも使わない)。

Step 5: アドオンを生成してホストへ統合する

python .github/skills/update-skills/scripts/scaffold_from_template.py `
  --template .github/skills/realtime-speech/templates/code-apps-addon --target <作業フォルダー> --dry-run

public/ と src/ をホストへ統合し、ホストで npm install microsoft-cognitiveservices-speech-sdk を実行する。 使い方は アドオンの README。守ること:

  • 開始はボタンのクリックから呼ぶ(AudioContext の開始にユーザー操作が要る)
  • 前提(トークン発行コネクタ)が欠けているときは開始ボタンを無効にし、理由を表示する
  • 認識器は必ず createRecognizer() で作る(WebWorkerLoadType=off を設定する。外すと文字起こしが無言で止まる)
  • 録音を止めずに続け、発言者ごとに区切って保存する場合は、認識器に送る PCM を pcm-segmenter.ts に溜め、 区切りのフレーズの offset で切り出す(連続録音の区切り)
  • 話者が番号と名前を名乗る場合(株主番号・会員番号など)は、番号を固定の変換だけで決めない。名簿の候補をブラウザで絞り、 生成 AI(構造化出力)に候補から選ばせ、確からしさ 0.8 以上だけ自動適用する(話者の特定)
  • 精度を上げたい場合は、確定文ごとにその区間の録音を MAI-Transcribe で認識し直す(日本のリージョンは未提供のため東南アジア等。 置き換え/比較を選べるようにする。MAI-Transcribe)

Step 6: ホスト再現テストで確認する

code-apps のホスト再現テスト で、Step 2 の WAV を疑似マイクにして動かす。 複数の話者・長い台本で試すときは、台本を Windows の読み上げで WAV にする(クラウド不要)。

powershell -ExecutionPolicy Bypass -File .github/skills/realtime-speech/scripts/synthesize_script_wav.ps1 -Script <台本.json> -Out .mcp/tts/script.wav
  1. 正常系: 確定文と記録の保存まで進み、CSP 違反が 0 件
  2. 停止耐性: 送信開始 5 秒以降にメインスレッドを 0.8 秒止めても、停止中・停止後の文が正しく確定する
  3. 連続録音の場合: 区切りの順番と、切り出した録音の長さが区切りの offset の差と一致する

Step 7: 実機で確認する

Power Apps で開き、DevTools の Console をログの接頭辞(例: [APP)で絞り込んで、次の順に出ることを確認する。

マイク取得 → AudioContext {"state":"running"} → 音声の取り込み方式 {"mode":"worklet"} → Speech トークンを取得 → WebSocket 接続確立 → 発話開始を検知 → 最初の途中結果 → 確定 → 記録を保存しました

CSP 違反 が 1 件でも出たら 異常系 を見る。

検証チェックリスト

  • Step 0 を 1 回の質問で確認し、CSP 変更と録音の扱いの承認を得た
  • Speech リソースにカスタム サブドメインがあり、Function の Managed Identity に Foundry User を付けた
  • Step 2 の 2 本のスクリプトで確定文が出た
  • Function が認証なしで 401、委任トークンで 200 を返す
  • CSP の --assert が通り、data: / blob: を追加していない
  • 認識器は createRecognizer() で作り、取り込み方式は worklet になっている
  • ホスト再現テストで CSP 違反 0 件、メインスレッド停止後も文が欠けない
  • 実機の Console で Step 7 の順にログが出た

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

admin

Free

Power Platform のテナント / 環境ガバナンスを確認・設定する管理スキル。開発着手前の環境チェック(既定環境ではないか・マネージド環境・Dataverse / Code Apps / MCP の有効化・セキュリティ ロール・管理 API アクセス)と DLP 事前チェックを非対話スクリプトで実行し、必要ならマネージド環境設定・カスタムコネクタの DLP 分類・ACP(Advanced connector policies)の許可コネクタを dry-run 付きで変更する。Microsoft 第一者サービスだけを許可する ACP 推奨プロファイルの適用と、クラシック DLP から ACP への移行も支援する。クラシック DLP と ACP は既定の混成モードで併用され、より制限の厳しい方が適用されるため両方を確認する。オプションとして、既定環境 / 個人開発者環境 / 市民開発者環境 / AI CoE セントラル / AI CoE 内製開発の 5 グループからなるテナント全体の環境戦略を、読み取り専用スキャン → 移行プラン(admin-migration-plan.md)→ レビュー → 適用の順で策定・実行する。設定は環境グループのルールで行うのを原則とし、グループ ルールに無い項目(既定環境ルーティング・Dataverse for Teams 禁止・Dataverse 検索・グループへの割り当て・Copilot クレジット配分)だけをテナント設定・環境個別設定・Dataverse の組織設定で補う。IP 制限・テナント分離・監査ログ・ライセンス配分などの管理設定は references にまとめる。

The English summary is being prepared. Showing the original description.

geekfujiwara/CodeAppsDevelopmentStandard74Updated Oct 16, 2026

Copilot Studio 新 UI の Agent flows / Workflows を構築・公開・検証する。Dataverse レコード作成/更新トリガーから既存の発行済み Copilot Studio v2 を Agent ノードで呼ぶ標準経路、Code Apps との非同期要求/結果連携、および手動 Start + inline Agent の API ライフサイクル検証を扱う。

The English summary is being prepared. Showing the original description.

geekfujiwara/CodeAppsDevelopmentStandard74Updated Oct 16, 2026

株主総会の想定問答を、IR 抜粋(決算短信・説明資料・招集通知など)を根拠に下書きし、利用者の確認後に Dataverse の想定問答テーブルへ「下書き」として登録するスキル。 Use when ユーザーが「配当について想定問答を作って」「この論点の想定問答を 3 件追加して」「招集通知から想定問答を作って」「想定問答を登録して」と依頼したとき。 Dataverse MCP コネクタ(describe / read_query / search_data / create_record / update_record)を使用する。削除・テーブル変更のツールは使わない。

The English summary is being prepared. Showing the original description.

geekfujiwara/CodeAppsDevelopmentStandard74Updated Oct 16, 2026

株主総会の想定問答を点検し、根拠の IR 抜粋に無い数値・存在しない根拠 ID・回答者や注意事項の抜け・趣旨の重複・下書きのまま残っているものを一覧にするスキル(書き込みはしない)。 Use when ユーザーが「想定問答を点検して」「根拠の無い数値が無いか確認して」「下書きの想定問答を一覧にして」と依頼したとき。 Dataverse MCP コネクタ(describe / read_query / search_data)を使用する。書き込み・削除のツールは使わない。

The English summary is being prepared. Showing the original description.

geekfujiwara/CodeAppsDevelopmentStandard74Updated Oct 16, 2026

株主総会の質疑応答のリハーサル台本(議長・株主・回答役員の読み上げ原稿)を、承認済みの想定問答から作り、Dataverse のリハーサル台本テーブルへ登録するスキル。 Use when ユーザーが「リハーサルの台本を作って」「QA-001〜QA-010 で読み上げ原稿を作って」「番号を言わない株主も入れた台本を作って」と依頼したとき。 Dataverse MCP コネクタ(describe / read_query / search_data / create_record / update_record)を使用する。削除・テーブル変更のツールは使わない。

The English summary is being prepared. Showing the original description.

geekfujiwara/CodeAppsDevelopmentStandard74Updated Oct 16, 2026

AI Builder の AI プロンプト(GPT Dynamic Prompt)を Dataverse API で作成し、Copilot Studio エージェントにツール(アクション)として追加する。Power Automate フローとの統合パターンも含む。

The English summary is being prepared. Showing the original description.

geekfujiwara/CodeAppsDevelopmentStandard74Updated Oct 16, 2026

See all skills by geekfujiwara

Report a problem with this skill