syncfusion-blazor-speech-to-text

Syncfusion Blazor Speech To Text

Syncfusion Blazor SpeechToText コンポーネントを使用して音声入力と音声認識を実装するための包括的なガイドです。このコンポーネントはユーザーのマイクから音声を取り込み、リアルタイムでテキストに変換します。

コンポーネントの概要

SpeechToText コンポーネントは、ブラウザーの Speech Recognition API を活用して音声入力機能を提供します。マイクへのアクセスを自動的に処理し、音声を取り込み、文字起こしを行い、リスニングのライフサイクルを管理します。

主な機能：

• リアルタイムの音声テキスト変換
• 多言語対応（en-US、fr-FR、de-DE、その他 100 以上の言語）
• リスニング状態の管理（Inactive、Listening、Stopped）
• リアルタイムのフィードバックに対応する中間結果
• さまざまなマイク／ネットワークの問題に対するエラー処理
• ブラウザーの互換性検出
• カスタマイズ可能なツールチップと無効状態
• ライフサイクルフック用のイベントコールバック

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージによるインストール
• 基本的なコンポーネントのセットアップと構成
• プロパティのバインドと双方向データバインディング
• CSS のスタイル設定とテーマ設定
• 表示用の TextArea との統合
• 最小構成の動作サンプル

文字起こしと言語

📄 参照： references/transcript-and-language.md

• Transcript プロパティを使用した文字起こしテキストの取得
• 文字起こしを入力フィールドにバインド
• 言語設定（en-US、fr-FR など）
• 対応言語コードとロケール
• 実際の使用場面における多言語の例
• 言語の切り替えパターン

ボタンのカスタマイズ

📄 参照： references/button-customization.md

• SpeechToTextButtonSettings の構成
• ボタンテキストのカスタマイズ（開始状態と停止状態）
• アイコンの CSS クラスとアイコンの位置
• アイコンの位置の値（Left、Right、Top、Bottom）
• プライマリボタンのスタイル設定（IsPrimary プロパティ）
• ボタンを動的にカスタマイズするパターン
• アイコンライブラリとの統合（Syncfusion、Font Awesome、Bootstrap）
• 多言語のボタンテキストの例

ツールチップの構成

📄 参照： references/tooltip-configuration.md

• SpeechToTextTooltipSettings の構成
• 状態に応じたツールチップテキストのカスタマイズ
• ツールチップの位置（12 種類の位置オプションを利用可能）
• 位置のリファレンスガイドとベストプラクティス
• ShowTooltip プロパティの制御
• ツールチップの動的な有効化／無効化
• 多言語のツールチップ対応
• ツールチップのアクセシビリティに関する考慮事項

リスニング状態

📄 参照： references/listening-states.md

• ListeningState プロパティについて
• 状態の値：Inactive、Listening、Stopped
• イベント処理：SpeechRecognitionStarted、SpeechRecognitionStopped
• 状態に基づく UI の更新と視覚的なフィードバック
• リスニング中の波形アニメーション
• ステータスインジケーターとユーザーガイダンス

中間結果とオプション

📄 参照： references/interim-results-and-options.md

• リアルタイムの更新を可能にする AllowInterimResults プロパティ
• 中間結果と最終結果の違い
• ShowTooltip プロパティとツールチップのカスタマイズ
• 無効状態の構成
• カスタムスタイル設定用の HTML 属性
• コントロールパネルのオプションと UI のカスタマイズ

パブリックメソッド

📄 参照： references/methods.md

• StartListeningAsync() - 音声認識を開始
• StopListeningAsync() - 音声認識を停止
• メソッドのシグネチャと戻り値の型
• 例外処理のパターン
• 開始／停止ボタンを使った完全な制御の例
• 状態管理とボタンの無効化

エラー処理とトラブルシューティング

📄 参照先： references/error-handling.md

• エラーの種類：no-speech、aborted、audio-capture、not-allowed、network など
• エラー処理のパターンと復旧方法
• エラー発生時のユーザーフィードバックの仕組み
• ネットワークとサービスの利用可否に関する問題
• マイクの権限に関するトラブルシューティング
• ブラウザーの互換性チェック

ブラウザーのサポートと API の制限

📄 参照先： references/browser-support.md

• ブラウザーの互換性マトリクス
• Chrome、Edge、Safari、Opera のバージョン要件
• 非対応ブラウザー（Firefox）
• 機能検出とポリフィル
• 非対応ブラウザー向けの段階的な機能縮退

クイックスタートの例

SpeechToText を使い始めるための最小限の例を以下に示します。

@using Syncfusion.Blazor.Inputs

<div style="display: flex; flex-direction: column; gap: 20px; align-items: center; padding: 20px;">
    <h3>Voice to Text Converter</h3>
    
    <SfSpeechToText @bind-Transcript="@transcript"></SfSpeechToText>
    
    <SfTextArea 
        RowCount="5" 
        ColumnCount="50" 
        @bind-Value="@transcript" 
        ResizeMode="Resize.None" 
        Placeholder="Transcribed text will appear here...">
    </SfTextArea>
