> 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 con React
> **Info**
>
> Sigue los pasos de la [descripción general de Audio Native](/docs/es/eleven-creative/audio-tools/audio-native) para
> empezar a usar Audio Native antes de continuar con esta guía.
Esta guía te mostrará cómo integrar Audio Native en aplicaciones de React. Nos centraremos en un proyecto de Next.js, pero los conceptos básicos servirán para cualquier aplicación basada en React.
#### Crea un componente de React para Audio Native
Después de completar los pasos de la [descripción general de Audio Native](/docs/es/eleven-creative/audio-tools/audio-native), tendrás un fragmento de código de inserción. Aquí tienes un ejemplo:
**`Fragmento de código de inserción`**
```html title="Fragmento de código de inserción"
```
Podemos extraer los datos del fragmento para crear un componente de React personalizable.
**`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;
```
Puedes encontrar el componente anterior en [GitHub](https://github.com/elevenlabs/examples/blob/main/examples/audio-native/react/ElevenLabsAudioNative.tsx).
#### Usa el componente de Audio Native
Antes de usar el componente en tu página, debes obtener tu ID de usuario público del fragmento de código original. Copia el contenido de `data-publicuserid` del fragmento de código de inserción e introdúcelo en la prop `publicUserId` del 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...
);
}
```
#### Personaliza el reproductor con las props del componente
Puedes usar las props del componente para personalizar el reproductor. Por ejemplo, puedes cambiar el tamaño, el color del texto y el color de fondo.
**`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...
);
}
```