Audio Native with React

Integrate Audio Native into your React apps.

Follow the steps in the Audio Native overview to get started with Audio Native before continuing with this guide.

This guide will show how to integrate Audio Native into React apps. The focus will be on a Next.js project, but the underlying concepts will work for any React based application.

1

Create an Audio Native React component

After completing the steps in the Audio Native overview, you’ll have an embed code snippet. Here’s an example snippet:

Embed code snippet
1  <div
2    id="elevenlabs-audionative-widget"
3    data-height="90"
4    data-width="100%"
5    data-frameborder="no"
6    data-scrolling="no"
7    data-publicuserid="public-user-id"
8    data-playerurl="https://elevenlabs.io/player/index.html"
9    data-projectid="project-id"
10  >
11    Loading the <a href="https://elevenlabs.io/text-to-speech" target="_blank" rel="noopener">Elevenlabs Text to Speech</a> AudioNative Player...
12  </div>
13  <script src="https://elevenlabs.io/player/audioNativeHelper.js" type="text/javascript"></script>

We can extract the data from the snippet to create a customizable React component.

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

The above component can be found on GitHub.

2

Use the Audio Native component

Before using the component on your page, you need to retrieve your public user ID from the original code snippet. Copy the contents of data-publicuserid from the embed code snippet and insert it into the publicUserId prop of the component.

page.tsx
1import { ElevenLabsAudioNative } from './path/to/ElevenLabsAudioNative';
2
3export default function Page() {
4  return (
5    <div>
6      <h1>Your Page Title</h1>
7
8      // Insert the public user ID from the embed code snippet
9      <ElevenLabsAudioNative publicUserId="<your-public-user-id>" />
10
11      <p>Your page content...</p>
12    </div>
13  );
14}
3

Customize the player with component props

The component props can be used to customize the player. For example, you can change the size, text color, and background color.

page.tsx
1import { ElevenLabsAudioNative } from './path/to/ElevenLabsAudioNative';
2
3export default function Page() {
4  return (
5    <div>
6      <h1>Your Page Title</h1>
7
8      <ElevenLabsAudioNative
9        publicUserId="<your-public-user-id>"
10        size="small"
11        textColorRgba="rgba(255, 255, 255, 1.0)"
12        backgroundColorRgba="rgba(0, 0, 0, 1.0)"
13      />
14
15      <p>Your page content...</p>
16    </div>
17  );
18}
Built with