App de transcripción con Whisper API — prompt generado con IA
VISTA DE CÓDIGO
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に送信されて文字起こしが行われます。
Resumen del prompt
Esta demostración es una aplicación de transcripción de voz en tiempo real que utiliza la API MediaRecorder del navegador y la API Whisper de OpenAI. Los usuarios pueden grabar audio con el micrófono, visualizar la forma de onda en vivo en un lienzo y recibir los resultados de la transcripción.
La interfaz de usuario adopta un tema oscuro con un diseño limpio, e incluye un campo de entrada para la clave API, botones de inicio/detención de grabación, un lienzo de forma de onda y un área de resultados de transcripción. La visualización del estado proporciona retroalimentación durante la grabación y la transcripción.
Para usar esta demostración, se necesita una clave API de OpenAI con acceso al modelo Whisper. El audio se graba como un blob WebM y se envía directamente a la API Whisper para su transcripción.
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選