> 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**
>
> Segui i passaggi nella [panoramica di Audio Native](/docs/it/eleven-creative/audio-tools/audio-native) per
> iniziare a usare Audio Native prima di continuare con questa guida.

Questa guida mostra come integrare Audio Native nelle app React. Ci concentreremo su un progetto Next.js, ma i concetti di base funzioneranno per qualsiasi applicazione basata su React.

#### Crea un componente React per Audio Native

Dopo aver completato i passaggi nella [panoramica di Audio Native](/docs/it/eleven-creative/audio-tools/audio-native), avrai uno snippet del codice di incorporamento. Ecco uno snippet di esempio:

**`Snippet del codice di incorporamento`**

```html title="Snippet del codice di incorporamento"
  <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>
```

Possiamo estrarre i dati dallo snippet per creare un componente React personalizzabile.

**`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 (
    <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;
```

Puoi trovare il componente precedente su [GitHub](https://github.com/elevenlabs/examples/blob/main/examples/audio-native/react/ElevenLabsAudioNative.tsx).

#### Utilizza il componente Audio Native

Prima di utilizzare il componente nella tua pagina, devi recuperare il tuo ID utente pubblico dallo snippet di codice originale. Copia il contenuto di `data-publicuserid` dallo snippet del codice di incorporamento e inseriscilo nella prop `publicUserId` del componente.

**`page.tsx`**

```tsx title="page.tsx" maxLines=0
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>
  );
}
```

#### Personalizza il lettore con le prop del componente

Puoi utilizzare le prop del componente per personalizzare il lettore. Ad esempio, puoi modificarne le dimensioni, il colore del testo e il colore di sfondo.

**`page.tsx`**

```tsx title="page.tsx" maxLines=0
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>
  );
}
```