How to set up an ElevenLabs audio player for your articles in React (Next.js, Vite)
Here’s a guide on how you can use Audio Native in your React projects. I’ll be using Next.js, but this process will work for any React project.
Audio Native is an embedded audio player designed to vocalize the content of web pages through ElevenLabs’ Text to Speech technology, as shown below.
Activate Audio Native within ElevenLabs
First you need to make sure that you activate Audio Native in your ElevenLabs account. After signing in, visit: https://elevenlabs.io/audio-native
Select “Click to start with Audio Native” to begin the setup. Don’t worry about completing all the sections in the setup, as we just need to get to the code snippet at the end.
Once you’ve gone through the setup, you should see a page like this:
This is the code snippet that is used to embed Audio Native on a normal website such as Wordpress, Ghost, or Webflow. However, you can’t use this snippet directly in React.
Creating the Audio Native React component
Here’s a handy component that you can reuse across your project:
Get the public user ID from the Audio Native snippet
Before you can use this component, you’ll need to retrieve your public user ID from the code snippet. Go back to https://elevenlabs.io/audio-native, and in the code snippet, copy the property called publicuserid
.
This public user ID is used to identify your Audio Native project.
Use the Audio Native component
Now that you have the public user ID, you can use the component on your page. Simply import it, then pass it the public user ID from the previous step.
Preview
Start your development server, if you haven’t already, and view the page. You should see something similar to the following, stating that the URL is not allowed. (If you don’t see anything, please see the Troubleshooting section below to perform a hard refresh)
Troubleshooting
If you don’t see the Audio Native player, try doing a hard refresh. This can sometimes be an issue because of the development server not properly reloading the script.
In Chrome it’s: (⌘ or Ctrl) + Shift + R
Why am I seeing “URL not allowed”?
Here’s what’s happening behind the scenes. Remember that script we loaded in the useEffect hook? This script is trying to scrape the content from your page to get all the text and convert it to audio. However, it can’t load your page because it’s on localhost
. Audio Native can only process pages that are publicly accessible on the internet.
Local testing with ngrok
This is where a service such as ngrok can help us. ngrok is a way to get your site on localhost to map to a public URL on the internet. They have a free tier, so visit their website https://ngrok.com, create an account and install it.
Here’s their getting started guide - https://ngrok.com/docs/getting-started
Once you have it installed, you can use a command similar to the one below to point your local React project to a public URL with ngrok. I’m running Next.js locally on port 3000
, so here’s the command I run. Your details may vary.
Running this command will give you a URL that you can use in the next step.
Update the allowed URLs to include the ngrok URL
Go to the Audio Native section: https://elevenlabs.io/audio-native
Select the “My Websites” tab.
Enter the ngrok URL (from the previous step) in the “Allowed URLs” section.
This ensures that your player can only show on websites that you specify. This is very important, as someone else may otherwise be able to use your public user ID on their website.
Now visit your ngrok URL, you should see Audio Native processing your content. In the background, we are creating a project in your ElevenLabs account just for your page. This project contains the text from your page and converts it to audio.
View the newly created project here: https://elevenlabs.io/app/projects
Deploy to production
Make sure to also add the URL of your website to the allowed URLs once you’ve deployed your React app and you’re ready to push to production.
We only used ngrok for local development, it’s not needed for public facing URLs as ElevenLabs will directly grab the content from the website.
Updating audio content
When updating the content on a page, you may notice that the audio from the Audio Native player won’t update automatically.
In order to update the audio you’ll have to go to the project in ElevenLabs and update the content from there manually. https://elevenlabs.io/app/projects
Conclusion
Now that you have Audio Native working in your React project, go ahead and add the component to more pages on your website to begin converting content into high quality audio for your visitors.