# Custom component for Audio Recording

**URL:** <https://community.glideapps.com/t/custom-component-for-audio-recording/79759>\
**Category:** Ask for Help\
**Tags:** components\
**Created:** [February 4, 2025, 5:57am UTC](https://community.glideapps.com/t/custom-component-for-audio-recording/79759 "2025-02-04T05:57:34Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![JDB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jdb/32/84507_2.png) [@JDB](https://community.glideapps.com/u/JDB)\
**Post date:** [February 4, 2025, 5:57am UTC](https://community.glideapps.com/t/custom-component-for-audio-recording/79759/1 "2025-02-04T05:57:34Z")

</div>

Hi,  
Trying to create a better looking audio recording. It seems ok visually and ui behaviors work too **but won’t record anything.**

**How to actually trigger the same behavior as the official Audio Recorder?**

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/4/a428c7e05ca600e5ae37a98861955a3564412031.png)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/c/cc8837ca402dd71be36386d534064810a29892b4.png)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/7/27845510c561062b2008ae09337fa9c6c9ad2f2b.png)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 4, 2025, 6:22am UTC](https://community.glideapps.com/t/custom-component-for-audio-recording/79759/2 "2025-02-04T06:22:56Z")

</div>

The AI component can create a file, but it’s a file stored temporarily in your device memory. It can’t actually upload a file to glide. Due to it’s sandboxed nature, you also can’t download the file to your device at this time, although a couple of us have asked to have that changed. No guarantees though.

You can maybe ask it to provide a playback option to see if it actually recorded anything (not sure if it has mic access), but permanent storage of a binary file is a no-go from the custom AI component to the best of my knowledge.

---

<div class="post-metadata">

**Author:** ![JDB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jdb/32/84507_2.png) [@JDB](https://community.glideapps.com/u/JDB)\
**Post date:** [February 4, 2025, 7:20am UTC](https://community.glideapps.com/t/custom-component-for-audio-recording/79759/3 "2025-02-04T07:20:06Z")

</div>

No need permanent storage, it should just mimic the standard component (creates a url for the file)

But the mic access is not happening.

Is there a way to clone an official component and then just modify appearance?

---

<div class="post-metadata">

**Author:** ![Mariusz](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mariusz/32/89415_2.png) [@Mariusz](https://community.glideapps.com/u/Mariusz)\
**Post date:** [February 4, 2025, 9:33am UTC](https://community.glideapps.com/t/custom-component-for-audio-recording/79759/4 "2025-02-04T09:33:32Z")

</div>

Sure, you can easily modify the appearance with custom CSS.

in fact, I also was able to stack two and more native components with CSS in the Z-axis using relative positioning. So, yes, the look you’re going after with the additional buttons is achievable.

Here are some examples of components where I did this:  
 ![search bar](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/d/ed19499e26c982c7dbc5a8ea8c56a063e4b91a7a.gif)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/8/d8e8dbd01df8f19fac2cffe568ea9f32e8b8c203.png)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 4, 2025, 12:54pm UTC](https://community.glideapps.com/t/custom-component-for-audio-recording/79759/5 "2025-02-04T12:54:57Z")

</div>

> [@JDB](#):
>
> No need permanent storage

The native component creates an audio file and uploads it to permanent storage. The file needs to be stored somewhere so you can retrieve it and play it later. The custom component can’t do that.

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [February 20, 2025, 9:31am UTC](https://community.glideapps.com/t/custom-component-for-audio-recording/79759/6 "2025-02-20T09:31:56Z")

</div>

Sharing for inspiration…

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/2/62e53dd59a29dfda146e2edee885ae30a45afe90.jpeg "Mic Recording") ](https://www.youtube.com/watch?v=KLLqpGBExno)

The custom AI component is specified with:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/2/a24784cf62276114ef2d82b289d70da4024c76b2.png)

Under the custom component is a standard Glide Audio recorder component. They are placed inside a container with 3 columns (middle column) to ensure everything is centered.
