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
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?
This is the most awesome tutorial I've ever seen on youtube. Beautifully explained. Just subscribed. Could you create a tutorial on how to build a full website like elevenlabs with elevenlabs api?❤
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.
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
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.
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
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
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?
This is the most awesome tutorial I've ever seen on youtube. Beautifully explained. Just subscribed. Could you create a tutorial on how to build a full website like elevenlabs with elevenlabs api?❤
Thank you
Amazing tutorial, really helps alot
Thank you
Thank you for this. Will it work when hosted on Vercel as there is only an ephemeral file system?
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.
Thank you 😊.
That's a very practical use case.
*Hii..Thank you for the tutorial...is it for unlimited text or after 10000 words need to change key again??? plz reply*
You're welcome.
I think the free / starter plan only includes 10,000 words per month.
Creating a new key won't help unfortunately.
@@leonvanzyl Don't they mean create a new free account and then copy over the new key?
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
Thank you 🙏.
Sounds like a fun tutorial idea. Noted.
You could also reach out to my agency if you'd like assistance sooner.
@@leonvanzyl thanks a lot
i have "Network request failed" on log error and i dont know what its wrong
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 ?
Hey there. Beginners are always welcome here 😊.
Yes, copy the code and follow along. That's the best way to learn.
Thank you so much Leon !!
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?
Thank you very much!
I've been playing with the custom voice and will release a video SOON!
@@leonvanzyl wow thats fantastic. To me it seems the api key is not being used at all with .env.local? or am i wrong
@@leonvanzylIs the video up?
This is a wonderful tutorial. Thank you.
Thank you
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
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.
Glad you figured it out 😀👍
But what about the cost differences between using their GUI?
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).
@@leonvanzyl Got it thanks for the reply! Great tutorial btw.
Can you do a tutorial of this in python please
I could recreate this using a framework like Flask or Django. Thank you for the suggestion.
How can we find voices we created? I am only getting the default voice lists to pop up.
I think you need a paid account in order to see cloned voices.
tysm
how do I put in in a website
Hey there. I assume you are asking how to deploy this to a server online?
Easiest solution would be to deploy to Vercel.
Doea ANYONE know how to do this in Java bruhhh
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
Your settings are correct 👍. At the time of recording, Nextjs 13 was still in beta.
@@leonvanzyl Thanks