> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-10684810.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Recorder player

> Recorder player component. This is the small player that appears when a recording is done.

<Note>
  We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
</Note>

## Overview

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-overview.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=47ec0e2ee2cca94a41bdebed26f0ffc9" alt="" width="1280" height="542" data-path="images/customization/recorder/recorder-player-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe>
            <VeltRecorderPlayerWireframe.VideoContainer />
            <VeltRecorderPlayerWireframe.AudioContainer />
        </VeltRecorderPlayerWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-wireframe>
            <velt-recorder-player-video-container-wireframe></velt-recorder-player-video-container-wireframe>
            <velt-recorder-player-audio-container-wireframe></velt-recorder-player-audio-container-wireframe>
        </velt-recorder-player-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## VideoContainer

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-video.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=22ef4aed7a78937c742acdc10fe5a6a7" alt="" width="1280" height="542" data-path="images/customization/recorder/recorder-player-video.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer>
            <VeltRecorderPlayerWireframe.VideoContainer.Video />
            <VeltRecorderPlayerWireframe.VideoContainer.Timeline />
            <VeltRecorderPlayerWireframe.VideoContainer.FullScreenButton />
            <VeltRecorderPlayerWireframe.VideoContainer.Overlay />
            <VeltRecorderPlayerWireframe.VideoContainer.Subtitles />
            <VeltRecorderPlayerWireframe.VideoContainer.Avatar />
            <VeltRecorderPlayerWireframe.VideoContainer.Name />
            <VeltRecorderPlayerWireframe.VideoContainer.SubtitlesButton />
            <VeltRecorderPlayerWireframe.VideoContainer.Transcription />
            <VeltRecorderPlayerWireframe.VideoContainer.EditButton />
            <VeltRecorderPlayerWireframe.VideoContainer.CopyLink />
            <VeltRecorderPlayerWireframe.VideoContainer.Delete />
        </VeltRecorderPlayerWireframe.VideoContainer>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-video-container-wireframe>
            <velt-recorder-player-video-wireframe></velt-recorder-player-video-wireframe>
            <velt-recorder-player-timeline-wireframe></velt-recorder-player-timeline-wireframe>
            <velt-recorder-player-full-screen-button-wireframe></velt-recorder-player-full-screen-button-wireframe>
            <velt-recorder-player-overlay-wireframe></velt-recorder-player-overlay-wireframe>
            <velt-recorder-player-subtitles-wireframe></velt-recorder-player-subtitles-wireframe>
            <velt-recorder-player-avatar-wireframe></velt-recorder-player-avatar-wireframe>
            <velt-recorder-player-name-wireframe></velt-recorder-player-name-wireframe>
            <velt-recorder-player-subtitles-button-wireframe></velt-recorder-player-subtitles-button-wireframe>
            <velt-recorder-player-transcription-wireframe></velt-recorder-player-transcription-wireframe>
            <velt-recorder-player-edit-button-wireframe></velt-recorder-player-edit-button-wireframe>
            <velt-recorder-player-copy-link-wireframe></velt-recorder-player-copy-link-wireframe>
            <velt-recorder-player-delete-wireframe></velt-recorder-player-delete-wireframe>
        </velt-recorder-player-video-container-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Video

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-video.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=22ef4aed7a78937c742acdc10fe5a6a7" alt="" width="1280" height="542" data-path="images/customization/recorder/recorder-player-video.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer.Video />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-video-wireframe></velt-recorder-player-video-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Timeline

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-video-timeline.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=bcc9b44013f24dcf8247e34c477581e3" alt="" width="1280" height="290" data-path="images/customization/recorder/recorder-player-video-timeline.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer.Timeline>
            <VeltRecorderPlayerWireframe.VideoContainer.PlayButton />
            <VeltRecorderPlayerWireframe.VideoContainer.Timeline.SeekBar />
        </VeltRecorderPlayerWireframe.VideoContainer.Timeline>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-timeline-wireframe>
            <velt-recorder-player-play-button-wireframe></velt-recorder-player-play-button-wireframe>
            <velt-recorder-player-timeline-seek-bar-wireframe></velt-recorder-player-timeline-seek-bar-wireframe>
        </velt-recorder-player-timeline-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### PlayButton

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-video-playbutton.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=b1f08ab7b5b6d8919f5901a584180799" alt="" width="1280" height="290" data-path="images/customization/recorder/recorder-player-video-playbutton.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer.PlayButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-play-button-wireframe></velt-recorder-player-play-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### SeekBar

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-video-seekbar.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=5029a7e649af70460db3a31338e9f8a4" alt="" width="1280" height="290" data-path="images/customization/recorder/recorder-player-video-seekbar.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer.Timeline.SeekBar />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-timeline-seek-bar-wireframe></velt-recorder-player-timeline-seek-bar-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### FullScreenButton

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-video-minimize.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=915da36279773b43955dd2200b1e9d24" alt="" width="1280" height="290" data-path="images/customization/recorder/recorder-player-video-minimize.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer.FullScreenButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-full-screen-button-wireframe></velt-recorder-player-full-screen-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Overlay

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-video-overlay.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=783a0e13c24a0477fe2ba22b97d0f55b" alt="" width="1280" height="386" data-path="images/customization/recorder/recorder-player-video-overlay.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer.Overlay>
            <VeltRecorderPlayerWireframe.VideoContainer.PlayButton />
        </VeltRecorderPlayerWireframe.VideoContainer.Overlay>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-overlay-wireframe>
            <velt-recorder-player-play-button-wireframe></velt-recorder-player-play-button-wireframe>
        </velt-recorder-player-overlay-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### PlayButton

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-video-playbutton.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=b1f08ab7b5b6d8919f5901a584180799" alt="" width="1280" height="290" data-path="images/customization/recorder/recorder-player-video-playbutton.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer.PlayButton>
            <VeltRecorderPlayerWireframe.VideoContainer.Time />
        </VeltRecorderPlayerWireframe.VideoContainer.PlayButton>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-play-button-wireframe>
            <velt-recorder-player-time-wireframe></velt-recorder-player-time-wireframe>
        </velt-recorder-player-play-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Time

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer.Time />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-time-wireframe></velt-recorder-player-time-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Subtitles

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-video-subtitles.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=9f86125e562eb3bac786753846559762" alt="" width="1280" height="290" data-path="images/customization/recorder/recorder-player-video-subtitles.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer.Subtitles />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-subtitles-wireframe></velt-recorder-player-subtitles-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Avatar

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-video-avatar.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=6175dcf8234fdcfc4a7d666d2aebd287" alt="" width="1280" height="290" data-path="images/customization/recorder/recorder-player-video-avatar.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer.Avatar />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-avatar-wireframe></velt-recorder-player-avatar-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Name

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-video-name.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=40b57f75f9e25f03e3aa83c98506f1c4" alt="" width="1280" height="290" data-path="images/customization/recorder/recorder-player-video-name.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer.Name />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-name-wireframe></velt-recorder-player-name-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### SubtitlesButton

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-video-subtitles-button.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=10745ebb7d2e41e1e4a9f1c6f501e811" alt="" width="1280" height="290" data-path="images/customization/recorder/recorder-player-video-subtitles-button.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer.SubtitlesButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-subtitles-button-wireframe></velt-recorder-player-subtitles-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Transcription

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-video-transcript.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=5b61b887036bfc649d2fb126c3c4a333" alt="" width="1280" height="290" data-path="images/customization/recorder/recorder-player-video-transcript.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer.Transcription />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-transcription-wireframe></velt-recorder-player-transcription-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### EditButton

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer.EditButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-edit-button-wireframe></velt-recorder-player-edit-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### CopyLink

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-video-copy-link.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=2dfa81d16bf03d6c52793ff3e46aa4c9" alt="" width="1280" height="290" data-path="images/customization/recorder/recorder-player-video-copy-link.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer.CopyLink />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-copy-link-wireframe></velt-recorder-player-copy-link-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Delete

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-video-delete.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=a24d75d5bde3e82fbfa5bf274ceab8df" alt="" width="1280" height="290" data-path="images/customization/recorder/recorder-player-video-delete.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer.Delete />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-delete-wireframe></velt-recorder-player-delete-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## AudioContainer

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-audio.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=38f1bdc6392801f31e03384e8acc3958" alt="" width="1280" height="542" data-path="images/customization/recorder/recorder-player-audio.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.AudioContainer>
            <VeltRecorderPlayerWireframe.AudioContainer.AudioToggle />
            <VeltRecorderPlayerWireframe.AudioContainer.Time />
            <VeltRecorderPlayerWireframe.AudioContainer.AudioWaveform />
            <VeltRecorderPlayerWireframe.AudioContainer.Avatar />
            <VeltRecorderPlayerWireframe.AudioContainer.Name />
            <VeltRecorderPlayerWireframe.AudioContainer.SubtitlesButton />
            <VeltRecorderPlayerWireframe.AudioContainer.Transcription />
            <VeltRecorderPlayerWireframe.AudioContainer.CopyLink />
            <VeltRecorderPlayerWireframe.AudioContainer.Delete />
            <VeltRecorderPlayerWireframe.AudioContainer.Subtitles />
            <VeltRecorderPlayerWireframe.AudioContainer.Audio />
        </VeltRecorderPlayerWireframe.AudioContainer>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-audio-container-wireframe>
            <velt-recorder-player-audio-toggle-wireframe></velt-recorder-player-audio-toggle-wireframe>
            <velt-recorder-player-time-wireframe></velt-recorder-player-time-wireframe>
            <velt-recorder-player-audio-waveform-wireframe></velt-recorder-player-audio-waveform-wireframe>
            <velt-recorder-player-subtitles-wireframe></velt-recorder-player-subtitles-wireframe>
            <velt-recorder-player-avatar-wireframe></velt-recorder-player-avatar-wireframe>
            <velt-recorder-player-name-wireframe></velt-recorder-player-name-wireframe>
            <velt-recorder-player-subtitles-button-wireframe></velt-recorder-player-subtitles-button-wireframe>
            <velt-recorder-player-transcription-wireframe></velt-recorder-player-transcription-wireframe>
            <velt-recorder-player-copy-link-wireframe></velt-recorder-player-copy-link-wireframe>
            <velt-recorder-player-delete-wireframe></velt-recorder-player-delete-wireframe>
            <velt-recorder-player-audio-wireframe></velt-recorder-player-audio-wireframe>
        </velt-recorder-player-audio-container-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### AudioToggle

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-audio-toggle.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=7a47e7daa185fe6ba4553f17904eb161" alt="" width="1280" height="271" data-path="images/customization/recorder/recorder-player-audio-toggle.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.AudioContainer.AudioToggle>
            <VeltRecorderPlayerWireframe.AudioContainer.AudioToggle.Pause />
            <VeltRecorderPlayerWireframe.AudioContainer.AudioToggle.Play />
        </VeltRecorderPlayerWireframe.AudioContainer.AudioToggle>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-audio-toggle-wireframe>
            <velt-recorder-player-audio-toggle-pause-wireframe></velt-recorder-player-audio-toggle-pause-wireframe>
            <velt-recorder-player-audio-toggle-play-wireframe></velt-recorder-player-audio-toggle-play-wireframe>
        </velt-recorder-player-audio-toggle-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Pause

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.AudioContainer.AudioToggle.Pause />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-audio-toggle-pause-wireframe></velt-recorder-player-audio-toggle-pause-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Play

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.AudioContainer.AudioToggle.Play />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-audio-toggle-play-wireframe></velt-recorder-player-audio-toggle-play-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Time

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-audio-time.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=6a0374f1f8cafbf589b3012b1f3e6ec3" alt="" width="1280" height="271" data-path="images/customization/recorder/recorder-player-audio-time.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.AudioContainer.Time />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-time-wireframe></velt-recorder-player-time-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### AudioWaveform

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-audio-waveform.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=c5a33753894bfbc5b5e5ce33ef75fbe6" alt="" width="1280" height="271" data-path="images/customization/recorder/recorder-player-audio-waveform.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.AudioContainer.AudioWaveform />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-audio-waveform-wireframe></velt-recorder-player-audio-waveform-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Subtitles

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-audio-subtitles.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=cfc32ad32bf6ba637f1952d5ce90311b" alt="" width="1280" height="271" data-path="images/customization/recorder/recorder-player-audio-subtitles.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.AudioContainer.Subtitles />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-subtitles-wireframe></velt-recorder-player-subtitles-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Avatar

