Vad du bygger
En funktion i din Lovable-app som läser upp text med en verklighetstrogen AI-röst. När en användare klickar på en spela-knapp skickas texten till ElevenLabs och spelas upp direkt i webbläsaren.
Innan du börjar
- Ett konto på ElevenLabs med en färdigskapad eller vald röst.
- Ett aktivt app-projekt i Lovable.
- Ditt unika röst-ID (Voice ID) från röstbiblioteket i ElevenLabs.
Steg för steg
- Hämta din API-nyckel – Logga in på ElevenLabs, klicka på din profilbild i det nedre vänstra hörnet och välj alternativet för profilinställningar. Kopiera den långa teckenkoden under rubriken för API-nycklar.
- Öppna inställningarna i Lovable – Gå till ditt projekt i Lovable och klicka på kugghjulet eller fliken för externa kopplingar och miljövariabler (Secrets) i sidomenyn.
- Koppla ihop tjänsterna – Skapa en ny variabel, namnge den till
ELEVENLABS_API_KEYoch klistra in koden du kopierade i det första steget. Spara ändringarna. - Be AI-byggaren skapa spelaren – Skriv en instruktion i Lovables chatt för att bygga själva ljudfunktionen och spela-knappen på din sida.
Lägg till en knapp som läser upp texten på den här sidan med hjälp av ElevenLabs. Använd mitt röst-ID [klistra in ditt Voice ID här] för att generera röstmeddelandet.
- Godkänn ändringarna – Låt Lovable arbeta färdigt med koden. Kontrollera att den nya knappen dyker upp på skärmen och godkänn ändringarna i chatten genom att klicka på knappen för att tillämpa uppdateringen.
- Testa din nya röst – Skriv in en valfri mening i appens textfält, klicka på den nya spela-knappen och lyssna när din utvalda röst strömmar ut ur högtalarna.
Byggloftets tips
- Håll koll på tecknen. ElevenLabs drar poäng (credits) från ditt konto baserat på hur många bokstäver du skickar. Använd korta testmeningar i början så att dina gratispoäng räcker längre.
- Bygge påminner om att hålla din API-nyckel hemlig. Det är en värdehandling som ger tillgång till ditt konto, så klistra bara in den i säkra inställningsfält och aldrig direkt i vanliga chattar.
- Be Lovable att lägga till en liten laddningssnurra på knappen så att användaren förstår att rösten håller på att skapas, eftersom det kan ta en sekund eller två att hämta ljudet.
Vanliga fel
- "Inget ljud hörs när jag klickar": Kontrollera att din API-nyckel är rätt inlagd under inställningarna i Lovable och att du inte har slut på teckenpott på ditt konto hos ElevenLabs.
- "Appen klagar på ogiltigt röst-ID": Kontrollera att det är den unika kodsträngen du har kopierat från röstinställningarna och inte bara det publika namnet på rösten.
Du är klar när…
Du kan klicka på spela-knappen i din app och höra din sparade ElevenLabs-röst läsa upp texten på skärmen.
