syncfusion-javascript-speech-to-text

Syncfusion JavaScript SpeechToText コンポーネント

概要

Syncfusion JavaScript SpeechToText コンポーネントは、クリックすると音声認識を開始するボタンベースのコントロールです。ユーザーのマイクから音声を取得し、ブラウザーの音声認識サービスを通じて処理し、イベントとプロパティを介して文字起こししたテキストを提供します。

主な機能：

• 途中結果と最終結果に対応したリアルタイムの音声文字起こし
• 設定可能な言語サポート（en-US、fr-FR、de-DE など）
• ボタンの外観、アイコン、コンテンツをカスタマイズ可能
• 開始状態と停止状態のツールチップ設定
• イベント駆動型アーキテクチャ（onStart、onStop、onError、transcriptChanged）
• startListening() メソッドと stopListening() メソッドによるプログラム制御
• 14 個以上の UI テキストキーに対応したローカライズサポート
• RTL（右から左）レイアウトのサポート
• 8 種類の一般的な音声認識エラーに対するエラー処理
• 音声データのプライバシーに関するセキュリティ上の考慮事項

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

はじめに

📄 参照： references/getting-started.md

初期設定と基本的な実装については、こちらから始めてください。

• 依存関係（@syncfusion/ej2-inputs）のインストール
• 開発環境のセットアップ
• CSS スタイルとテーマのインポート
• 基本的な SpeechToText ボタンの作成
• 開始状態と停止状態のボタンコンテンツの追加
• transcriptChanged イベントの処理
• 最初の音声認識の例の実行

音声認識機能

📄 参照： references/speech-recognition.md

音声認識の中核機能と設定について説明します。

• 話された音声から文字起こしを取得する
• 認識言語の設定（lang プロパティ）
• 途中結果を許可するか、最終結果のみを許可するかの設定
• リスニング状態（Inactive、Listening、Stopped）の管理
• ツールチップの表示または非表示
• コンポーネントの無効化
• ボタン要素への HTML 属性の設定
• 8 種類のエラータイプ（no-speech、audio-capture、not-allowed など）に対するエラー処理
• ブラウザーのサポート一覧と互換性

イベント

📄 参照： references/events.md

音声認識のライフサイクルにおけるイベント処理について説明します。

• created イベント - コンポーネントの初期化が完了したとき
• onStart イベント - 音声認識が開始したとき（StartListeningEventArgs）
• onStop イベント - 音声認識が停止したとき（StopListeningEventArgs）
• onError イベント - 認識中にエラーが発生したとき（ErrorEventArgs）
• transcriptChanged イベント - 文字起こしが更新されたとき（TranscriptChangedEventArgs）
• イベント設定の例とパターン

メソッド

📄 参照： references/methods.md

音声認識をプログラムから制御する方法について説明します。

• startListening() - プログラムから音声認識を開始する
• stopListening() - プログラムから音声認識を終了する
• カスタムボタンやコントロールとメソッドを使用する
• メソッドの使用パターンとベストプラクティス

外観のカスタマイズ

📄 参照： references/appearance.md

ボタンとツールチップの外観をカスタマイズする方法について説明します。

• ボタンコンテンツ（content、stopContent プロパティ）
• ボタンアイコン（iconCss、stopIconCss プロパティ）
• アイコンの位置（top、bottom、left、right）
• プライマリボタンのスタイル設定（isPrimary プロパティ）
• ツールチップのコンテンツと位置
• CSS クラスの適用（e-primary、e-outline、e-info、e-success、e-warning、e-danger）
• cssClass プロパティを使用したカスタムスタイル設定

グローバル化

📄 参照： references/globalization.md

ローカライズと国際化のサポートについて説明します。

• L10n.load メソッドを使用したローカライズ
• デフォルトのテキスト識別子（エラーメッセージ、ツールチップ、ARIA ラベル用の 14 個のキー）
• locale プロパティの設定
• enableRtl プロパティによる RTL（右から左）サポート
• アラビア語、ヘブライ語、ペルシャ語の RTL レイアウト実装

