syncfusion-aspnetcore-speech-to-text

Syncfusion ASP.NET Core SpeechToText コントロール

概要

SpeechToText コントロールを使用すると、ASP.NET Core アプリケーションで Web Speech API を利用して、音声をテキストに変換できます。このスキルでは、Razor Tag Helper を使用した音声認識の実装、カスタマイズ、トラブルシューティングについて説明します。

ブラウザー API を使用して音声を取得し、リアルタイムでテキストに変換する主要な Razor Tag Helper です。

主な機能：

• Web Speech API によるリアルタイム音声認識
• 複数言語のサポート
• Tag Helper 属性によるボタンとツールチップのカスタマイズ
• イベント駆動型アーキテクチャ
• JavaScript メソッドによるプログラム制御
• アクセシビリティのサポート（ARIA ラベル、キーボード操作）
• ローカライズのサポート
• エラー処理と復旧
• ASP.NET Core バインディング

ドキュメント

はじめに

📄 参照： references/getting-started.md

• NuGet によるインストール
• ASP.NET Core プロジェクトのセットアップ
• Razor Tag Helper の登録
• 基本的なコントロールの実装
• CSS のインポートとテーマの選択
• 最初の動作するサンプル
• スクリプトマネージャーの設定

音声認識機能

📄 参照： references/speech-recognition-features.md

• リアルタイムでの文字起こし結果の取得
• 認識言語の設定
• 暫定結果の管理
• リスニング状態の管理
• 音声テキスト変換の処理
• リアルタイム結果と最終結果
• 多言語サポート

ボタンとツールチップのカスタマイズ

📄 参照： references/button-and-tooltip-customization.md

• Tag Helper 属性によるボタンのカスタマイズ
• CSS クラスを使用したアイコンのカスタマイズ
• アイコンの配置
• ツールチップの設定
• プライマリボタンのスタイル設定
• CSS クラスのスタイル設定（e-primary、e-success など）
• レスポンシブデザイン

イベントとメソッド

📄 参照： references/events-and-methods.md

• Razor でのイベントバインディング（onStart、onStop、onError、transcriptChanged）
• script タグでのイベント処理
• エラーの種類とエラー処理
• startListening() および stopListening() メソッド
• JavaScript によるプログラム制御
• ej.base.getComponent() によるコンポーネントインスタンスの取得
• イベントのワークフローとパターン

グローバリゼーションとローカライズ

📄 参照： references/globalization-and-localization.md

• L10n.load() によるローカライズ
• 利用可能なロケール文字列
• 言語別のエラーメッセージ
• enableRtl 属性による RTL のサポート
• アクセシビリティラベルと ARIA 属性
• 多言語インターフェイスの例

トラブルシューティングとセキュリティ

📄 参照： references/troubleshooting-and-security.md

• よくある問題と解決策
• ブラウザー互換性一覧
• マイクの権限の処理
• ASP.NET Core のセキュリティに関する考慮事項
• プライバシーとデータ送信
• パフォーマンスの最適化
• オフライン時のフォールバック戦略

クイックスタートの例

@using Syncfusion.EJ2.Inputs

<div id='speechtotext-container'>
    <ejs-speechtotext id="speech-to-text" transcriptChanged="onTranscriptChanged"></ejs-speechtotext>
    <ejs-textarea id="output-textarea" rows="5" cols="50" value="" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
</div>

<script>
    function onTranscriptChanged(args) {
        var textareaObj = ej.base.getComponent(document.getElementById("output-textarea"), "textarea");
        textareaObj.value = args.transcript;
    }
</script>

<style>
    #speechtotext-container {
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>

よく使われるパターン

パターン 1：複数のフィールドを含む音声フォーム

@using Syncfusion.EJ2.Inputs

<div class="form-group">
    <label>Name (speak):</label>
    <ejs-speechtotext id="name-voice" transcriptChanged="onNameTranscript"></ejs-speechtotext>
    <ejs-textbox id="name-field"></ejs-textbox>
</div>

<div class="form-group">
    <label>Message (speak):</label>
    <ejs-speechtotext id="message-voice" transcriptChanged="onMessageTranscript"></ejs-speechtotext>
    <ejs-textarea id="message-field" rows="4"></ejs-textarea>
</div>

