Fixing, repositioning and adding tracks to sound visualizations on P5.Js -- 2
Budget: $30 – $40 USD
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: https://editor.p5js.org/ahmadsaleh94/sketches/KCz6bSgKD
you can view the code and edit it using the p5.js 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
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: https://editor.p5js.org/ahmadsaleh94/sketches/KCz6bSgKD
you can view the code and edit it using the p5.js 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