Build an AI Voice Generator App with AI Pass SDK

Eiliya · March 15, 2026 · 4 min read · tutorial

Build an AI Voice Generator App with AI Pass SDK

Text-to-speech apps are in high demand — creators, developers, teachers, and accessibility champions all benefit from them. This friendly guide shows you how to build a polished TTS app with the AI Pass SDK in under an hour. Plus, if you’re new, you can kick things off with $1 free credit to try things out.

Step 1: Get Your Client ID

Sign up at aipass.one
Developer Dashboard → OAuth2 Clients → Create New
Copy your Client ID (client_XXXXXXXX)

A quick note: you’ll use this Client ID to connect your app to AI Pass. Keep it handy.

Step 2: Build the App

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Voice Generator</title>
  <link href="https://aipass.one/aipass-ui.css" rel="stylesheet">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: system-ui, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; }
    .container { max-width: 700px; margin: 40px auto; padding: 20px; }
    h1 { font-size: 2rem; margin-bottom: 8px; color: #f1f5f9; }
    .subtitle { color: #94a3b8; margin-bottom: 28px; }
    label { display: block; font-weight: 600; font-size: 13px; color: #94a3b8;
      text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
    textarea {
      width: 100%; padding: 14px; background: #1e293b; border: 1px solid #334155;
      border-radius: 10px; color: #e2e8f0; font-size: 15px; resize: vertical;
      height: 160px; line-height: 1.6; margin-bottom: 20px;
    }
    .voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
    @media(max-width:500px) { .voice-grid { grid-template-columns: 1fr 1fr; } }
    .voice-card {
      padding: 12px; background: #1e293b; border: 2px solid #334155;
      border-radius: 10px; cursor: pointer; text-align: center; transition: all 0.2s;
    }
    .voice-card:hover { border-color: #6366f1; }
    .voice-card.selected { border-color: #6366f1; background: #1e1b4b; }
    .voice-name { font-weight: 700; font-size: 14px; color: #e2e8f0; }
    .voice-desc { font-size: 11px; color: #64748b; margin-top: 3px; }
    .gen-btn {
      background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white;
      border: none; padding: 14px 32px; border-radius: 10px; font-size: 16px;
      font-weight: 700; width: 100%; cursor: pointer; transition: opacity 0.2s;
    }
    .gen-btn:hover { opacity: 0.9; }
    .gen-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    #audio-section { margin-top: 24px; display: none; }
    audio { width: 100%; margin-bottom: 12px; }
    .dl-btn {
      display: block; text-align: center; background: #1e293b; border: 1px solid #334155;
      color: #e2e8f0; padding: 10px; border-radius: 8px; cursor: pointer;
      text-decoration: none; font-size: 14px; transition: background 0.2s;
    }
    .dl-btn:hover { background: #334155; }
    .status { color: #94a3b8; font-size: 14px; margin-top: 12px; text-align: center; }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎙️ AI Voice Generator</h1>
    <p class="subtitle">Type anything — hear it in a professional AI voice.</p>

    <label>Your text</label>
    <textarea id="text" placeholder="Type or paste the text you want to convert to speech..."></textarea>

    <label>Choose a voice</label>
    <div class="voice-grid">
      <div class="voice-card selected" data-voice="nova" onclick="selectVoice(this)">
        <div class="voice-name">Nova</div>
        <div class="voice-desc">Warm · Female</div>
      </div>
      <div class="voice-card" data-voice="alloy" onclick="selectVoice(this)">
        <div class="voice-name">Alloy</div>
        <div class="voice-desc">Neutral · Versatile</div>
      </div>
      <div class="voice-card" data-voice="echo" onclick="selectVoice(this)">
        <div class="voice-name">Echo</div>
        <div class="voice-desc">Warm · Male</div>
      </div>
      <div class="voice-card" data-voice="fable" onclick="selectVoice(this)">
        <div class="voice-name">Fable</div>
        <div class="voice-desc">Expressive · British</div>
      </div>
      <div class="voice-card" data-voice="onyx" onclick="selectVoice(this)">
        <div class="voice-name">Onyx</div>
        <div class="voice-desc">Deep · Authoritative</div>
      </div>
      <div class="voice-card" data-voice="shimmer" onclick="selectVoice(this)">
        <div class="voice-name">Shimmer</div>
        <div class="voice-desc">Clear · Upbeat</div>
      </div>
    </div>

    <button class="gen-btn" id="genBtn" onclick="generateVoice()">Generate Voice 🎤</button>
    <div id="status" class="status"></div>

    <div id="audio-section">
      <label style="margin-top:20px">Your audio</label>
      <audio id="audioPlayer" controls></audio>
      <a id="dlBtn" class="dl-btn" download="voice.mp3">⬇️ Download MP3</a>
    </div>
  </div>

  <script src="https://aipass.one/aipass-sdk.js"></script>
  <script>
    AiPass.initialize({
      clientId: 'YOUR_CLIENT_ID',
      requireLogin: true,
      darkMode: true
    });

    let selectedVoice = 'nova';

    function selectVoice(el) {
      document.querySelectorAll('.voice-card').forEach(c => c.classList.remove('selected'));
      el.classList.add('selected');
      selectedVoice = el.dataset.voice;
    }

    async function generateVoice() {
      const text = document.getElementById('text').value.trim();
      if (!text) return alert('Please enter some text first.');
      if (text.length > 4000) return alert('Text is too long (max 4000 chars).');

      const btn = document.getElementById('genBtn');
      const status = document.getElementById('status');
      btn.disabled = true;
      status.textContent = 'Generating your voice...';

      try {
        const r = await AiPass.generateSpeech({
          model: 'tts-1',
          input: text,
          voice: selectedVoice
        });

        // r should be audio blob or URL
        const audioUrl = URL.createObjectURL(r);
        const player = document.getElementById('audioPlayer');
        player.src = audioUrl;

        const dlBtn = document.getElementById('dlBtn');
        dlBtn.href = audioUrl;

        document.getElementById('audio-section').style.display = 'block';
        status.textContent = '✅ Voice generated!';
      } catch (err) {
        status.textContent = 'Error: ' + err.message;
      } finally {
        btn.disabled = false;
      }
    }
  </script>
</body>
</html>

Step 3: Deploy

Option A: Host anywhere — Netlify (free), GitHub Pages, Vercel, or your own server. AI Pass handles billing.

Option B: Publish on the AI Pass catalog via Developer Dashboard. Use the </> embed button to get an easy iframe integration.

Revenue

Users pay per generation. You earn a 50% commission on every credit spent. Voice generation is popular with content creators who generate often — that means steady, recurring revenue for you.

Extensions to Build

Speed control — add 0.5x to 2x playback speed options
Long-form text — split long documents into chunks and stitch audio
Voice preview — play a sample sentence for each voice before generating
Pronunciation guide — let users add phonetic hints for tricky words

See the live version: AI Voice Generator →

Build an AI Voice Generator App with AI Pass SDK

Build an AI Voice Generator App with AI Pass SDK

Step 1: Get Your Client ID

Step 2: Build the App

Step 3: Deploy

Revenue

Extensions to Build

Related Apps