> 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.
# ReactでAudio Nativeを使用
> **Info**
>
> このガイドを続ける前に、[Audio Nativeの概要](/docs/ja/eleven-creative/audio-tools/audio-native)の手順に従って、
> Audio Nativeを使い始めてください。
このガイドでは、Audio NativeをReactアプリに統合する方法を紹介します。Next.jsプロジェクトを中心に説明しますが、基本的な考え方はReactベースのあらゆるアプリケーションに適用できます。
#### Audio NativeのReactコンポーネントを作成する
[Audio Nativeの概要](/docs/ja/eleven-creative/audio-tools/audio-native)の手順を完了すると、埋め込みコードのスニペットが表示されます。以下はその例です。
**`Embed code snippet`**
```html title="Embed code snippet"
```
スニペットからデータを抽出して、カスタマイズ可能なReactコンポーネントを作成できます。
**`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 (
{children ? children : 'Elevenlabs AudioNative Player'}
);
};
export default ElevenLabsAudioNative;
```
上記のコンポーネントは[GitHub](https://github.com/elevenlabs/examples/blob/main/examples/audio-native/react/ElevenLabsAudioNative.tsx)で確認できます。
#### Audio Nativeコンポーネントを使用する
ページでコンポーネントを使用する前に、元のコードスニペットからパブリックユーザーIDを取得する必要があります。埋め込みコードスニペットの`data-publicuserid`の内容をコピーし、コンポーネントの`publicUserId`プロパティに入力してください。
**`page.tsx`**
```tsx title="page.tsx" maxLines=0
import { ElevenLabsAudioNative } from './path/to/ElevenLabsAudioNative';
export default function Page() {
return (
Your Page Title
// Insert the public user ID from the embed code snippet
Your page content...
);
}
```
#### コンポーネントプロパティでプレーヤーをカスタマイズする
コンポーネントプロパティを使ってプレーヤーをカスタマイズできます。たとえば、サイズ、テキストの色、背景色を変更できます。
**`page.tsx`**
```tsx title="page.tsx" maxLines=0
import { ElevenLabsAudioNative } from './path/to/ElevenLabsAudioNative';
export default function Page() {
return (
Your Page Title
Your page content...
);
}
```