Stem player demo
After confirming that the VR setup is working, I started on my stem player demo.
I used the official stems from Where Did You Fall by underscores for this demo. Each sphere in this demo is linked to a stem, there is 9 in total. When the page loads, the audio gets preloaded and waits for user input. This is needed to allow audio to be played since Chrome and other browsers prevent audio and video from being autoplayed.
The main goal for this demo was to have the stems playing, linked to objects, but the main issue was that I wasn't sure if the stems would play in sync. Luckily this seems to be the case. I just need to make sure they're all the same length and they should also loop perfectly then but I doubt that I would loop songs over and over.
Positional audio #
Each stem is linked to a sphere from which the audio is played. This means that the audio doesn't just play, but actually exists in the 3d space. This adds a lot of immersion when viewing the scene in VR and could also create a bit of a concert vibe if I wanted to.
On the right side of the screen you can see the menu. This controls the volume levels of each stem. Here you can set it to anything between 0 and 1, but when implementing this in VR I will probably clamp this to 0 or 1 and nothing inbetween.
Visuals #
This is the back side of the stems, to show you how the emissive values change when the audio is playing.
I want to implement some lights that react to the song being played (individually per stem) and this is a good start for that. It analyzes the audio frequencies playing and gets an average from that (basically average peak level) and uses that to change the emissive values of the blue channel. This results in the shapes lighting up when audio is playing and reacting to it.
I really like this effect and the analyzer + material combo is perfect for what I want to accomplish later on with lighting.