Category: Christy’s Status Reports

This week, i have been working on deploying our application using AWS. I had configuration issues while dealing with Apache WebServer. However, I corrected the configuration, and our website works in http.

One of other deployment issues I faced is that one of our API only works in https setting. I do not have experience with https, so I have been following tutorials. What I have done so far is buying a domain name from AWS using 53 Route (our domain name is www.acapella2021.com), issuing SSL certificate (ACM type) for the domain name within AWS, and using load balancer to redirect http to https. This approach has failed. My assumption is that load balancer somehow fails with apache webserver configuration because SSL does match domain name of the load balancer. So next, approach I took is to issue SSl certififace from 3rd party website and to install the SSL certificate within Apache Configuration. This way, we do not need to utilize AWS load balancer to redirect our traffic. I continue work on this second approach to make it work in https setting

It took me a while to understand Apache Configuration and AWS Load Balancer. It was especially difficult because i was not sure where the error was coming from except for the error.log.  I will also work on creating demo video for our website.

Over the past week, i have been working on fixing minor bugs and deploying our project on cloud through Amazon Web Service.

I merged two types of recording into one. One type of recording used to serve for testing audio of the user. And the other type of recording used to serve for uploading audio of the user. Merging those two recorders allows user to test their audio and upload the recorded audio.

Another main feature that i added is to assign a leader for the recording group. The leader is the one who first created the recording group. Other team members who join the group by the room_key will become team members. The role of the leader is to set click generator, which sets right beat and tempo for the members. Another role of the leader is to sync all the uploaded audio file once every team members successfully upload their audio. These functions were added to keep consistency and improve synchronization.

Deploying our project on AWS has been a challenge for this week. The server was not loaded to Apache server due to the limited storage & computation capacity of Ubuntu Server. So, I tried creating instance with more storage and computation capacity. Another challenge was loading python packages on the Apache Server.

 

This week, I worked on merging ivy’s code and my code. Ivy worked on converting audio blob url into wav file, which will be stored in Django database. I used Jquery Ajax to send audio wave file to Django server.  I encountered several problems while implementing Jquery Ajax in javascript because I was not fully understanding the syntax of Jquery Ajax. Jquery Ajax adapts different format of form, depending on type of data.  Eventually, I figured it out and Django server was able to get the file.

Last week during out team meeting with Professor, Professor suggested us to name the audio file to be uploaded. So I required the user to name the audio file before the upload. However, based on Ivy code, the audio file is named after the time of the upload. So, I will make adjustments between our two different approaches.

Another feature I worked on is generating waveform for the uploaded audio file and creating UI for the uploaded audio.  For this functionality, I looped through every uploaded track and attached wavesurfer for the individual audio because they must generate different waveform according to their audio.  However, it seems like audio file from django database does not properly load to audio element in html. So, currently,  uploaded audio is not showing properly. I need to fix this issue.

In addition, there has been major change in terms of how we record audio. Jackson implemented  audio recording functionality based on Audio API.  However, audio blob generated from Audio API is not suitable to store. So, Ivy implemented this audio recording functionality with Recorder JS API.  Both API works perfectly when user tries to record and test their audio. However, once user decides to upload the audio, Recorder JS API is more suitable because it converts the recorded audio into wav file. My job for this weekend is

This week, I have been working on improving UI for the video editor once the user uploads its audio file to the track. I have had trouble displaying waveform for the audio file because there was a little issue with the format of our audio file. I will continue to work on improving UI.

I utilized bootstrap to decorate our webpage UI.  Buttons and dropdown bars were generic html style. So, I attached customized css to html elements in order to make it better.

I struggled the most with select dropdown bars for click generator. I tried to user bootstrap’s select-picker to make our select dropdown bars more pretty. However, the version of our main bootstrap, which is bootstrap4, was not compatible with select-picker library. So, I decided not to use select-picker for dropdown bars. Instead, I generated customized css for those select dropdown bars.

I am planning on deploying our implementation on cloud before interim demo.

Throughout this week, i completed implementing generating sound wave for the recorded audio. I referred to the code on this website, https://www.cssscript.com/audio-visualizer-with-html5-audio-element/.

Currently, the visualizer generate the waveform as it plays the sound in the playback. Once the playback stops, the waveform disappears. I am figuring out ways to display the waveform even after the playback ends. In order to do so, I need to capture each waveform, connect them all, and display.

Next thing i am working on is propagating the visualization to other users once the user decides to upload their audio. In order to do so, i need to utilize jquery & ajax to propagate the upload.

 

This week, i have been working on group page features. Based on Group Model, created by Jackson, the group page indicates who are the members of the group. In addition, i implemented basic UI for the metronome. Metronome allows user to figure out appropriate bpm to sing.

There are still things to be determined for group page. We first need to assign a leader of the group, who will be responsible for adjusting tempo and leading recording processes.

This week, i focused on implementing group formation functionality, which enables user to create a group or join an existing group.

For next week, i will focus on implementing basic UI.

Our team worked on creating design review slides. I focused on creating login & registration page for the basic user authentication set-up.

After realizing that Django might not be proper framework to implement real-time audio streaming, I have been looking at Node.js. Node.js seems to have many rpm plugins that support real-time audio sending. I was learning about basic of Node.js since i do not have any experience with Node.js.

For this week, our team worked on creating proposal presentation. I created Github Repo for our team where we can organize and update our code.

Our main concern for this project is how we are going to send audio real-time, using Django web application platform. I was searching for the website out on the internet such that uses real-time audio streaming technology. And i found one, ( https://livevoice.io/en ).  I tested their function in order to

Another concern is how we are going to display audio streaming from multiple users at the same time. Streaming by one user is common in web development. For example, Youtube allows one user to stream live video to be shared with other users. However, it is difficult to allow multiple user to stream their live video/audio on a website. Usually, streaming of data by multiple users on screen is common in software application. Examples are zoom, Skype, and facebook message app. I was researching about feasibility of live streaming audio on website. However, i did not get clear picture of how we will do this.

Plan for next week is to do more researches on our real-time functionality in webapp.  And hopefully i will do basic setup of our website.