Free, Unlimited OpenAI Text to Speech API
On this page
In this guide, you will learn how to integrate OpenAI TTS to your app for free, without OpenAI developer account or API keys. The OpenAI TTS includes models such as GPT-4o mini TTS, tts-1, and tts-1-hd, all suitable for different workloads.
Puter.js uses the User-Pays model, where users of your application cover their own AI costs. This means you as a developer don't pay anything for your users' usage, making your app practically free to run. You can scale to unlimited users and pay nothing for the TTS usage.
Getting Started
Add Puter.js to your project with a single line:
<script src="https://js.puter.com/v2/"></script>
That's it, you're ready to start integrating OpenAI TTS into your application.
Example 1: Basic text-to-speech
puter.ai.txt2speech("Hello world! This is OpenAI text-to-speech.", {
provider: "openai",
})
.then(audio => {
audio.setAttribute("controls", "");
document.body.appendChild(audio);
});
Full code example:
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.print("Loading...");
puter.ai.txt2speech("Hello world! This is OpenAI text-to-speech.", {
provider: "openai",
})
.then(audio => {
audio.setAttribute("controls", "");
document.body.appendChild(audio);
});
</script>
</body>
</html>
Example 2: Customizing voice
OpenAI provides several built-in voices: alloy, ash, ballad, coral, echo, fable, nova, onyx, sage, and shimmer. Each voice has its own unique character.
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.print("Loading...");
puter.ai.txt2speech("This is using the Nova voice, which has a friendly tone.", {
provider: "openai",
voice: "nova",
model: "gpt-4o-mini-tts"
})
.then(audio => {
audio.setAttribute("controls", "");
document.body.appendChild(audio);
});
</script>
</body>
</html>
Example 3: Set different response format
You can control the output format with the response_format parameter. Available formats include mp3 (default), wav, opus, aac, flac, and pcm.
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.print("Loading...");
puter.ai.txt2speech("This audio will be in WAV format for higher quality.", {
provider: "openai",
voice: "alloy",
response_format: "wav"
})
.then(audio => {
audio.setAttribute("controls", "");
document.body.appendChild(audio);
});
</script>
</body>
</html>
Example 4: Add custom instructions
Use the instructions parameter to provide additional guidance for voice style, tone, pacing, and mood.
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.print("Loading...");
puter.ai.txt2speech("Welcome to our application! We're excited to have you here.", {
provider: "openai",
voice: "shimmer",
model: "gpt-4o-mini-tts",
instructions: "Speak in an enthusiastic and energetic tone, with a slightly faster pace."
})
.then(audio => {
audio.setAttribute("controls", "");
document.body.appendChild(audio);
});
</script>
</body>
</html>
Example 5: Compare models
OpenAI offers three TTS models: gpt-4o-mini-tts (default), tts-1 (optimized for speed), and tts-1-hd (optimized for quality). Here's an interactive example to compare them:
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
textarea {
width: 100%;
height: 80px;
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
margin: 5px;
padding: 10px 15px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
}
button:hover {
background-color: #0056b3;
}
.status {
margin: 10px 0;
padding: 10px;
font-size: 14px;
background-color: #f8f9fa;
border-radius: 4px;
}
</style>
</head>
<body>
<script src="https://js.puter.com/v2/"></script>
<h1>Compare OpenAI TTS Models</h1>
<textarea id="text-input" placeholder="Enter text to convert to speech...">Hello! This is a demonstration of OpenAI text-to-speech models.</textarea>
<div>
<button onclick="playAudio('gpt-4o-mini-tts')">GPT-4o mini TTS</button>
<button onclick="playAudio('tts-1')">TTS-1 (Fast)</button>
<button onclick="playAudio('tts-1-hd')">TTS-1-HD (Quality)</button>
</div>
<div id="status" class="status">Click a button to hear the text in different models.</div>
<script>
const textInput = document.getElementById('text-input');
const statusDiv = document.getElementById('status');
async function playAudio(model) {
const text = textInput.value.trim();
if (!text) {
statusDiv.textContent = 'Please enter some text first!';
return;
}
if (text.length > 3000) {
statusDiv.textContent = 'Text must be less than 3000 characters!';
return;
}
statusDiv.textContent = `Converting with ${model}...`;
try {
const audio = await puter.ai.txt2speech(text, {
provider: "openai",
model: model,
voice: "alloy"
});
statusDiv.textContent = `Playing ${model} audio`;
audio.play();
} catch (error) {
statusDiv.textContent = `Error: ${error.message}`;
}
}
</script>
</body>
</html>
List of OpenAI TTS models
You can use the following OpenAI TTS models with Puter.js:
gpt-4o-mini-tts
tts-1
tts-1-hd
Conclusion
Using Puter.js, you can gain access to OpenAI TTS models without having to set up an OpenAI developer account or manage API keys yourself. And thanks to the User-Pays model, you can add this feature for free to your application, since your users cover their own TTS usage, not you as the developer.
You can find more details about Puter.js text-to-speech API in the documentation.
Related
Free, Serverless AI and Cloud
Start creating powerful web applications with Puter.js in seconds!
Get Started Now