syncfusion-angular-speech-to-text

Syncfusion Angular SpeechToText コンポーネント

コンポーネントの概要

Syncfusion Angular SpeechToText コンポーネントは、ブラウザーのネイティブな音声認識 API を使用して、話し言葉をテキストに変換する、軽量でアクセシブルなコントロールです。

主な機能：

• リアルタイム文字起こし - 中間結果と最終結果を使って、音声をテキストに変換します
• ボタンのカスタマイズ - 開始／停止ボタンのアイコン、テキスト、配置、スタイルを設定できます
• ツールチップのサポート - UX を向上させるため、カスタムコンテンツや配置を指定したツールチップを追加できます
• イベントと操作 - リスニング状態の変更、エラー、文字起こし結果の更新を処理できます
• メソッド - startListening() および stopListening() メソッドでプログラムから制御できます
• 言語サポート - ロケール設定により、複数言語の音声認識に対応します
• 国際化 - 国際的なアプリケーション向けに RTL サポートとローカライズを提供します
• スタイル設定オプション - CSS クラス、HTML 属性、テーマとの統合に対応します
• セキュリティ機能 - HTTPS の強制と明示的なマイク権限に対応します
• ブラウザーの互換性 - Chrome 25+、Edge 79+、Safari 12+、Opera 30+

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

はじめに

📄 参照： references/getting-started.md

• パッケージのインストール（Ivy と ngcc の互換性）
• Angular プロジェクトのセットアップと設定
• CSS のインポートとテーマ管理
• モジュールのインポートと基本的なコンポーネントのレンダリング
• ボタンのコンテンツのカスタマイズ
• TextArea との連携を含む、完全に動作するサンプル

ボタンのカスタマイズ

📄 参照： references/button-customization.md

• ButtonSettingsModel の設定
• 開始ボタンと停止ボタンのコンテンツラベル
• CSS クラスを使ったアイコンのカスタマイズ
• アイコンの配置（上、下、左、右）
• 強調表示のためのプライマリボタンのスタイル設定
• 視覚的なスタイルのバリエーションとベストプラクティス

ツールチップの設定

📄 参照： references/tooltip-configuration.md

• TooltipSettingsModel のセットアップ
• 開始状態と停止状態のツールチップコンテンツ
• ボタンに対するツールチップの配置
• ツールチップの有効化と無効化
• 実用的なツールチップの使用パターン

スタイルと外観

📄 参照： references/styling-and-appearance.md

• CSS クラスシステム（e-primary、e-outline、e-info、e-success、e-warning、e-danger）
• cssClass プロパティを使ったカスタムスタイル設定
• テーマの設定と統合
• HTML 属性のカスタマイズ
• カスタム CSS の例と高度なスタイル設定

イベントとメソッド

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

• イベントの種類（created、onStart、onStop、onError、transcriptChanged）
• イベントハンドラーの実装とイベント引数（event、name プロパティを含む）
• startListening()、stopListening()、destroy() メソッドによるプログラム制御
• listeningState プロパティ（Inactive、Listening、Stopped）によるコンポーネント状態の制御
• onStart イベントの cancel プロパティによるリスニングのキャンセル
• isInteracted プロパティによる、ユーザー操作とプログラム操作の区別
• さまざまなシナリオに応じたイベント処理パターン
• リスニングのライフサイクルをプログラムで管理
• 状態遷移の管理とワークフロー制御
• コンポーネントのクリーンアップとメモリ管理

音声認識機能

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

• 音声入力から文字起こし結果を取得する
• lang プロパティによる認識言語の設定
• 中間結果の設定（allowInterimResults）
• リスニング状態の管理（Inactive、Listening、Stopped）
• ツールチップの表示制御（showTooltip）
• 無効状態の設定
• enablePersistence プロパティによる状態の永続化
• 状態の監視とステータスの管理
• localStorage を使ったカスタム状態管理

国際化

📄 お読みください： references/internationalization.md

• L10n.load() を使用したローカライズの設定
• エラーメッセージとラベルの翻訳キーの対応付け
• 多言語対応の実装例
• RTL（右から左）のサポートの有効化
• 言語固有の設定に関するベストプラクティス

セキュリティとエラー処理

📄 お読みください： references/security-and-error-handling.md

• セキュリティリスクと緩和策
• データ送信とプライバシーに関する懸念
• HTTPS の強制と MITM の防止
• マイクの権限管理
• エラーの種類の処理（no-speech、aborted、audio-capture、not-allowed、service-not-allowed、network、unsupported-browser、default）
• ブラウザーのサポート状況と互換性

クイックスタートの例

文字起こしを出力する、最小限の動作する SpeechToText コンポーネントの例です。

import { Component, ViewChild } from '@angular/core';
import { SpeechToTextModule, TextAreaComponent, TextAreaModule, TranscriptChangedEventArgs } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [SpeechToTextModule, TextAreaModule],
    standalone: true,
    selector: 'app-root',
    template: `
    <div class="speechText-container">
        <button ejs-speechtotext 
                (transcriptChanged)="onTranscriptChange($event)">
        </button>
        <ejs-textarea #outputTextarea 
                      id="textareaInst" 
                      value="" 
                      rows="5" 
                      cols="50" 
                      resizeMode="None" 
                      placeholder="Transcribed text will be shown here...">
        </ejs-textarea>
    </div>`
})
export class AppComponent {
    @ViewChild('outputTextarea') outputTextarea!: TextAreaComponent;
    
