> This is a page from the ElevenLabs documentation. For a complete page index, fetch https://elevenlabs.io/docs/llms.txt. For the full documentation in a single file, fetch https://elevenlabs.io/docs/llms-full.txt.
# Audio Native com React
> **Info**
>
> Siga as etapas na [visão geral do Audio Native](/docs/pt/eleven-creative/audio-tools/audio-native) para
> começar a usar o Audio Native antes de continuar com este guia.
Este guia mostra como integrar o Audio Native a apps React. O foco será em um projeto Next.js, mas os conceitos fundamentais funcionam em qualquer aplicação baseada em React.
#### Crie um componente React do Audio Native
Depois de concluir as etapas na [visão geral do Audio Native](/docs/pt/eleven-creative/audio-tools/audio-native), você terá um trecho de código de incorporação. Veja um exemplo:
**`Trecho de código de incorporação`**
```html title="Trecho de código de incorporação"
```
Podemos extrair os dados do trecho para criar um componente React personalizável.
**`ElevenLabsAudioNative.tsx`**
```tsx title="ElevenLabsAudioNative.tsx" maxLines=0
// 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 (
{children ? children : 'Elevenlabs AudioNative Player'}
);
};
export default ElevenLabsAudioNative;
```
O componente acima está disponível no [GitHub](https://github.com/elevenlabs/examples/blob/main/examples/audio-native/react/ElevenLabsAudioNative.tsx).
#### Use o componente do Audio Native
Antes de usar o componente na sua página, você precisa recuperar seu ID público de usuário no trecho de código original. Copie o conteúdo de `data-publicuserid` do trecho de código de incorporação e insira-o na prop `publicUserId` do componente.
**`page.tsx`**
```tsx title="page.tsx" maxLines=0
import { ElevenLabsAudioNative } from './path/to/ElevenLabsAudioNative';
export default function Page() {
return (
Your Page Title
// Insert the public user ID from the embed code snippet
Your page content...
);
}
```
#### Personalize o player com as props do componente
As props do componente podem ser usadas para personalizar o player. Por exemplo, você pode alterar o tamanho, a cor do texto e a cor de fundo.
**`page.tsx`**
```tsx title="page.tsx" maxLines=0
import { ElevenLabsAudioNative } from './path/to/ElevenLabsAudioNative';
export default function Page() {
return (
Your Page Title
Your page content...
);
}
```