</div>

@code {
    private string transcript = "";
}

このコードの動作：

1. SpeechToText のマイクボタンを表示します
2. 文字起こししたテキストを transcript 変数にバインドします
3. 編集用の TextArea に文字起こし結果を表示します
4. 双方向バインドを使用して、両者の同期を保ちます

よく使われるパターン

パターン 1：リアルタイムの文字起こし表示

ユーザーの発話中に中間結果を表示します（最終結果だけではありません）。

<SfSpeechToText 
    AllowInterimResults="true"
    @bind-Transcript="@transcript">
</SfSpeechToText>
<p>@transcript</p>

パターン 2：多言語サポート

ユーザーが言語を切り替えられるようにします。

<select @onchange="@((ChangeEventArgs e) => selectedLanguage = e.Value.ToString())">
    <option value="en-US">English</option>
    <option value="fr-FR">French</option>
    <option value="de-DE">German</option>
</select>

<SfSpeechToText 
    Language="@selectedLanguage"
    @bind-Transcript="@transcript">
</SfSpeechToText>

@code {
    private string selectedLanguage = "en-US";
    private string transcript = "";
}

パターン 3：状態変化の監視

リスニング状態に応じた視覚的なフィードバックを提供します。

<SfSpeechToText 
    ListeningState="@listeningState"
    SpeechRecognitionStarted="@OnListeningStarted"
    SpeechRecognitionStopped="@OnListeningStopped">
</SfSpeechToText>

<div style="margin-top: 15px;">
    @if (listeningState == SpeechToTextState.Listening)
    {
        <span style="color: green;">🎤 Listening...</span>
    }
    else if (listeningState == SpeechToTextState.Stopped)
    {
        <span style="color: orange;">⏸ Stopped</span>
    }
    else
    {
        <span style="color: gray;">○ Ready to listen</span>
    }
</div>

@code {
    private SpeechToTextState listeningState = SpeechToTextState.Inactive;

    private void OnListeningStarted(SpeechRecognitionStartedEventArgs args)
    {
        listeningState = args.State;
    }

    private void OnListeningStopped(SpeechRecognitionStoppedEventArgs args)
    {
        listeningState = args.State;
    }
}

パターン 4：エラー処理

エラーを適切に処理し、ユーザーに知らせます。

<SfSpeechToText 
    SpeechRecognitionError="@OnSpeechError"
    @bind-Transcript="@transcript">
</SfSpeechToText>

@if (!string.IsNullOrEmpty(errorMessage))
{
    <div style="color: red; margin-top: 10px;">
        ⚠️ @errorMessage
    </div>
}

@code {
    private string transcript = "";
    private string errorMessage = "";

    private void OnSpeechError(SpeechRecognitionErrorEventArgs args)
    {
        errorMessage = args.Error switch
        {
            "no-speech" => "No speech detected. Please try again.",
            "audio-capture" => "No microphone found. Check your device.",
            "not-allowed" => "Microphone access denied. Check browser permissions.",
            "network" => "Network error. Check your connection.",
            _ => $"Error: {args.Error}"
        };
    }
}

主なプロパティ

プロパティ	型	デフォルト	目的
Transcript	string	""	文字起こししたテキストの双方向バインド
Language	string	"en-US"	音声認識の言語コード
ListeningState	SpeechToTextState	Inactive	現在の状態（Inactive、Listening、Stopped）
AllowInterimResults	bool	true	発話中に中間結果を表示します
ShowTooltip	bool	true	ホバー時にツールチップを表示します
Disabled	bool	false	コンポーネントを無効にします
HtmlAttributes	Dictionary	-	ボタンに設定するカスタム HTML 属性

よくあるユースケース

1. 音声検索： ハンズフリーで検索できるよう、検索ボックスに音声入力を追加します
2. フォーム入力： タイピングの代わりに音声入力でフォームのフィールドに値を入力します
3. メモアプリケーション： 音声メモを録音してテキストに変換します
4. アクセシビリティ： タイピングに制約があるユーザーが音声入力を使えるようにします
5. 多言語チャット： チャットアプリケーションで複数の言語による音声入力をサポートします
6. ディクテーション機能： 長文入力用のディクテーションツールを作成します
7. カスタマーサポート： 顧客からのフィードバックやサポート通話を録音して文字起こしします
8. アクセシビリティへの準拠： 音声対応インターフェースに関する WCAG の要件を満たします

---

次のステップ

• インストールについては、Getting Started のリファレンスから始めてください
• 基本的な使い方については、Transcript and Language を確認してください
• 互換性を確保するため、Browser Support を確認してください
• 本番環境に対応した実装については、Error Handling を確認してください