Whisper API Voice Transcription App — AI-Generated Prompt
CODE PREVIEW
Prompt
Create a single HTML file with embedded CSS and JS that uses the browser's MediaRecorder API to record audio from the microphone, then sends the audio blob to OpenAI's Whisper API (configurable API key) for transcription. Show a real-time waveform visualization using Canvas. Include a start/stop recording button, a transcription result area, and a status indicator. Style with a modern dark theme.
このデモは、ブラウザのMediaRecorder APIとOpenAIのWhisper APIを使用したリアルタイム音声文字起こしアプリケーションです。ユーザーはマイクで音声を録音し、キャンバス上でライブ波形を確認しながら、文字起こし結果を受け取ることができます。
UIはダークテーマでクリーンなレイアウトを採用し、APIキー入力フィールド、録音開始/停止ボタン、波形キャンバス、文字起こし結果エリアを備えています。ステータス表示により、録音中や文字起こし中のフィードバックを提供します。
このデモを使用するには、WhisperモデルにアクセスできるOpenAI APIキーが必要です。音声はWebMブロブとして録音され、そのままWhisper APIに送信されて文字起こしが行われます。
Prompt Overview
This demo is a real-time speech transcription application that uses the browser's MediaRecorder API and OpenAI's Whisper API. Users can record audio with their microphone, view live waveforms on a canvas, and receive transcription results.
The UI features a clean layout with a dark theme, including an API key input field, record start/stop buttons, a waveform canvas, and a transcription result area. Status indicators provide feedback during recording and transcription.
To use this demo, you need an OpenAI API key with access to the Whisper model. Audio is recorded as a WebM blob and sent directly to the Whisper API for transcription.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選