> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-d39a5459.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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-overview.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=9f118f721145331ef0b6af308da1e190" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-video.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=f80bbffe643b005cf0e5f9de58584bef" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-video.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=f80bbffe643b005cf0e5f9de58584bef" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-video-timeline.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=346dec4a2dcf039bf7e1386532990886" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-video-playbutton.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=b485dec4aa3b4ed014a6bb8eb8d7c0d7" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-video-seekbar.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=a97cd1ceef02148fe6075781b541bd89" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-video-minimize.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=e8499130d8345031b1acb11731770a49" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-video-overlay.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=00a20f4f2be22b97377b852e60fb9069" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-video-playbutton.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=b485dec4aa3b4ed014a6bb8eb8d7c0d7" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-video-subtitles.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=ef4351e2207f58d2c2d1f7ef6cba99f3" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-video-avatar.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=52c4b9369ecc0a383ab57fdde17c8c0f" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-video-name.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=a28c9dda1fb388f74d43814ba5cede9b" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-video-subtitles-button.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=08e60a38c43cc6ab02078b8a2e857366" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-video-transcript.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=765b2389bc9ab81858da805f945f8e5e" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-video-copy-link.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=aed7821f8a46e11010781b0efd8ea5b8" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-video-delete.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=cba1f9d8e70081f37ff9f8700e44d782" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-audio.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=899caa246644245b062d3fa410291aeb" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-audio-toggle.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=910983ff390f677cbac90f7593fc2ef6" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-audio-time.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=045191f7b336429e72835af84cc94bf6" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-audio-waveform.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=9cfaac3b4c021f27be509eed9c6d4fe7" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-audio-subtitles.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=a059692cbef99ee2b50287774f07100f" 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-d39a5459/qCPqmiHJPomxBHuB/images/customization/recorder/recorder-player-audio-avatar.png?fit=max&auto=format&n=qCPqmiHJPomxBHuB&q=85&s=19d593f47b2b2b0f98ef7ad8c6b11072" 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-d39a5459/qCPqmiHJPomxBHuB/images/customization/recorder/recorder-player-audio-name.png?fit=max&auto=format&n=qCPqmiHJPomxBHuB&q=85&s=96e5a6c0fefcdadb3f2adb34edf54e17" 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-d39a5459/qCPqmiHJPomxBHuB/images/customization/recorder/recorder-player-audio-subtitles-button.png?fit=max&auto=format&n=qCPqmiHJPomxBHuB&q=85&s=6c38966cb61a99178c8c598caa4dac12" 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-d39a5459/bnriXYf9RLrlLabo/images/customization/recorder/recorder-player-audio-transcription.png?fit=max&auto=format&n=bnriXYf9RLrlLabo&q=85&s=ba2a9b287a44188280b5ec5fd6805a87" 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-d39a5459/qCPqmiHJPomxBHuB/images/customization/recorder/recorder-player-audio-copy-link.png?fit=max&auto=format&n=qCPqmiHJPomxBHuB&q=85&s=f895f5063074872bdf5a9749cdd57ec9" 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-d39a5459/qCPqmiHJPomxBHuB/images/customization/recorder/recorder-player-audio-delete.png?fit=max&auto=format&n=qCPqmiHJPomxBHuB&q=85&s=d97cb11b515c22bb200e1ed9061c16c0" 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>
