Learn
Building the Scene
Sound and Positional Audio

Audio is important for providing immersion and presence in VR. Even adding simple white noise in the background goes a long way. We recommend having some audio for every scene.

One way would be to add an <audio> element to our asset management system and then an <a-sound> primitive to play the audio file:

<a-scene> <a-assets> <audio id="background" src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav"></audio> </a-assets> <a-sound src="#background" autoplay="true"></a-sound> </a-scene>

Notice that the autoplay="true" component value makes the sound clip play automatically when the user enters the scene.

In the real physical world, sound emits from a source.

So in A-frame, we can add a position component to <a-sound>. This makes the sound get louder as we approach it and get softer as we distance from it. This is known as positional audio.

We could give the sound in our scene a position component:

<a-scene> <a-assets> <audio id="background" src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav"></audio> </a-assets> <a-sound src="#background" autoplay="true" position="-3 1 -4"></a-sound> </a-scene>

So when the sound is now coming from the position "-3 1 -4".

Check out the <a-sound> documentation for more info.

Instructions

1.

Suppose we want the scene to have the sound of the air of the wind with an audio file:

  • noise.wav

Add the audio file to the asset management system and give it an id of "air".

2.

Now add an <a-sound> that references the audio file.

Don’t forget to make it play automatically.

Folder Icon

Take this course for free

Already have an account?