ElevenLabs TTS Browser Demo – Single-File HTML Prompt Example
CODE PREVIEW
Prompt
Create a single-file HTML page that demonstrates ElevenLabs Text-to-Speech API. The page should have: a textarea for input, a voice selector (predefined voice IDs), a 'Speak' button, and a playback/stop control. Use the free-tier API key from ElevenLabs. Show loading state during synthesis. Use a clean modern UI with Tailwind CSS (via CDN). Include error handling. The page title should be 'ElevenLabs TTS Demo'.
この単一HTMLファイルで、ElevenLabsの音声合成をブラウザで体験できます。日本語テキストを入力し、3つの声（Rachel、Bella、Patrick）から選択、「再生」ボタンを押すだけで合成音声がAPIからストリーミングされ、すぐに再生されます。Tailwind CSSでダークモダンなUIに。ローディング表示、エラーハンドリング、停止機能も搭載。APIキーのプレースホルダーを自身の無料キーに変更してお試しください。
Prompt Overview
With this single HTML file, you can experience ElevenLabs' speech synthesis directly in your browser. Simply enter Japanese text, select one of three voices (Rachel, Bella, or Patrick), and press the "Play" button. The synthesized audio will stream from the API and play immediately. The UI features a dark modern design built with Tailwind CSS. It also includes loading indicators, error handling, and a stop function. Replace the API key placeholder with your own free key to try it out.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選