React용 오디오 네이티브 | ElevenLabs Documentation

이 가이드를 계속 진행하기 전에 오디오 네이티브 개요의 단계에 따라 오디오 네이티브를 시작하세요.

이 가이드에서는 오디오 네이티브를 React 앱에 통합하는 방법을 소개합니다. Next.js 프로젝트를 중심으로 설명하지만, 기본 개념은 모든 React 기반 애플리케이션에 적용할 수 있습니다.

오디오 네이티브 React 컴포넌트 만들기

오디오 네이티브 개요의 단계를 완료하면 임베드 코드 스니펫이 생성됩니다. 다음은 예시 스니펫입니다.

임베드 코드 스니펫

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

스니펫에서 데이터를 추출하여 맞춤 설정 가능한 React 컴포넌트를 만들 수 있습니다.

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;

위 컴포넌트는 GitHub에서 확인할 수 있습니다.

오디오 네이티브 컴포넌트 사용

페이지에서 컴포넌트를 사용하기 전에 원본 코드 스니펫에서 공개 사용자 ID를 가져와야 합니다. 임베드 코드 스니펫의 data-publicuserid 내용을 복사하여 컴포넌트의 publicUserId prop에 삽입합니다.

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

컴포넌트 prop으로 플레이어 맞춤 설정

컴포넌트 prop을 사용해 플레이어를 맞춤 설정할 수 있습니다. 예를 들어 크기, 텍스트 색상, 배경색을 변경할 수 있습니다.

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