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.

First, you’ll need to create and customize your player, whitelist your url, and copy your embed code. If you need help completing those steps, refer to our Audio Native overview.

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.

1import { ElevenLabsAudioNative } from "./path/to/ElevenLabsAudioNative";
2
3export default function Page() {
4  return (
5    <div>
6      <h1>Your Blog Post Title</h1>
7
8      <ElevenLabsAudioNative publicUserId="<your-public-user-id>" />
9
10      <p>Your blog post...</p>
11    </div>
12  );
13}

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.

ngrok http http://localhost:3000

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.