syncfusion-react-speech-to-text

Syncfusion React SpeechToText コンポーネント

コンポーネントの概要

SpeechToText コンポーネントを使用すると、Web Speech API で音声をテキストに変換できます。このスキルでは、React アプリケーションで音声認識を実装、カスタマイズ、トラブルシューティングする方法を説明します。ユーザーのマイクから音声を取り込み、ブラウザー API を使用してリアルタイムでテキストに変換する主要なコンポーネントです。

主な機能

• リアルタイム音声認識
• 複数言語のサポート
• ボタンとツールチップのカスタマイズ
• イベント駆動型アーキテクチャ
• メソッドによるプログラム制御
• アクセシビリティのサポート（ARIA ラベル、キーボードナビゲーション）
• ローカライズのサポート
• エラー処理と復旧

ドキュメント

はじめに

📄 参照: references/getting-started.md

• npm によるインストール
• パッケージのインストールとセットアップ
• 基本的なコンポーネントの実装
• CSS のインポートとテーマの選択
• 最初の実行可能な例
• TypeScript の設定
• コンポーネントの無効化（disabled プロパティ）

音声認識機能

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

• トランスクリプトのリアルタイム取得
• 認識言語の設定
• 暫定結果の管理
• SpeechToTextState 列挙型（Inactive、Listening、Stopped）によるリスニング状態の管理
• イベント引数とコンポーネントの参照からの listeningState の読み取り
• 音声からテキストへの変換の処理
• リアルタイム結果と最終結果

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

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

• ボタンのコンテンツとアイコンのカスタマイズ
• アイコンの配置とスタイル設定
• ツールチップの表示制御（showTooltip プロパティ）
• ツールチップの設定と配置（12 種類すべての TooltipPosition 値）
• CSS クラスのスタイル設定（e-primary、e-success など）
• ボタンの外観モード
• レスポンシブなボタンデザイン

イベントとメソッド

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

• イベント処理（created、onStart、onStop、onError、transcriptChanged）
• 正しいイベント引数インターフェイス（StartListeningEventArgs、StopListeningEventArgs、ErrorEventArgs、TranscriptChangedEventArgs）
• リスニングの開始を防ぐ cancel プロパティ
• ユーザー操作とプログラムによるトリガーを区別する isInteracted
• 人が読みやすいエラーの詳細を示す errorMessage
• 暫定結果と最終的なトランスクリプト結果を示す isInterimResult
• startListening()、stopListening()、destroy() メソッド
• 参照によるコンポーネント制御
• プログラムによるリスニング管理

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

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

• L10n.load() によるローカライズ
• 使用可能なロケール文字列と翻訳
• 言語別のエラーメッセージ
• 右から左に記述する言語の RTL サポート
• アクセシビリティラベルと ARIA 属性
• ボタン要素のカスタム HTML/ARIA 属性を指定する htmlAttributes
• 多言語インターフェイスのサポート

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

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

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

クイックスタートの例

import { SpeechToTextComponent, TextAreaComponent, TranscriptChangedEventArgs } from '@syncfusion/ej2-react-inputs';
import { useState } from 'react';
import "@syncfusion/ej2-tailwind3-theme/styles/speech-to-text/index.css";

function VoiceNoteApp() {
  const [transcript, setTranscript] = useState('');

  const handleTranscriptChanged = (args: TranscriptChangedEventArgs) => {
    setTranscript(args.transcript);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Voice Note Recorder</h2>
      
      {/* SpeechToText component with microphone button */}
      <SpeechToTextComponent 
        id="speechToText"
        transcriptChanged={handleTranscriptChanged}
      />
      
      {/* Display transcribed text */}
      <TextAreaComponent
        id="noteArea"
        value={transcript}
        resizeMode="None"
        rows={5}
        cols={50}
        placeholder="Your voice will appear here..."
      />
    </div>
  );
}

export default VoiceNoteApp;

よくあるパターン

パターン 1：音声によるフォーム入力

