この記事では、OpenaiのWhisper API、React、Node.js、およびFFMPEGを活用する音声からテキストアプリケーションの構築を示しています。 アプリケーションはオーディオ入力を受け入れ、Whisperを使用して処理し、結果の転写を表示します。ささやきの正確さは、非ネイティブの英語の話者でさえ、強調されています。
主要な機能:
、およびを使用します。 FFMPEG統合は、、
、およびで促進され、正確なオーディオトリミングを有効にします。
dotenv
cors
プロジェクトのセットアップ:multer
form-data
axios
プロジェクトは、個別のfluent-ffmpeg
とffmetadata
ディレクトリで構成されています。 React FrontEndはffmpeg-static
を使用して初期化されており、必要なパッケージ(
、、)がインストールされています。 Node.js BackEndはExpress.js、およびパッケージを使用します(
、、frontend
、backend
、create-react-app
、axios
、react-dropzone
、react-select
、react-toastify
、express
)は、サーバー機能、APIインタラクション、およびFFMPEG統合のためにインストールされています。
dotenv
cors
ささやき統合:multer
form-data
axios
ポストルート(fluent-ffmpeg
)はオーディオアップロードを処理し、オーディオを読み取り可能なストリームに変換し、whisper APIに送信し、転写をJSONとして返します。 エラー処理とセキュリティのベストプラクティスが実装されています
ffmetadata
ffmpeg-static
ffmpeg統合:nodemon
FFMPEGは、ユーザー指定の開始時間と終了時間に基づいてオーディオセグメントをトリミングするために使用されます。 ユーティリティ関数は、FFMPEG処理のためにタイム文字列を秒に変換します。 トリミングされたオーディオは、ささやきAPIに送信されます。
フロントエンド開発:
を使用して構築されたカスタムTimePicker
コンポーネントを使用すると、転写の正確な開始時間と終了時間を選択できます。メインアプリケーションコンポーネントは、ファイルのアップロードを処理し、バックエンドAPIと通信し、転写結果を表示します。 トースト通知は、ユーザーにフィードバックを提供します
react-select
この記事は、GitHubの完全なフロントエンドおよびバックエンドコードリポジトリへのリンクを提供し、簡単な展開とさらなるカスタマイズを促進します。
よくある質問(FAQ):
この記事は、ささやき、Node.jsとの統合、精度、エラー処理、コスト、および貢献機会に関する一般的な質問に対処する包括的なFAQセクションで終了します。
以上がささやき、反応、ノードを使用してスピーチツーテキストWebアプリを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。