Create components to record and play audio

Create a component that can record and play audio

Audio Record

This component should support the following features: Start recording, stop recording, delete recording, save recording

When save recording is clicked. The audio is uploaded to Firebase at the audioPath location
Takes at least 2 props: audioPath and onAudioSaved
onAudioSaved is a function that returns an object. One of the keys in that object is url which contains the URL of the MP3 file in S3
AudioRecord should also render the AudioPlay component once the recording has been saved

Logic for uploading to Firebase

Can be found here: https://github.com/ademidun/atila-client-web-app/blob/8c75759ab2e2d42e10e33f32ede94b2890cde261/src/components/Form/FileInput.js#L17-L18

Example

This component will be used by adding a new question type to mentorProfileFormConfig of audio type.

You will need to figure out the logic for determining how to pass the audioPath to FormDynamicInput using mentorProfileFormConfig

One idea is to create a filePath key to input configs that takes a function with the model input as an argument.

currentdate= "2022-09-26-16-32-05-55" // use Date(); USe format: YYYY-MM-DD-HH-mm-ss

export const mentorProfileFormConfig = [
    {
        keyName: 'bio_recording_url',
        type: 'audio',
        placeholder: 'Tell mentees about yourself using a voice note',
        html: () => (<label htmlFor="bio">
            Tell mentees about yourself using a voice note
        </label>),
        filepath: (mentor) =>`mentorship/mentor/${mentor.id}/bio_recording_${currentdate}.mp3`,
    },
    },

Use it in FormDynamicInput

        case 'audio':
            inputForm = (
                <div>
                    {!hideLabel &&
                    <label htmlFor={keyName} className="mr-3">
                        {placeholder}
                    </label>
                    }
                   <AudioRecord audioPath={keyName} onAudioSaved={onUpdateForm} />
                </div>
            );
            break;

Audio Play

Takes one prop audioUrl which is the link to an MP3 file.
The audio player should have play, pause, scrubbing and speed change features
Ideally, try to find a way to do this using native HTML and javascript without 3rd party libraries

Putting it all Together

Verify it works by adding an AudioRecord component to the FormDynamicInput component as an audio type
Then add a question with the type audio to mentorProfileFormConfig

Example Tutorials

The first link looks like all you might need, but I've included some additional options just in case:

ademidun / atila-client-web-app