VR Audio Visualizer

Inspiration

We all love music and feel that music has the power to mentally transport people. We wanted to make that a reality –– a virtual one at least. We decided to implement a virtual reality solution via the web browser to make it easier for everyone to experience, no matter what device one may have.

What it does

Allow users to add 3D objects into a virtual space and manipulate the movement of those objects with sound.

How I built it

Utilized the A-Frame WebVR framework in a React project.

Challenges I ran into

As we began adding user interface controls the complexity of the code quickly increased with regard to maintaining and updating the application's current state. This was our main hurdle and roadblock to iterating faster, cleaner, and more features overall.

Accomplishments that I'm proud of

Changing object direction at runtime from user input, and increasing intensity of object movement from microphone volume intensity.

What I learned

Properly handling and setting up the foundation for an application's state is critical for developing and maintaining projects as they become more complex.

What's next for VR Audio Visualizer

Implement application using the Redux architecture. Actually host on a server. Drop down menu for example songs. Drag and drop own songs into scene. Different pictures/environment for each example song (Space, Ocean, Jungle, etc.). Allow user to set own background pictures. Multitude of different objects, other than cubes, in the scene that the user can view and manipulate while playing music. Rotate/Move/Scale in multiple directions. Add/delete/alter objects in scene at certain frequencies (e.g. fast/loud drum roll creating new objects projecting out). Include more user controls as well as a default randomizer option.

Built With

• aframe
• css
• html
• javascript
• react
• webvr