セキュリティに関する考慮事項

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

セキュリティとプライバシーに関するベストプラクティス：

• オンライン依存関係の要件
• 潜在的なセキュリティリスク（データ送信、プライバシー、中間者攻撃）
• ブラウザー権限の悪用
• 緩和策（HTTPS、信頼できる環境、明示的な同意）
• サードパーティサービスによるデータ処理

クイックスタートの例

import { SpeechToText, TextArea, TranscriptChangedEventArgs } from "@syncfusion/ej2-inputs";

// Initialize SpeechToText component
const speechToText: SpeechToText = new SpeechToText({
    transcriptChanged: (args: TranscriptChangedEventArgs) => {
        // Update textarea with transcribed text
        textareaObj.value = args.transcript;
    }
});

// Render the component
speechToText.appendTo('#speechtotext_default');

// Create textarea for displaying transcription
const textareaObj: TextArea = new TextArea({
    rows: 5,
    cols: 50,
    value: '',
    resizeMode: 'None',
    placeholder: 'Transcribed text will be shown here...'
});
textareaObj.appendTo('#textareaInst');

<!DOCTYPE html>
<html lang="en">
<head>
    <title>SpeechToText Example</title>
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
</head>
<body>
    <div id="container">
        <button id="speechtotext_default"></button>
        <textarea id="textareaInst"></textarea>
    </div>
</body>
</html>

よく使われるパターン

パターン 1：言語に対応したカスタムボタン

const speechToText: SpeechToText = new SpeechToText({
    lang: 'fr-FR', // French language recognition
    buttonSettings: {
        content: 'Commencer',
        stopContent: 'Arrêter',
        isPrimary: true
    },
    transcriptChanged: (args: TranscriptChangedEventArgs) => {
        console.log('Transcript:', args.transcript);
    }
});
speechToText.appendTo('#speechtotext');

使用する場面： 特定の言語で音声認識を行う必要がある多言語対応アプリケーション。

パターン 2：イベント駆動型の状態管理

const speechToText: SpeechToText = new SpeechToText({
    onStart: (args: StartListeningEventArgs) => {
        console.log('Started listening, state:', args.listeningState);
        // Update UI to show listening indicator
    },
    onStop: (args: StopListeningEventArgs) => {
        console.log('Stopped listening, state:', args.listeningState);
        // Update UI to hide listening indicator
    },
    onError: (args: ErrorEventArgs) => {
        console.error('Speech recognition error:', args.error);
        // Show error message to user
    },
    transcriptChanged: (args: TranscriptChangedEventArgs) => {
        // Real-time transcript updates
        document.getElementById('output').textContent = args.transcript;
    }
});
speechToText.appendTo('#speechtotext');

使用する場面： 音声認識中に視覚的なフィードバックとエラー処理が必要なアプリケーション。

パターン 3：カスタムトリガーによるプログラム制御

const speechToText: SpeechToText = new SpeechToText({
    transcriptChanged: (args: TranscriptChangedEventArgs) => {
        textArea.value = args.transcript;
    }
});
speechToText.appendTo('#speechtotext');

// Start listening when form field gains focus
document.getElementById('inputField').addEventListener('focus', () => {
    speechToText.startListening();
});

// Stop listening when form field loses focus
document.getElementById('inputField').addEventListener('blur', () => {
    speechToText.stopListening();
});

使用する場面： 音声認識をカスタム UI 要素やフォームのワークフローと連携する場合。

パターン 4：最終結果のみ（中間結果なし）

const speechToText: SpeechToText = new SpeechToText({
    allowInterimResults: false, // Only final results
    transcriptChanged: (args: TranscriptChangedEventArgs) => {
        // Transcript only updates when recognition is complete
        textArea.value = args.transcript;
    }
});
speechToText.appendTo('#speechtotext');

使用する場面： リアルタイムの一語ずつの文字起こしではなく、完成した文やフレーズが必要なアプリケーション。

