syncfusion-vue-speech-to-text

Syncfusion Vue Speech-to-Text コンポーネント

Syncfusion Vue Speech-to-Text コンポーネントは、ブラウザーの Speech Recognition API を使用して、話し言葉をテキストに変換します。このスキルでは、Vue 3 アプリケーションでリアルタイムの音声文字起こしを実装するためのセットアップ、設定、イベント処理、カスタマイズ、およびセキュリティ上の考慮事項について説明します。

ブラウザーのサポートと要件

Speech-to-Text コンポーネントには、以下が必要です。

• ブラウザーのサポート： Chrome 25 以降、Edge 79 以降、Safari 12 以降、Opera 30 以降（Firefox はサポート対象外）
• API 依存関係： HTML5 Speech Recognition API
• インターネット接続： 音声処理に必要です
• ユーザーの許可： マイクへのアクセス許可

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

はじめに

📄 参照： references/getting-started.md

• Vite を使用した Vue 3 プロジェクトのセットアップ
• パッケージのインストールと設定
• CSS テーマのインポート
• コンポーネントの登録
• ブラウザーの互換性要件

音声認識と設定

📄 参照： references/speech-recognition.md

• transcript プロパティを使用した文字起こしテキストの取得
• lang プロパティを使用した言語の設定
• allowInterimResults を使用したリアルタイム結果の管理
• リスニング状態（非アクティブ、リスニング中、停止）の理解
• showTooltip を使用したツールチップの表示／非表示
• コンポーネントの無効化
• エラー処理とトラブルシューティング

メソッドとプログラムによる制御

📄 参照： references/methods.md

• startListening() を使用した音声認識の開始
• stopListening() を使用した音声認識の停止
• プログラムによる制御のパターンとユースケース

イベントとライフサイクル

📄 参照： references/events.md

• created イベントを使用したコンポーネントの初期化
• 音声認識のライフサイクル：onStart、onStop
• onError イベントを使用したエラーの検出
• transcriptChanged イベントを使用したリアルタイムの文字起こし
• イベント引数の構造と実用的な例

外観とカスタマイズ

📄 参照： references/appearance.md

• ボタンのテキストとコンテンツのカスタマイズ
• ボタンアイコンの設定と配置
• プライマリボタンのスタイル設定
• ツールチップのコンテンツと配置
• CSS クラスのスタイル設定（e-primary、e-outline、e-info、e-success、e-warning、e-danger）
• カスタムスタイルの例

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

📄 参照： references/globalization.md

• L10n.load() メソッドを使用したローカライズ
• 翻訳キーの識別子とデフォルト値
• locale プロパティを使用した言語の設定
• enableRtl プロパティを使用した右から左（RTL）のサポート
• 多言語の例

セキュリティ上の考慮事項

📄 参照： references/security.md

• オンライン依存関係とオフライン時の代替手段
• データ送信に関するセキュリティリスク
• サードパーティサーバーに関するプライバシー上の懸念
• 中間者攻撃（MITM）の攻撃経路
• リスク軽減策とベストプラクティス

クイックスタート

Composition API を使用した基本的なセットアップ：

<template>
  <div id="container">
    <ejs-speechtotext id="speechtotext" @transcript-changed="onTranscriptChange"></ejs-speechtotext>
    <ejs-textarea v-model="textareaValue" rows="5" cols="50" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SpeechToTextComponent as EjsSpeechtotext, TextAreaComponent as EjsTextarea } from "@syncfusion/ej2-vue-inputs";

const textareaValue = ref('');

const onTranscriptChange = (args) => {
  textareaValue.value = args.transcript;
};

</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/speech-to-text/index.css";
</style>

よくあるパターン

パターン 1：リアルタイム文字起こしと最終文字起こし

ユーザーが話している間に結果を表示する（中間結果）か、発話が完了するまで待機します。

<ejs-speechtotext @transcript-changed="onTranscriptChange"></ejs-speechtotext>


<ejs-speechtotext @transcript-changed="onTranscriptChange" :allow-interim-results="false"></ejs-speechtotext>

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

音声認識の言語を設定します。

<ejs-speechtotext lang="en-US" @transcript-changed="onTranscriptChange"></ejs-speechtotext>


<ejs-speechtotext lang="fr-FR" @transcript-changed="onTranscriptChange"></ejs-speechtotext>

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

ボタンから音声認識を起動します。

<template>
  <div>
    <button @click="startRecognition">Start Listening</button>
    <button @click="stopRecognition">Stop Listening</button>
    <ejs-speechtotext ref="speechToTextInstance"></ejs-speechtotext>
  </div>
</template>

<script setup>
const speechToTextInstance = ref(null);

const startRecognition = () => {
  speechToTextInstance.value.startListening();
};

const stopRecognition = () => {
  speechToTextInstance.value.stopListening();
};
</script>

パターン 4：リスニング状態の監視

コンポーネントの状態変化を追跡します。

<template>
  <div>
    <p>Status: {{ listeningState }}</p>
    <ejs-speechtotext @start="(args) => listeningState = args.listeningState" @stop="(args) => listeningState = args.listeningState"></ejs-speechtotext>
  </div>
</template>

<script setup>
const listeningState = ref('Inactive');
</script>

パターン 5：エラー処理

音声認識エラーを捕捉し、応答します。

<template>
  <ejs-speechtotext @error="onError"></ejs-speechtotext>
</template>

<script setup>
const onError = (args) => {
  console.error('Speech recognition error:', args);
};
</script>