> 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 के साथ ऑडियो नेटिव

> **Info**
>
> इस गाइड को आगे पढ़ने से पहले ऑडियो नेटिव शुरू करने के लिए [ऑडियो नेटिव ओवरव्यू](/docs/hi/eleven-creative/audio-tools/audio-native) में दिए गए चरणों का पालन करें।

इस गाइड में बताया गया है कि ऑडियो नेटिव को React ऐप्स में कैसे इंटीग्रेट करें। हमारा फोकस Next.js प्रोजेक्ट पर होगा, लेकिन मूल कॉन्सेप्ट किसी भी React आधारित एप्लिकेशन में काम करेंगे।

#### ऑडियो नेटिव React कंपोनेंट बनाएं

[ऑडियो नेटिव ओवरव्यू](/docs/hi/eleven-creative/audio-tools/audio-native) में दिए गए चरण पूरे करने के बाद, आपके पास एक एम्बेड कोड स्निपेट होगा। यहां एक उदाहरण स्निपेट दिया गया है:

**`एम्बेड कोड स्निपेट`**

```html title="एम्बेड कोड स्निपेट"
  <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`**

```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 (
    <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](https://github.com/elevenlabs/examples/blob/main/examples/audio-native/react/ElevenLabsAudioNative.tsx) पर उपलब्ध है।

#### ऑडियो नेटिव कंपोनेंट का इस्तेमाल करें

अपने पेज पर कंपोनेंट इस्तेमाल करने से पहले, आपको मूल कोड स्निपेट से अपनी पब्लिक यूज़र ID लेनी होगी। एम्बेड कोड स्निपेट से `data-publicuserid` की सामग्री कॉपी करें और उसे कंपोनेंट के `publicUserId` प्रॉप में डालें।

**`page.tsx`**

```tsx title="page.tsx" maxLines=0
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>
  );
}
```

#### कंपोनेंट प्रॉप्स से प्लेयर कस्टमाइज़ करें

प्लेयर कस्टमाइज़ करने के लिए कंपोनेंट प्रॉप्स का इस्तेमाल किया जा सकता है। उदाहरण के लिए, आप साइज़, टेक्स्ट रंग और बैकग्राउंड रंग बदल सकते हैं।

**`page.tsx`**

```tsx title="page.tsx" maxLines=0
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>
  );
}
```