import { SpeechToTextComponent, TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { useState } from 'react';

function VoiceForm() {
  const [formData, setFormData] = useState({
    name: '',
    message: ''
  });

  const handleNameTranscript = (args: any) => {
    setFormData(prev => ({ ...prev, name: args.transcript }));
  };

  const handleMessageTranscript = (args: any) => {
    setFormData(prev => ({ ...prev, message: args.transcript }));
  };

  return (
    <div>
      <label>Name (speak):</label>
      <SpeechToTextComponent transcriptChanged={handleNameTranscript} />
      <TextBoxComponent value={formData.name} />
      
      <label>Message (speak):</label>
      <SpeechToTextComponent transcriptChanged={handleMessageTranscript} />
      <TextBoxComponent value={formData.message} />
    </div>
  );
}

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

import { SpeechToTextComponent } from '@syncfusion/ej2-react-inputs';
import { useRef } from 'react';

function VoiceControlApp() {
  const speechRef = useRef<SpeechToTextComponent>(null);

  const startVoiceInput = () => {
    speechRef.current?.startListening();
  };

  const stopVoiceInput = () => {
    speechRef.current?.stopListening();
  };

  return (
    <div>
      <SpeechToTextComponent ref={speechRef} />
      <button onClick={startVoiceInput}>Start Recording</button>
      <button onClick={stopVoiceInput}>Stop Recording</button>
    </div>
  );
}

パターン 3：エラー処理

import { SpeechToTextComponent, ErrorEventArgs } from '@syncfusion/ej2-react-inputs';
import { useState } from 'react';

function VoiceWithErrorHandling() {
  const [error, setError] = useState('');
  const [isListening, setIsListening] = useState(false);

  const handleError = (args: ErrorEventArgs) => {
    // args.errorMessage is the human-readable description; args.error is the error code
    setError(args.errorMessage || `Error: ${args.error}`);
  };

  const handleStart = () => {
    setIsListening(true);
    setError('');
  };

  const handleStop = () => {
    setIsListening(false);
  };

  return (
    <div>
      <SpeechToTextComponent 
        onError={handleError}
        onStart={handleStart}
        onStop={handleStop}
      />
      {isListening && <p>🎤 Listening...</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
}

主なプロパティ

プロパティ	型	説明
lang	string	音声認識の言語（例：'en-US'、'fr-FR'）
transcript	string	現在の文字起こしテキスト
allowInterimResults	boolean	リアルタイムの結果を表示するかどうか（デフォルト：true）
listeningState	SpeechToTextState	現在のリスニング状態（Inactive、Listening、Stopped）
buttonSettings	ButtonSettingsModel	ボタンの外観と内容をカスタマイズします
tooltipSettings	TooltipSettingsModel	ツールチップの表示を設定します
showTooltip	boolean	ホバー時にツールチップを表示するかどうか（デフォルト：true）
cssClass	string	スタイル設定用の CSS クラスを適用します
disabled	boolean	コンポーネントのすべての操作を無効にするかどうか（デフォルト：false）
htmlAttributes	{ [key: string]: string }	ルートボタン要素に追加する HTML 属性（ARIA、data-* など）
locale	string	ローカライズ言語コード
enableRtl	boolean	右から左へのレイアウトを有効にします
enablePersistence	boolean	localStorage を介してページの再読み込み後もコンポーネントの状態を保持します

イベントハンドラー

イベント	引数	説明
created	-	コンポーネントの初期化時に発生します
onStart	StartListeningEventArgs	音声認識の開始時に発生します。引数：cancel、event、isInteracted、listeningState、name
onStop	StopListeningEventArgs	音声認識の終了時に発生します。引数：event、isInteracted、listeningState、name
onError	ErrorEventArgs	エラー発生時に発生します。引数：error、errorMessage、event、name
transcriptChanged	TranscriptChangedEventArgs	文字起こしの更新時に発生します。引数：transcript、isInterimResult、event、name

メソッド

メソッド	説明
startListening()	プログラムから音声認識を開始します
stopListening()	プログラムから音声認識を停止します
destroy()	コンポーネントのインスタンスを破棄し、すべてのリソースを解放します

トラブルシューティング

マイクの使用許可が拒否される

解決策： ブラウザーの権限設定を確認し、セキュリティ設定でマイクへのアクセスを許可してください

音声が認識されない

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

コンポーネントが表示されない

解決策： CSS のインポートが含まれていること、およびライセンスキーが登録されていることを確認してください

ブラウザーがサポートされていない

解決策： ブラウザーが Web Speech API をサポートしているか確認してください（Chrome、Edge、Safari はサポートしています）

関連コンポーネント

• TextArea： 文字起こししたテキストの表示用
• TextBox： 音声機能を備えた入力フィールド用
• Button： カスタム音声コントロールボタン用
• Tooltip： 音声機能に関するコンテキストヘルプ用