# Audio Recording UX Questions

**URL:** <https://community.glideapps.com/t/audio-recording-ux-questions/71550>\
**Category:** Ask for Help\
**Created:** [March 9, 2024, 6:59pm UTC](https://community.glideapps.com/t/audio-recording-ux-questions/71550 "2024-03-09T18:59:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![William\_Ayer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/william_ayer/32/72093_2.png) [@William\_Ayer](https://community.glideapps.com/u/William_Ayer)\
**Post date:** [March 9, 2024, 6:59pm UTC](https://community.glideapps.com/t/audio-recording-ux-questions/71550/1 "2024-03-09T18:59:39Z")

</div>

I have three questions related to allowing users to upload audio recordings within a form:

1. Is it possible to prevent submission of the a form until an audio recording has been uploaded? I am running into issues where users are not recording audio, or are hitting the submit button before the audio has been fully saved. I don’t see any option to make that a required field without adding the underlying field containing the URL of the recording to the form itself.

2. I have noticed (at least on Android) that if the phone screen turns off during recording the audio will pause. Any creative solutions to keep the phone screen active while the recording is going?

3. Can anybody share examples of CSS used to alter the appearance of the audio recording button? I’d like to make it bigger and easier to hit while on-the-go to record quick voice notes.

Appreciate any insight!

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 9, 2024, 7:01pm UTC](https://community.glideapps.com/t/audio-recording-ux-questions/71550/2 "2024-03-09T19:01:57Z")

</div>

1. If you use a “custom form”, yes. Or you can use this CSS trick:  
[🚫 Hacking a Form Submit Button using CSS](https://community.glideapps.com/t/hacking-a-form-submit-button-using-css/69878)
2. Not sure about this one.
3. Should be possible, but I haven’t given it a try. Did you only need the record button itself to be larger?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 10, 2024, 12:06am UTC](https://community.glideapps.com/t/audio-recording-ux-questions/71550/3 "2024-03-10T00:06:01Z")

</div>

> [@William\_Ayer](#):
>
> Can anybody share examples of CSS used to alter the appearance of the audio recording button? I’d like to make it bigger and easier to hit while on-the-go to record quick voice notes.

```auto
button[data-testid="record-button"] {
padding: 16px 32px;
}

button[data-testid="record-button"] div[class*="wire-audio-recorder"] {
font-size: 20px;
}

div[class*="wire-audio-recorder"] svg {
height: 20px;
width: 20px;
}

```

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

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

---

<div class="post-metadata">

**Author:** ![William\_Ayer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/william_ayer/32/72093_2.png) [@William\_Ayer](https://community.glideapps.com/u/William_Ayer)\
**Post date:** [March 14, 2024, 4:12pm UTC](https://community.glideapps.com/t/audio-recording-ux-questions/71550/4 "2024-03-14T16:12:53Z")

</div>

This is great, thank you!

---

<div class="post-metadata">

**Author:** ![William\_Ayer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/william_ayer/32/72093_2.png) [@William\_Ayer](https://community.glideapps.com/u/William_Ayer)\
**Post date:** [March 14, 2024, 4:13pm UTC](https://community.glideapps.com/t/audio-recording-ux-questions/71550/5 "2024-03-14T16:13:33Z")

</div>

Awesome, I’m watching the video now for using CSS to hack the submit button. Appreciate the feedback!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 15, 2024, 12:07am UTC](https://community.glideapps.com/t/audio-recording-ux-questions/71550/6 "2024-03-15T00:07:00Z")

</div>

Let me know if that works for you, and if you have any additional changes to make.