Why Choose ElevenLabs AI Voice?

• High‑quality, human‑like speech generation.
• Multiple language and accent options.
• Real‑time streaming for instant feedback.
• Simple RESTful API that fits perfectly with UBOS.tech‘s visual workflow.

Step‑by‑Step Integration Guide

1️⃣ Get an ElevenLabs API Key

Sign up at ElevenLabs and copy your secret API key. Store it securely in the Environment Variables section of your UBOS.tech project.

2️⃣ Create a “Fetch Voice” Block

Drag a Code Block onto your canvas and paste the following JavaScript. The block will call the ElevenLabs endpoint and return an audio URL.

// Replace with your actual API key
const API_KEY = process.env.ELEVENLABS_API_KEY;

// Text you want to synthesize
const text = "Welcome to your new UBOS.tech powered voice assistant!";

// ElevenLabs request
fetch("https://api.elevenlabs.io/v1/text-to-speech/voice-id", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "xi-api-key": API_KEY
  },
  body: JSON.stringify({
    text: text,
    voice_settings: { stability: 0.75, similarity_boost: 0.85 }
  })
})
  .then(res => res.json())
  .then(data => {
    // The audio URL is returned in data.audio_url
    const audioUrl = data.audio_url;
    // Store it in a UBOS variable for later use
    ubos.setVariable("voiceAudio", audioUrl);
  })
  .catch(err => console.error("ElevenLabs error:", err));

3️⃣ Play the Audio in Your UI

Add a simple HTML block where you want the voice to play. Use the variable set in the previous step.

<audio controls autoplay>
  <source src="{{voiceAudio}}" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Publish the page, and you’ll hear the generated speech instantly. You can repeat the fetch block whenever you need new audio—perfect for dynamic notifications, tutorials, or chatbots.

Frequently Asked Questions