Audio Native avec React | ElevenLabs Documentation

Suivez les étapes de la présentation d’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, vous disposerez d’un extrait de code d’intégration. Voici un exemple :

Extrait de code d’intégration

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

Nous pouvons extraire les données de cet extrait pour créer un composant React personnalisable.

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;

Vous trouverez ce composant sur GitHub.

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

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

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

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