<img src="https://mintcdn.com/velt-mintlify-10684810/PB75fT4MNLW5XJXk/images/customization/recorder/recorder-player-audio-avatar.png?fit=max&auto=format&n=PB75fT4MNLW5XJXk&q=85&s=a277cc5346a68d35c54a1792e3336a70" alt="" width="1280" height="271" data-path="images/customization/recorder/recorder-player-audio-avatar.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.AudioContainer.Avatar />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-avatar-wireframe></velt-recorder-player-avatar-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Name

<img src="https://mintcdn.com/velt-mintlify-10684810/PB75fT4MNLW5XJXk/images/customization/recorder/recorder-player-audio-name.png?fit=max&auto=format&n=PB75fT4MNLW5XJXk&q=85&s=7506c1c82d4fedc891667a60c1d80a4d" alt="" width="1280" height="271" data-path="images/customization/recorder/recorder-player-audio-name.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.AudioContainer.Name />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-name-wireframe></velt-recorder-player-name-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### SubtitlesButton

<img src="https://mintcdn.com/velt-mintlify-10684810/PB75fT4MNLW5XJXk/images/customization/recorder/recorder-player-audio-subtitles-button.png?fit=max&auto=format&n=PB75fT4MNLW5XJXk&q=85&s=a78011263dc1c341fd6bc50c8411d93b" alt="" width="1280" height="271" data-path="images/customization/recorder/recorder-player-audio-subtitles-button.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.AudioContainer.SubtitlesButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-subtitles-button-wireframe></velt-recorder-player-subtitles-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Transcription

