This week the whole class was split up into different groups in order to create a real-time karaoke machine for the web.
The groups were tasked with different aspects of the website, including front-end + UX design, timing lyrics to the song and displaying them, socket connections to provide real-time interaction among everyone on the website, applying sound filters, and displaying real-time video of the participants.
Alex & I were tasked with creating the interface to record everyone's singing and allowing them to save it as an audio file on their computer. We used the Recorder.js library to capture live input from the computer's built-in microphone (or whichever microphone you might have plugged into your computer's audio input), which also provides a function to export the recording and download it to your computer.
We added buttons to "Start" and "Stop" the recordings in our web prototype. Clicking "Start" obviously starts the recording. Clicking "Stop" stops the recording and saves it, and dynamically adds a link to the website (appends it to the DOM) which when clicked, allows you to download the recording.
The interface will likely change once it's incorporated with the other elements. It's likely that the "Start" button will remain there as a general signal that the user is ready to start singing, but the "Stop" button will likely be removed. This last step will most likely be automated whenever the song is done.
The code for our portion of the project is up on Github.