Audio Native con React | ElevenLabs Documentation

Segui i passaggi nella panoramica di 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, avrai uno snippet del codice di incorporamento. Ecco uno snippet di esempio:

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

// 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.

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

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

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>
  );
}