Music Visualization in VR – Using Web Audio API in WebVR Tutorial

This is part of #DaysInVR series. View All VR Projects. Yesterday we learnt how to use objects and lights to create shopping in VR. Today, we’ll create music visualization in vr.

Demo | Source

Music Visualizations in VR Using Web Audio API

In this tutorial, we’ll learn how to create music visualizations in WebVR. We’ll use the web audio API to load the audio. We’ll use BoxGeometry to create the boxes for visualization.

Loading audio using web audio API in WebVR

We’ll use FileLoader to load the file as arraybuffer. Once the file is loaded, we’ll use an audio analyzer to get the frequency data of the audio. We’ll use this value later to animate the bars we create based on the audio.

Adding bars for music visualization

We’ll create bars using BoxGeometry of Three.js and we’ll use the frequency information from audio analyzer that we create earlier to create the visualization.

Now to complete the visualizations, we need to add the following to our animate() function. So based on the frequency, each bar will change its size.

It’s your turn

Create your own version of music visualization in VR. Try changing the parameters and see what you can come up with. Don’t forget to share your experiences below in the comments.

Leave a Reply

Send Lesson #1
Join over 100s of VR Developers

Build your Career in VR with this 6 part FREE course

Send Lesson #1
Add Me To VIP