Buildwagon Development Tutorial

Spatial Sound


Spatial sound application allows developers to convincingly place sounds in a 3 dimensional space all around the user. Those sounds will then seem as if they were coming from real physical objects or holograms in the user's surroundings. The sound component helps ground holograms making them more believable and creating a more immersive experience.
HoloSpatialSound is the class that deals with spatial sound. You simply load a sound file, attach it to the object that you want the sound to come from, and run the HoloSpatialSound play method. The spatial sound takes into consideration the direction and distance of the object to gives the impression that the sound is coming from that object.

Let’s add spatial sound in our 3d model Bird example . If you look at the code below, you will notice that the method is simple:

			
var singSpatialsound= HoloBuild.HoloSpatialSound('bird.ogg');

var bird;                
var loaders = new HoloBuild.HoloLoaders();
loaders.loadModel(HoloBuild.loader.GLTF, 'bird.gltf', function (model) {
  bird = model
  bird.scale.set(0.005, 0.005, 0.005);
  bird.rotation.y= 0.5;
  holoscene.add(bird); 
  bird.add(singSpatialsound); 
        
    }, {
            hotspot: true,
            group: true
    });

var btnSing = new HoloBuild.HoloButton('btnSing',0.04, 0.04, 0, {text:'Sing'});
holoscene.add(btnSing);
btnSing.position.set(0.05,-0.2,0);

btnSing.onTap = function (){
	if (typeof singSpatialsound != 'undefined')
	{
		singSpatialsound.play();
	}
};
			
			

You can notice that we first created a variable “singSpatialsound”, an instance of the "HoloSpatialsound" class. We named the sound file (bird.ogg). The sound file name is the main parameter of this class. Other methods can be explored at the Holobuild library.

For the sake of this tutorial, you can download the bird.ogg sound file from this link: bird.ogg. Make sure to upload the sound file to your project before you proceed. To upload a file to your project, right click on the project name and click on "upload files".

When our 3D model is loaded "loader.loadModel", we attached the spatial sound to it: "bird.add(singSpatialsound);"
We then created a button and named it ‘Sing”. When the button is tapped, the spatial sound will be played file by calling the play function: 'singSpatialsound.play();'

You can see the results in the file below. Notice that the spatial sound is positional, where the sound will change depending on the position where the sound is coming from, in our case the bird.


Alternatively, if we do not want to use any buttons, we can add a voice command and ask the hologram to play the sound when the user says a particular word.
This could be done using the HoloSpeech Recognition class particularly the "addVoiceCommance" method.
This method uses two main inputs:

  • Command: which includes ‘string command’ that the system monitors for.
  • Callback: the function to be executed once the system recognize the command (in our case, playing an audio file)

Let’s suppose we want to set the string command to the word ‘sing’, the code will look as such:

			
HoloBuild.HoloSpeechRecognition.addVoiceCommand('sing', function () {
if (typeof singSpatialsound != 'undefined')
	{
		singSpatialsound.play();
	}
});
			
			

In the example above we asked the system to play the singSpatialsound once it recognizes with high confidence the string ‘sing’.

Now you are ready to put in use the spatial sound and speech recognition methods. Make sure to explore it yourself.
In the next chapter, we are going to take a look at spatial mapping.