Musi.Cloud

Inspiration

We were inspired by VR technology and Gatherly to create a virtual space for musicians to practice during the pandemic.

What it does

Our program uses skyboxes to create a simple VR with audio students can use to practice singing.

How we built it

Our site uses JavaScript, CSS, and HTML for our general structure. To create our skybox we used the three.js source code and modified it to fit our purposes.

Challenges we ran into

Making the skybox work and combining our team's code were some of the most challenging parts of our project. At first the skybox only displayed a black screen rather that the 3D world. After a lot of double checking, Youtube videos, Articles, breaking down the code and guidance from our amazing mentor we were able to display the 3D world we wanted. Also, we had to do a few work arounds to get background sound to work in Google Chrome, but now the website works in all browsers.

Accomplishments that we're proud of

The skybox looks so cool, and I was so surprised by what we could create in the span of a single day. Especially because a few of us had little to no experience with HTML (I hadn't used it until today, and I learned a lot!).

What we learned

Three.js is an amazing Javascript library! We only scratched the surface of the things we could do with it. It has so many VR applications, and it's relatively user friendly. All of their guides are extremely comprehensible, and there are a lot of video tutorials and articles that were helpful as well.

What's next for MusiCloud

Our prototype is in quite a primitive state. In the future we would like it to be almost like a VR, in which users can move around to listen into the audio from other users. We would also like them to practice with prerecorded tracks so they can practice harmonization.

SOURCE CODE

We used Three.js to help complete this project! Here is a link to their github: https://github.com/mrdoob/three.js/ Audio: Easy Stroll from Youtube Audio Library Images: “Lancellottie Chapel.” Humus, 10 June 2013, www.humus.name/index.php?page=Textures&ID=110. Link to Image License: https://creativecommons.org/licenses/by/3.0/

Built With

Submitted to

HackGT 7

Created by

I did the back-end. I made the skybox using Three.js, HTML, and CSS. I used HTML to put in the audio to the experience. Today was the first time I used HTML and CSS.

Lauren Whiteley
I worked on front-end. I used html to contribute the basic structure of the site. I also worked on the mission statement, vision, and next steps. I am relatively new to coding and had minimal knowledge coming in, but this was a great experience and I have learned so much about coding and applications.

Jahve Hawkins
I worked on the front-end side of our project. I used CSS and HTML to make the background effects, navigation bar, and experience tab. I had a lot of fun learning and using the markup and styling languages. I also proposed using music as our target subject.

Ja'Zmin McKeel
Jingyu Zhang