Audio Native com React | ElevenLabs Documentation

Siga as etapas na visão geral do 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, você terá um trecho de código de incorporação. Veja um exemplo:

Trecho de código de incorporação

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

Podemos extrair os dados do trecho para criar um componente React personalizável.

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;

O componente acima está disponível no GitHub.

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

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

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

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