    onTranscriptChange(args: TranscriptChangedEventArgs): void {
        this.outputTextarea.value = args.transcript;
    }
}

一般的なパターン

パターン 1：イベント対応のカスタマイズボタン

カスタムラベルとイベントハンドラーを使って、スタイル設定されたボタンを実装します。

public buttonSettings: ButtonSettingsModel = {
    content: 'Start Listening',
    stopContent: 'Stop Listening',
    iconCss: 'e-icons e-play',
    stopIconCss: 'e-icons e-pause',
    isPrimary: true
};

onListeningStart(args: StartListeningEventArgs): void {
    console.log('Listening started');
}

onListeningStop(args: StopListeningEventArgs): void {
    console.log('Listening stopped');
}

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

国際化アプリケーション向けにローカライズを設定します。

L10n.load({
    'de': {
        "speech-to-text": {
            "startAriaLabel": "Drücken Sie, um zu sprechen",
            "stopAriaLabel": "Drücken Sie, um zu stoppen",
            "noSpeechError": "Keine Sprache erkannt"
        }
    }
});

パターン 3：プログラムによる制御

ユーザーがボタンをクリックせずに、プログラムからリスニング状態を管理します。

@ViewChild('speechtotext') speechToText!: SpeechToTextComponent;

public startListening(): void {
    this.speechToText.startListening();
}

public stopListening(): void {
    this.speechToText.stopListening();
}

パターン 4：エラー処理

音声認識エラーを適切に処理します。

onErrorHandler(args: ErrorEventArgs): void {
    if (args.error === 'no-speech') {
        console.log('No speech detected. Please try again.');
    } else if (args.error === 'not-allowed') {
        console.log('Microphone permission denied.');
    }
}

パターン 5：キャンセルによるリスニング条件の制御

cancel プロパティを使って、リスニングを開始できるタイミングを制御します。

onListeningStart(args: StartListeningEventArgs): void {
    // Cancel listening if conditions aren't met
    if (!this.hasPermission || !navigator.onLine) {
        args.cancel = true;
        alert('Cannot start listening. Check permissions and connection.');
        return;
    }
    
    // Track if user or system triggered the action
    if (args.isInteracted) {
        console.log('User clicked the button');
    } else {
        console.log('Started programmatically');
    }
}

パターン 6：中間結果と最終結果の区別

中間の文字起こし結果と最終的な文字起こし結果を別々に処理します。

onTranscriptChange(args: TranscriptChangedEventArgs): void {
    if (args.isInterimResult) {
        // Show interim results in real-time (lighter styling)
        this.interimText = args.transcript;
    } else {
        // Process final results (save, send to API, etc.)
        this.finalText = args.transcript;
        this.saveTranscript(args.transcript);
    }
}

パターン 7：コンポーネントの状態の制御

コンポーネントの動作状態をプログラムから制御します。

import { SpeechToTextState } from '@syncfusion/ej2-angular-inputs';

export class AppComponent {
    public currentState: SpeechToTextState = SpeechToTextState.Inactive;
    
    // Set component to listening state
    startListening(): void {
        this.currentState = SpeechToTextState.Listening;
    }
    
    // Set component to stopped state
    stopListening(): void {
        this.currentState = SpeechToTextState.Stopped;
    }
    
    // Reset to inactive state
    resetState(): void {
        this.currentState = SpeechToTextState.Inactive;
    }
}

パターン 8：コンポーネントの適切なクリーンアップ

メモリーリークを防ぐため、適切にクリーンアップします。

import { OnDestroy } from '@angular/core';

export class AppComponent implements OnDestroy {
    @ViewChild('speechtotext') speechToText!: SpeechToTextComponent;
    
    ngOnDestroy(): void {
        if (this.speechToText) {
            this.speechToText.stopListening();
            this.speechToText.destroy();
        }
    }
}

主なプロパティ

プロパティ	型	デフォルト	目的
buttonSettings	ButtonSettingsModel	-	ボタンの外観とラベルを設定します
tooltipSettings	TooltipSettingsModel	-	ツールチップの内容と位置をカスタマイズします
lang	string	'en-US'	音声認識の言語を設定します
allowInterimResults	boolean	true	リアルタイムの中間文字起こし結果を有効にします
transcript	string	''	現在認識されているテキスト（読み取り専用）
listeningState	SpeechToTextState	Inactive	リスニング状態を監視します（Inactive、Listening、Stopped）
showTooltip	boolean	true	ホバー時にツールチップを表示します
disabled	boolean	false	コンポーネントの操作を無効にします
enablePersistence	boolean	false	ページの再読み込み後もコンポーネントの状態を保持します
enableRtl	boolean	false	テキストの右から左への方向を有効にします
cssClass	string	-	カスタム CSS クラスを適用します
htmlAttributes	object	-	ボタンにカスタム HTML 属性を設定します
locale	string	'en-US'	UI のローカライズ言語を設定します

ブラウザーの要件

SpeechToText コンポーネントには、次の要件があります。

• 音声認識処理のためのアクティブなインターネット接続
• ブラウザーの Speech Recognition API のサポート：
  • Chrome 25+
  • Edge 79+
  • Safari 12+
  • Opera 30+
  • Firefox：サポート対象外
• システムに接続されたマイクハードウェア
• ブラウザー設定で許可されたユーザーのマイク権限
• 安全なマイクアクセスのためのHTTPS コンテキスト（推奨）