> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-7e5f8656.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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-overview.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=9ebac1f8c4b25c7d338ab077b490760e" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-video.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=49e3152523c6e7ad353aee7798c9ce58" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-video.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=49e3152523c6e7ad353aee7798c9ce58" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-video-timeline.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=27d25528daaae065aca6d8805b4b8c5a" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-video-playbutton.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=c11d7c19c4d4a7f09738885613a30a3e" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-video-seekbar.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=5c797c30e3ad87a3899e75cec3639064" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-video-minimize.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=9742e313aa8e620d4e189c4b0c27672f" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-video-overlay.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=e02699c67d75f808de6b9e5c5b5e2faa" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-video-playbutton.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=c11d7c19c4d4a7f09738885613a30a3e" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-video-subtitles.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=26f0b186bc6a115100d9252131c2ac93" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-video-avatar.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=0144201572a849621897889f96df7f83" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-video-name.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=89f590cbb3e541f2b6be4a6695143b2f" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-video-subtitles-button.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=9c39ae02bb3a6eeb4be692f99328380f" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-video-transcript.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=c8177d27157091f8a9889b3e213abca3" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-video-copy-link.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=c5e21ebe9ff9850975cfc69ee5fe14ba" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-video-delete.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=0e89c19964f4613ca13fadc497f25fad" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-audio.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=6fb07d3b67e5c8451ab3392addd73761" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-audio-toggle.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=26a390d2c4a25f712a249cd684de3b80" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-audio-time.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=180a898cc9340656b2faa741cdf5bb23" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-audio-waveform.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=c55145677dfb74bdda9fa2377797236c" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-audio-subtitles.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=576b4cd0c7898d23f538357ed4d7e306" 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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/recorder-player-audio-avatar.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=c9330a94760de185d30ae56de29eeb8f" 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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/recorder-player-audio-name.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=9eedc548892838ef2437865532b3cf75" 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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/recorder-player-audio-subtitles-button.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=88abedfa4ce20a7e5bcd3a5d7028ad4a" 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-7e5f8656/5Cuom5EvjfTxnj2S/images/customization/recorder/recorder-player-audio-transcription.png?fit=max&auto=format&n=5Cuom5EvjfTxnj2S&q=85&s=819ddc5176705fa1bf605e2dc28fbbfc" 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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/recorder-player-audio-copy-link.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=9f76b57ab2151d562d5a279ba87b4b74" 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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/recorder-player-audio-delete.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=68b7bd9d0adf6fda06e0ed8c6ad6d931" 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>
