Unlock the Power of Text-to-Speech AI: ElevenLabs Tutorial for Beginners

#elevenlabs #texttospeech #aivoice #aivoiceover #aivoices
In this video you will learn how to use the Elevenlabs Text to Speech API in your very own applications.
☕ Buy me a coffee:
www.buymeacoffee.com/leonvanzyl
Useful links:
Source code: github.com/leonvanzyl/Elevenl...
Elevenlabs: elevenlabs.io
Chat with Like Minded Individuals on Discord:
/ discord
Chapters:
00:00 - Introduction
00:28 - Sample Project
00:55 - Prerequisites
01:42 - Project setup
03:15 - Building the frontend
11:18 - Elevenlabs API key
12:49 - Environment Variable File
13:32 - Elevenlabs API Route
22:14 - Calling the Route API from Frontend
29:31 - Calling the Voices API
34:55 - Conclusion
35:10 - 1000 Subs Thanks

[@leonvanzyl]

At the time of recording the video, there is a known bug with the NextJS setup. If you receive the following error message after adding "USE CLIENT" in the PAGE.JS file: "undefined" is not valid JSON Then run the following command in the terminal to update Next to the latest version, which includes a fix for this. npm install next@canary

[@ultrasrock]

One question, we are building something like this, but the voice that goes in my frontend is way more robotic than the one in the 11labs page. Do you know how we get the same voice texture?

[@hypergon123]

Amazing tutorial, really helps alot

[@leonvanzyl]

Thank you

[@nootopian]

Thank you for this. Will it work when hosted on Vercel as there is only an ephemeral file system?

[@ju4n4lvar3z3]

i have "Network request failed" on log error and i dont know what its wrong

[@an802adam]

Another amazing tutorial! I'm thinking about using the Response variable in conjunction with the ChatGPT response value from my application's API to feed the TTS application and have the audio auto play on load. This would create a talking ChatGPT interaction.

[@leonvanzyl]

Thank you 😊. That's a very practical use case.

[@quilloai]

Hello my i know how can i play it on the live page server? because when my project deployed at vercel the fs file mp3 won't work

[@HansScharler]

This is a wonderful tutorial. Thank you.

[@leonvanzyl]

Thank you

[@ahmedsinger9435]

tysm

[@programtracer7868]

Hey man this was very helpful and you're an excellent instructor. Do you have any idea how to get my custom or generated voices to show up?

[@leonvanzyl]

Thank you very much! I've been playing with the custom voice and will release a video SOON!

[@programtracer7868]

@@leonvanzyl wow thats fantastic. To me it seems the api key is not being used at all with .env.local? or am i wrong

[@timelinecode2600]

@@leonvanzylIs the video up?

[@ShaunyTravels.]

Great video ! ek is n baie new beginner ! If i copy your source code do i follow along and make the changes with you correct ?

[@leonvanzyl]

Hey there. Beginners are always welcome here 😊. Yes, copy the code and follow along. That's the best way to learn.

[@ShaunyTravels.]

Thank you so much Leon !!

[@GI_Jeaux]

Everything is working for me except for the voice and the files saving. Any idea what I could be doing wrong? Update: got it working. I think I had the API key in wrong or something.

[@leonvanzyl]

Glad you figured it out 😀👍

[@doston8795]

Hey it is great tut buddy cam you advise me i wanna connect openai to elevenlab in nextjs 14 i wanna make people click start button and open ai generate questions and asking them using eleven lab user can hear the questions and user can record their voice answer and open AI give them feedback in text. Please can you help i can find much from internet thank you

[@leonvanzyl]

Thank you 🙏. Sounds like a fun tutorial idea. Noted. You could also reach out to my agency if you'd like assistance sooner.

[@doston8795]

@@leonvanzyl thanks a lot

[@soly4924]

How can we find voices we created? I am only getting the default voice lists to pop up.

[@leonvanzyl]

I think you need a paid account in order to see cloned voices.

[@tadimakwindi8808]

Doea ANYONE know how to do this in Java bruhhh

[@authorityinjesus]

*Hii..Thank you for the tutorial...is it for unlimited text or after 10000 words need to change key again??? plz reply*

[@leonvanzyl]

You're welcome. I think the free / starter plan only includes 10,000 words per month. Creating a new key won't help unfortunately.

[@Squared_Phoenix]

@@leonvanzyl Don't they mean create a new free account and then copy over the new key?

[@Camxlare]

But what about the cost differences between using their GUI?

[@leonvanzyl]

I believe the cost is the same, whether you're using the GUI or the API. The cost is based on the amount of tokens (basically words).

[@Camxlare]

@@leonvanzyl Got it thanks for the reply! Great tutorial btw.

[@stizix7137]

Can you do a tutorial of this in python please

[@leonvanzyl]

I could recreate this using a framework like Flask or Django. Thank you for the suggestion.

[@gilbertobalderas6043]

how do I put in in a website

[@leonvanzyl]

Hey there. I assume you are asking how to deploy this to a server online? Easiest solution would be to deploy to Vercel.

[@sandroavieira]

The commands were different here, did I make the right choices? sorry for the newbie question... √ What is your project named? ... elevenlabs √ Would you like to use TypeScript with this project? ... NO /yes √ Would you like to use ESLint with this project? ... NO /yes √ Would you like to use Tailwind CSS with this project? ... no/ YES √ Would you like to use `src/` directory with this project? ... NO /yes √ Use App Router (recommended)? ... no/ YES √ Would you like to customize the default import alias? » no/ YES √ What import alias would you like configured? ... @/* Creating a new Next.js app in ElevenLabs\elevenlabs. Using npm. Initializing project with template: app-tw Installing dependencies: - react - react-dom - next - tailwindcss - postcss - autoprefixer added 108 packages, and audited 109 packages in 13s 21 packages are looking for funding run `npm fund` for details found 0 vulnerabilities

[@leonvanzyl]

Your settings are correct 👍. At the time of recording, Nextjs 13 was still in beta.

[@sandroavieira]

@@leonvanzyl Thanks