主なプロパティ

プロパティ	型	説明	デフォルト
transcript	string	文字起こしされたテキストを取得または設定します	''
lang	string	認識言語（例：'en-US'、'fr-FR'）	'en-US'
allowInterimResults	boolean	リアルタイムの中間結果を有効にします	true
listeningState	SpeechToTextState	現在の状態（Inactive、Listening、Stopped）	Inactive
showTooltip	boolean	ボタンにカーソルを合わせたときにツールチップを表示します	true
disabled	boolean	コンポーネントを無効にします	false
enablePersistence	boolean	ページの再読み込み後もコンポーネントの状態を保持します	false
buttonSettings	ButtonSettingsModel	ボタンのカスタマイズオプション	{}
tooltipSettings	TooltipSettingsModel	ツールチップのカスタマイズオプション	{}
cssClass	string	スタイル設定用のカスタム CSS クラス	''
locale	string	ローカライズのカルチャ（例：'en-US'、'de'）	'en-US'
enableRtl	boolean	右から左へのレイアウトを有効にします	false

よくある使用例

使用例 1：音声入力に対応したフォーム

入力の代わりに音声入力でフォームの項目に入力できるようにし、データ入力作業のアクセシビリティと速度を向上させます。

使用例 2：リアルタイム文字起こしアプリ

言語に対応した、話し言葉をリアルタイムでテキストに変換するメモ作成アプリや会議の文字起こしアプリを構築します。

使用例 3：音声コマンドインターフェース

アプリケーションの機能やナビゲーションを操作したり、話されたキーワードに基づいてアクションを実行したりするための音声コマンド認識を実装します。

使用例 4：アクセシビリティの向上

キーボードでの入力が難しい、運動機能に制限のあるユーザー向けに、音声入力の代替手段を提供します。

使用例 5：多言語対応

グローバルなアプリケーションで複数の言語による音声認識をサポートし、ユーザーが希望する言語で話せるようにします。

使用例 6：音声検索機能

アプリケーションに音声検索機能を追加し、ユーザーが検索語句を入力する代わりに話してコンテンツを検索できるようにします。

ベストプラクティス

1. 常にエラーを適切に処理する - onError イベントを実装し、マイクへのアクセス、ネットワークの問題、未対応のブラウザーに関するエラーを捕捉して、ユーザーにわかりやすいメッセージを表示します。

2. 権限を明示的に求める - 音声認識を開始する前に、マイクへのアクセスが必要な理由をユーザーに伝え、信頼と権限の許可率を高めます。

3. 本番環境では HTTPS を使用する - 音声認識にはセキュアなコンテキストが必要です。セキュリティエラーを避けるため、アプリケーションが HTTPS 経由で提供されるようにします。

4. 視覚的なフィードバックを提供する - リスニング状態のイベントを使って、コンポーネントがリスニング中、停止中、または非アクティブであることをユーザーに示します。

5. ブラウザーの互換性を確認する - ブラウザーのサポート状況（Chrome 25+、Edge 79+、Safari 12+）を確認し、未対応のブラウザー向けにフォールバック UI を用意します。

6. 適切な言語を設定する - 認識精度を高めるため、lang プロパティをユーザーが使用すると想定される言語に合わせて設定します。

7. 中間結果を検討する - ユースケースに応じて、リアルタイムのフィードバックには allowInterimResults:true を、最終結果のみを取得するには false を使用します。

8. プライバシーに関する通知を実装する - 音声認識のために、音声データがサードパーティーのサービス（Google、Microsoft）によって処理される場合があることをユーザーに伝えます。

関連コンポーネント

• TextArea - 文字起こしされたテキストの表示によく使われます
• Button - 基本的なボタン機能を提供します
• Tooltip - ホバー時に役立つテキストを表示するために使われます

ブラウザーのサポート

ブラウザー	対応バージョン
Chrome	25+
Edge	79+
Firefox	未対応
Safari	12+
Opera	30+