Audio Native with React

Integrate Audio Native into your React apps.

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.

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

  <div
    id="elevenlabs-audionative-widget"
    data-height="90"
    data-width="100%"
    data-frameborder="no"
    data-scrolling="no"
    data-publicuserid="public-user-id"
    data-playerurl="https://elevenlabs.io/player/index.html"
    data-projectid="project-id"
  >
    Loading the <a href="https://elevenlabs.io/text-to-speech" target="_blank" rel="noopener">Elevenlabs Text to Speech</a> AudioNative Player...
  </div>
  <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

// ElevenLabsAudioNative.tsx

'use client';

import { useEffect } from 'react';

export type ElevenLabsProps = {
  publicUserId: string;
  textColorRgba?: string;
  backgroundColorRgba?: string;
  size?: 'small' | 'large';
  children?: React.ReactNode;
};

export const ElevenLabsAudioNative = ({
  publicUserId,
  size,
  textColorRgba,
  backgroundColorRgba,
  children,
}: ElevenLabsProps) => {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = 'https://elevenlabs.io/player/audioNativeHelper.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div
      id="elevenlabs-audionative-widget"
      data-height={size === 'small' ? '90' : '120'}
      data-width="100%"
      data-frameborder="no"
      data-scrolling="no"
      data-publicuserid={publicUserId}
      data-playerurl="https://elevenlabs.io/player/index.html"
      data-small={size === 'small' ? 'True' : 'False'}
      data-textcolor={textColorRgba ?? 'rgba(0, 0, 0, 1.0)'}
      data-backgroundcolor={backgroundColorRgba ?? 'rgba(255, 255, 255, 1.0)'}
    >
      {children ? children : 'Elevenlabs AudioNative Player'}
    </div>
  );
};

export default ElevenLabsAudioNative;

The above component can be found on GitHub.

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

import { ElevenLabsAudioNative } from './path/to/ElevenLabsAudioNative';

export default function Page() {
  return (
    <div>
      <h1>Your Page Title</h1>

      // Insert the public user ID from the embed code snippet
      <ElevenLabsAudioNative publicUserId="<your-public-user-id>" />

      <p>Your page content...</p>
    </div>
  );
}

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

import { ElevenLabsAudioNative } from './path/to/ElevenLabsAudioNative';

export default function Page() {
  return (
    <div>
      <h1>Your Page Title</h1>

      <ElevenLabsAudioNative
        publicUserId="<your-public-user-id>"
        size="small"
        textColorRgba="rgba(255, 255, 255, 1.0)"
        backgroundColorRgba="rgba(0, 0, 0, 1.0)"
      />

      <p>Your page content...</p>
    </div>
  );
}

Search documentation

Help Center

Audio Native with React

Help Center