Audio Recording UX Questions

Ask for Help
1

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!

2
  1. If you use a “custom form”, yes. Or you can use this CSS trick:
    🚫 Hacking a Form Submit Button using CSS
  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?
1 Like
3 
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
image455×835 24.5 KB

image
image962×171 2.88 KB

3 Likes
4

This is great, thank you!

1 Like
5

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

6

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