> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-2b35e884.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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-overview.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=361544dbd2faa3a7533ad08fd7f9af35" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-video.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=8649418e803b73e58111740ca41a6fec" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-video.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=8649418e803b73e58111740ca41a6fec" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-video-timeline.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=61be043ad4690745639a77f7907246c6" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-video-playbutton.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=0868b8244f513cfa2e8f55e7e7ee0a6b" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-video-seekbar.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=5f13258de2673b4c60bfa41420cee1d1" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-video-minimize.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=6246ff62af77bf76fa08ec9f2b0cce2d" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-video-overlay.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=28c93b45d788b16f79512541944e4799" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-video-playbutton.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=0868b8244f513cfa2e8f55e7e7ee0a6b" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-video-subtitles.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=fd45ce763f8a38dba7cbea60c09da296" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-video-avatar.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=901d1289e7f941dea90e2f25e35f2110" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-video-name.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=a04c499f22aed327fd0a7b1e91e9a044" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-video-subtitles-button.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=9fdf733d138dba8081e15a6757dd615a" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-video-transcript.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=8473201967ad74266ac6bf3a62013fc9" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-video-copy-link.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=886a250c45a73c54a3447dca5eda9cce" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-video-delete.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=268fe9e0556e6c1f797c510a86e94bf4" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-audio.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=1a30a705c8633568a91b4dda00e55137" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-audio-toggle.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=fbf5dd90923aad80390e0788f058d976" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-audio-time.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=ac54c2f110bb5779e3e829a9a0c589e7" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-audio-waveform.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=f02199e1dc973c975626a8b064fa7f1c" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-audio-subtitles.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=7fc8984944bda36300ed70481241dff4" 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-2b35e884/kdIbHIj-gB8c6oNO/images/customization/recorder/recorder-player-audio-avatar.png?fit=max&auto=format&n=kdIbHIj-gB8c6oNO&q=85&s=86ef1f39cec82765a55d4424b41cd9c7" 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-2b35e884/kdIbHIj-gB8c6oNO/images/customization/recorder/recorder-player-audio-name.png?fit=max&auto=format&n=kdIbHIj-gB8c6oNO&q=85&s=05f255c5f97d46689313f69023f00b44" 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-2b35e884/kdIbHIj-gB8c6oNO/images/customization/recorder/recorder-player-audio-subtitles-button.png?fit=max&auto=format&n=kdIbHIj-gB8c6oNO&q=85&s=cd94957bac8b9a873bd70d3965af996f" 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-2b35e884/jqYnvuf576ktxbgc/images/customization/recorder/recorder-player-audio-transcription.png?fit=max&auto=format&n=jqYnvuf576ktxbgc&q=85&s=af2f851edf1792310087ff268c3f1682" 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-2b35e884/kdIbHIj-gB8c6oNO/images/customization/recorder/recorder-player-audio-copy-link.png?fit=max&auto=format&n=kdIbHIj-gB8c6oNO&q=85&s=4fb0edcd0c071f8901ab7a36ed5768b7" 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-2b35e884/kdIbHIj-gB8c6oNO/images/customization/recorder/recorder-player-audio-delete.png?fit=max&auto=format&n=kdIbHIj-gB8c6oNO&q=85&s=6c2e765fd953ef7856110020e553e597" 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>
