Whisper API Speech-to-Text Web App Prompt & Code Example
CODE PREVIEW
エディタを読み込み中…
P
Prompt
Create a web application that records audio from the microphone and sends it to the OpenAI Whisper API for transcription. The page should have a 'Start Recording' button, a 'Stop Recording' button, and a text area to display the transcribed text. Use vanilla JavaScript with a modern UI design. Include a loading spinner while waiting for the API response. Use a placeholder API key for demonstration purposes.
このプロジェクトは、OpenAIのWhisper APIをWebアプリケーションに統合し、リアルタイムで音声文字起こしを行う方法を示しています。ブラウザのMediaRecorder APIで音声を録音し、Whisperに送信して文字起こし結果を即座に表示します。UIはモダンなガラスモーフィズムデザインで、ローディングスピナーも搭載しユーザー体験を向上させています。
Prompt Overview
This project demonstrates how to integrate OpenAI's Whisper API into a web application for real-time speech transcription. It records audio using the browser's MediaRecorder API, sends it to Whisper, and instantly displays the transcription results. The UI features a modern glassmorphism design and includes a loading spinner to enhance the user experience.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選