Fixing, repositioning and adding tracks to sound visualizations on [login to view URL] -- 2

Hello,

We currently have a code that visualizes sound that is recorded live through the user's computer mic. Each recording is limited to 60 seconds, if the user doesn't stop recording within that time, then the recording automatically stops and the user has the option to play back the recording and visualization or save the audio file on their device.

What we need fixed:

Task 1: the positions of the buttons and the timer to align with the visualization (see the hand drawn sketch provided)

Task 2: currently the sound being recorded is not being visualized and only the playback is being visualized, so we will need the live recording to also be visualized.

Task 3: We will need an "add track button" (button image is uploaded) in a fixed position (top-left) and the position of the first visualization, timer and buttons would top-left too. Every time the user clicks add track, a new recording>visualization>play/stop>save elemend is added to the right hand side. The user can repeat this process multiple times. and in the end they can view the different recordings and visualizations to compare how they look like. (see the hand drawn sketch provided)

Files and Links:

Link 1: [login to view URL]

you can view the code and edit it using the [login to view URL] editor link above.

File 1: I have also uploaded a zip file with the same code from the editor above.

File 2: add track button (task 3)

File 3: hand drawn sketch of task 1 and task 3 requirements

Deadline: 24 hours.

Budget: $30-40

JavaScript Coding HTML

Project ID: #33705009

About the project