> 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 avec React
> **Info**
>
> Suivez les étapes de la [présentation d’Audio Native](/docs/fr/eleven-creative/audio-tools/audio-native) pour
> démarrer avec Audio Native avant de poursuivre ce guide.
Ce guide explique comment intégrer Audio Native à des applications React. Il se concentre sur un projet Next.js, mais les concepts sous-jacents fonctionnent avec toute application basée sur React.
#### Créer un composant React Audio Native
Après avoir suivi les étapes de la [présentation d’Audio Native](/docs/fr/eleven-creative/audio-tools/audio-native), vous disposerez d’un extrait de code d’intégration. Voici un exemple :
**`Extrait de code d’intégration`**
```html title="Extrait de code d’intégration"
```
Nous pouvons extraire les données de cet extrait pour créer un composant React personnalisable.
**`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;
```
Vous trouverez ce composant sur [GitHub](https://github.com/elevenlabs/examples/blob/main/examples/audio-native/react/ElevenLabsAudioNative.tsx).
#### Utiliser le composant Audio Native
Avant d’utiliser le composant sur votre page, vous devez récupérer votre ID utilisateur public depuis l’extrait de code d’origine. Copiez le contenu de `data-publicuserid` depuis l’extrait de code d’intégration et insérez-le dans la prop `publicUserId` du composant.
**`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...
);
}
```
#### Personnaliser le lecteur avec les props du composant
Les props du composant permettent de personnaliser le lecteur. Vous pouvez par exemple modifier la taille, la couleur du texte et la couleur d’arrière-plan.
**`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...
);
}
```