Skip to content
This repository has been archived by the owner on Sep 7, 2022. It is now read-only.


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
September 5, 2017 11:33
September 5, 2017 11:33
September 5, 2017 11:17
September 5, 2017 11:17
September 5, 2017 11:17
September 5, 2017 11:17
September 5, 2017 11:17
September 5, 2017 11:45
September 5, 2017 11:17
September 5, 2017 11:17
September 5, 2017 11:17
September 5, 2017 11:17


Song Exploder Presents: Inside Music is a WebVR Experiment that lets you step inside a song, giving you a closer look at how music is made.

The audio of the featured artists and voice over is not included in this repo. To add your own audio and play it in this experiment follow the instructions below.

This is an Experiment, not a Google product.


Inside Music is built with aframe, THREE.JS and Tone.js.



Select a song from the menu. The stems of the song will appear in a circle around you, each represented by a sphere. In 360 Mode, tap the spheres to turn them on or off. In VR Mode, you can use your controller to toggle their state. On Google Cardboard, you will have a retical (a small circle in front of you eye) which can be used to turn the stems on and off.


To build a local version of Inside Music, you will need to have Node.js and webpack installed.

In the terminal, inside the project's directory, install all of the project's dependencies:

npm install

Then compile the source code with webpack:

webpack -p

You can now run a local server such as http-server. To install http-server, run npm install -g http-server. You can now view the site in a browser.

NOTE: You'll have to add your own audio files for the experiment to work.

Exploring your own music in VR

We hope this experiment inspires musicians and coders to explore their own music in VR. Here's a step-by-step guide to bringing your own music into VR, using the open-source code from the Inside Music experiment. The application supports anywhere from 1-7 stems.

Preparing your stems

First, export the stems of your song as wav and so that they all line up at the beginning. Create a folder for your song in the audio/stems folder. For example our demo song is called 'drumming'.


Next, we need to use the audio/stems/ script to split each stem into 30 second chunks. This way it can stream more easily (getting around Web Audio's current streaming limitations). Once we run the script, it will split the audio files and move the generated files up one directory to the audio folder.

Dependencies: to run make sure you have python installed as well as pydub.

In the terminal, cd into the audio/stems folder. From there, run the command with the name of your project's folder

This is what the output in the terminal looks like when I run on my drumming folder

example terminal output

This will generate a bunch of 30 second files encoded both as mp3s and ogg files (ogg is only necessary to support Chromium browsers) and place those files into a folder with the same name in the audio folder



Open up Config.js. This is where you will enter the styling and meta data necessary to run your song. There is a variable called trackConfig with an array of data corresponding to all 6 songs in the experience. Replace the details in one of the objects in that array with the info for your song as described below.

Start by replacing some of the basic data such as what you would like to appear under the 'artist' and 'track' listing. Now enter the name of your track's folder. Set the duration of your song (in seconds).

In the field called 'segments', enter the maximum number of segments for the tracks that generated. You can see in the above picture, that since our song is short, the maximum segment value is "1". In the array called 'trackNames' within your tracks object, enter the name of each of the audio files. In the 'names' array, enter the name that you'd like those tracks to appear under. The names here should correspond to the order of 'trackNames'. If your track has fewer than 7 stems, you can put the string 'null' in the trackNames and 'names' arrays to indicate that there is no stem in that position.

You can now play around with some of the colors for the floor and particles.

This is what the config for our drumming song might look like:


You can now rebuild the javascript files by following the build instructions above and explore your song in VR!


Copyright 2017 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.


Inside Music lets you step inside of a song, seeing its individual pieces to give you a closer look at how music is made.







No releases published


No packages published