Text to speech widget code: read any text aloud on your site
A text to speech widget turns written text into natural audio on your page. Learn how to embed the speech widget code, pick a voice and keep the cost under control.
Published:
A text to speech widget lets visitors type or paste text and hear it read aloud in a natural voice. It is useful for pronunciation help, quick audio drafts, language learning and anyone who prefers listening to reading. With api14 you add it with the same one line embed code as every other widget.
What visitors get
- A text box and a button, labeled in your words.
- Generated speech that plays directly in the widget.
- A Download link, so the audio can be saved and reused.
The voice and model are your choice. Visitors never see your API key, your balance or the model's raw error messages.
Embed the speech widget
Create a widget in Widgets, choose Speech as the type, then save and copy the code:
<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>
Place it where the player should appear, or render it into an element with data-target. Speech widgets default to a height of 420px; change it with data-height. The Floating button placement opens the widget from a corner button instead.
Choose a model and a voice
The model picker lists the speech models with their prices. Once you pick a model, the Voice field shows the voices that model offers. If you leave the voice empty, the widget uses the model's first voice, because some providers require an explicit voice.
Listen to a few voices in the editor preview before you decide. A voice that sounds right for a children's site may not suit a law firm.
Choose the API key
Every widget runs under one of your API keys. Pick one in the editor, or choose Create new API key, the last option in the list, to make a key just for this widget. The key's daily spend limit, request rate and allowed models then apply to every request the widget makes, and its usage is recorded under that key.
Good practices
- Use the placeholder to explain what visitors can paste, for example "Paste up to a paragraph of text".
- Set a daily spend limit on the widget. Speech is priced by the model, and long inputs cost more than short ones.
- Under Settings, Widget controls, limit how many requests one visitor can send per day.
- List your domains under Settings, Widget sites so the widget only runs on your pages.
Try a speech widget without an account on the widgets page, and read about speech models in the speech docs.