<script>
    function onNameTranscript(args) {
        var nameField = ej.base.getComponent(document.getElementById("name-field"), "textbox");
        nameField.value = args.transcript;
    }

    function onMessageTranscript(args) {
        var messageField = ej.base.getComponent(document.getElementById("message-field"), "textarea");
        messageField.value = args.transcript;
    }
</script>

パターン 2：プログラム制御

@using Syncfusion.EJ2.Inputs

<ejs-speechtotext id="speech-control"></ejs-speechtotext>

<div>
    <button onclick="startVoiceInput()">Start Recording</button>
    <button onclick="stopVoiceInput()">Stop Recording</button>
</div>

<script>
    function startVoiceInput() {
        var speechComponent = ej.base.getComponent(
            document.getElementById("speech-control"), 
            "speechtotext"
        );
        speechComponent.startListening();
    }

    function stopVoiceInput() {
        var speechComponent = ej.base.getComponent(
            document.getElementById("speech-control"), 
            "speechtotext"
        );
        speechComponent.stopListening();
    }
</script>

パターン 3：エラー処理

@using Syncfusion.EJ2.Inputs

<ejs-speechtotext id="error-speech" 
    onError="handleError" 
    onStart="handleStart" 
    onStop="handleStop">
</ejs-speechtotext>

<div id="error-message" style="display:none; color: red; padding: 10px;"></div>

<script>
    function handleError(args) {
        var errorDiv = document.getElementById("error-message");
        errorDiv.style.display = "block";
        
        var errorMessages = {
            'no-speech': '🔇 No speech detected. Please try again.',
            'audio-capture': '🎙️ Microphone not found.',
            'not-allowed': '🔒 Microphone permission denied.',
            'network': '🌐 Network error occurred.'
        };
        
        errorDiv.textContent = errorMessages[args.error] || 'Error: ' + args.error;
        setTimeout(() => { errorDiv.style.display = "none"; }, 5000);
    }

    function handleStart() {
        console.log('🎤 Listening started');
    }

    function handleStop() {
        console.log('⏹️ Listening stopped');
    }
</script>

主なプロパティ

プロパティ	型	説明
lang	string	言語コード（例：'en-US'、'fr-FR'）
transcript	string	現在の文字起こしテキスト
allowInterimResults	boolean	リアルタイム結果を表示するかどうか（デフォルト：true）
listeningState	enum	現在の状態（Inactive、Listening、Stopped）
cssClass	string	CSS クラス（e-primary、e-success など）
enableRtl	boolean	右から左へのレイアウトを有効にするかどうか
locale	string	ローカライズの言語コード

Tag Helper 属性

<ejs-speechtotext 
    id="speechId"
    lang="en-US"
    allowInterimResults="true"
    cssClass="e-primary"
    enableRtl="false"
    locale="en-US"
    transcriptChanged="onTranscriptChanged"
    onStart="onStartListening"
    onStop="onStopListening"
    onError="onError"
    created="onCreated">
    
    <e-speechtotext-buttonSettings 
        content="Start Listening" 
        stopContent="Stop Listening"
        iconCss="e-icons e-play"
        stopIconCss="e-icons e-pause"
        iconPosition="Right"
        isPrimary="true">
    </e-speechtotext-buttonSettings>
    
    <e-speechtotext-tooltipSettings 
        position="TopCenter"
        content="Click to start"
        stopContent="Click to stop">
    </e-speechtotext-tooltipSettings>
</ejs-speechtotext>

イベントハンドラー

イベント	引数	説明
created	-	コントロールの初期化時に発生します
onStart	StartListeningEventArgs	リスニングの開始時に発生します
onStop	StopListeningEventArgs	リスニングの終了時に発生します
onError	ErrorEventArgs	エラーの発生時に発生します
transcriptChanged	TranscriptChangedEventArgs	トランスクリプトの更新時に発生します

メソッド

メソッド	説明
startListening()	音声認識を開始します
stopListening()	音声認識を停止します

トラブルシューティング

コントロールが表示されない

解決策： レイアウトに <ejs-scripts></ejs-scripts> が含まれており、CSS がインポートされていることを確認してください

イベントが発生しない

解決策： イベントハンドラーがグローバルスコープ内の有効な JavaScript 関数であることを確認してください

マイクの使用が許可されない

解決策： ブラウザーの設定でマイクへのアクセスを許可してください

音声が認識されない

解決策： マイクの音量を確認し、はっきりと話し、言語設定を確認してください