<img src="https://mintcdn.com/velt-mintlify-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/recorder-player-audio-transcription.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=75b950de70b51a27d6075fa776c9f5c6" alt="" width="1280" height="271" data-path="images/customization/recorder/recorder-player-audio-transcription.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.AudioContainer.Transcription />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-transcription-wireframe></velt-recorder-player-transcription-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### CopyLink

<img src="https://mintcdn.com/velt-mintlify-10684810/PB75fT4MNLW5XJXk/images/customization/recorder/recorder-player-audio-copy-link.png?fit=max&auto=format&n=PB75fT4MNLW5XJXk&q=85&s=abea28522d2fcdad5cd1166c4afc05b7" alt="" width="1280" height="271" data-path="images/customization/recorder/recorder-player-audio-copy-link.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.AudioContainer.CopyLink />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-copy-link-wireframe></velt-recorder-player-copy-link-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Delete

<img src="https://mintcdn.com/velt-mintlify-10684810/PB75fT4MNLW5XJXk/images/customization/recorder/recorder-player-audio-delete.png?fit=max&auto=format&n=PB75fT4MNLW5XJXk&q=85&s=ce221c7624b40f436b70f62d3b44d5a1" alt="" width="1280" height="271" data-path="images/customization/recorder/recorder-player-audio-delete.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.AudioContainer.Delete />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-delete-wireframe></velt-recorder-player-delete-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Audio

This tag loads the audio recording and is hidden by default to prevent it from displaying in the UI.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltRecorderPlayerWireframe.AudioContainer.Audio />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-recorder-player-audio-wireframe></velt-recorder-player-audio-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>
