> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-6.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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-overview.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=5e97e31937b378d4167cf9a9b663cfe9" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-video.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=f26f66200e9c2e1c7fca569649905f8b" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-video.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=f26f66200e9c2e1c7fca569649905f8b" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-video-timeline.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=7030115ee8176d5a1a88dece9faa71e3" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-video-playbutton.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=bc01f38a0cdb73a52da952576b387747" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-video-seekbar.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=ffd3b8c3a3adb6bd82c9e7318fe36c65" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-video-minimize.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=3ee645bce41464eee87250c79012dae4" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-video-overlay.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=0463da4ecb8090e065656686a407716e" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-video-playbutton.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=bc01f38a0cdb73a52da952576b387747" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-video-subtitles.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=11159756138a14dbf2c2dad045f9d1a1" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-video-avatar.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=3318751e53a7aea90091e7b8209f1edb" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-video-name.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=24849c20283921630a48de67d7c0f271" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-video-subtitles-button.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=a98abc2e4e721a1fe780a5e3d0af5701" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-video-transcript.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=56dbc2b65f3b573410fc6ddf255a9ac3" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-video-copy-link.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=83fb888554f134a6e9ca1840ab5124bb" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-video-delete.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=35cce11c3d0130eacc4e02934df75def" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-audio.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=a9244199fb1fa38b7ce6dc0c8e95f097" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-audio-toggle.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=18282779f4b52afaace1823e8d750e2a" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-audio-time.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=2adab5ffa9ad1824ab52d6ddb65b5074" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-audio-waveform.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=030e82208a3337271027de02b33b81d7" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-audio-subtitles.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=2f29d428a67c6153ea44686b82b9a8a5" 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-v6-0-0-beta-6/WtgH-sf_kgjzjQt1/images/customization/recorder/recorder-player-audio-avatar.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=c7441e72094c45c0ef39914c5068283e" 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-v6-0-0-beta-6/WtgH-sf_kgjzjQt1/images/customization/recorder/recorder-player-audio-name.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=221e278c4a0dd8e8dbe7b842be5aed19" 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-v6-0-0-beta-6/WtgH-sf_kgjzjQt1/images/customization/recorder/recorder-player-audio-subtitles-button.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=a082d63396116299483f1c77f6f197d3" 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-v6-0-0-beta-6/Ef__r5EVfNEfrwAH/images/customization/recorder/recorder-player-audio-transcription.png?fit=max&auto=format&n=Ef__r5EVfNEfrwAH&q=85&s=0fc5ec98a47a35b0e761736ef36322c8" 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-v6-0-0-beta-6/WtgH-sf_kgjzjQt1/images/customization/recorder/recorder-player-audio-copy-link.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=d31eec3bed0205307bfdec08b4587adb" 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-v6-0-0-beta-6/WtgH-sf_kgjzjQt1/images/customization/recorder/recorder-player-audio-delete.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=93446ba5a9d312f68b419e18aebef503" 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>
