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:

1// ElevenLabsAudioNative.tsx
2
3'use client';
4import { useEffect } from 'react';
5
6export type ElevenLabsProps = {
7    publicUserId: string;
8    textColorRgba?: string;
9    backgroundColorRgba?: string;
10    size?: 'small' | 'large';
11    children?: React.ReactNode;
12};
13
14export const ElevenLabsAudioNative = ({
15    publicUserId,
16    size,
17    textColorRgba,
18    backgroundColorRgba,
19    children,
20}: ElevenLabsProps) => {
21    useEffect(() => {
22        const script = document.createElement('script');
23
24        script.src = 'https://elevenlabs.io/player/audioNativeHelper.js';
25        script.async = true;
26        document.body.appendChild(script);
27
28        return () => {
29        document.body.removeChild(script);
30        };
31    }, []);
32
33    return (
34        <div
35        id="elevenlabs-audionative-widget"
36        data-height={size === 'small' ? '90' : '120'}
37        data-width="100%"
38        data-frameborder="no"
39        data-scrolling="no"
40        data-publicuserid={publicUserId}
41        data-playerurl="https://elevenlabs.io/player/index.html"
42        data-small={size === 'small' ? 'True' : 'False'}
43        data-textcolor={textColorRgba ?? 'rgba(0, 0, 0, 1.0)'}
44        data-backgroundcolor={backgroundColorRgba ?? 'rgba(255, 255, 255, 1.0)'}
45        >
46        {children ? children : 'Elevenlabs AudioNative Player'}
47        </div>
48    );
49};
50
51export default ElevenLabsAudioNative;

Here’s a link to the component on GitHub - ElevenLabsAudioNative.tsx

1'use client';
2import { useEffect } from 'react';

We add the use client directive at the top of the file. This is mainly for Next.js, as we are using useEffect which can only be used in client side components.

1export type ElevenLabsProps = {
2  publicUserId: string;
3  textColorRgba?: string;
4  backgroundColorRgba?: string;
5  size?: "small" | "large";
6  children?: React.ReactNode;
7};

Helpful type for the props so that we can specify the public user ID (described later), customize colors and size, and set a default content if the player hasn’t loaded. You can ignore this if you’re not using TypeScript (TypeScript is great however!).

1useEffect(() => {
2  const script = document.createElement("script");
3
4  script.src = "https://elevenlabs.io/player/audioNativeHelper.js";
5  script.async = true;
6  document.body.appendChild(script);
7
8  return () => {
9    document.body.removeChild(script);
10  };
11}, []);

In order to load the Audio Native player, we use the useEffect hook to dynamically append a script tag to the body and set the source to the URL of the Audio Native helper script. When the component is dismounted, we make sure to remove the script tag from the body. This ensures it doesn’t get loaded twice if we remount the component.

1<div
2  id="elevenlabs-audionative-widget"
3  data-height={size === "small" ? "90" : "120"}
4  data-width="100%"
5  data-frameborder="no"
6  data-scrolling="no"
7  data-publicuserid={publicUserId}
8  data-playerurl="https://elevenlabs.io/player/index.html"
9  data-small={size === "small" ? "True" : "False"}
10  data-textcolor={textColorRgba ?? "rgba(0, 0, 0, 1.0)"}
11  data-backgroundcolor={backgroundColorRgba ?? "rgba(255, 255, 255, 1.0)"}
12>
13  {children ? children : "Elevenlabs AudioNative Player"}
14</div>

Here is our main div element which will be where our Audio Native player will be placed. The children of the component can be used to show content before the player has been loaded (e.g. Loading audio player…).

React components are rendered and managed entirely in JavaScript, and their rendering lifecycle is controlled by React’s virtual DOM. When you try to include a script tag directly within a React component’s JSX, it doesn’t behave as it would when included directly in an HTML file. React’s virtual DOM does not execute script tags inserted into the DOM as part of component rendering. This is a security feature to prevent unintended or malicious code execution.

This is why, if we were to just paste the Audio Native code snippet into our React application, it would not work.

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.

Built with