21. Sound

To play sounds in A-Frame, we use the <a-sound> primitive. It is similar to playing a video, we can set the autoplay and loop attributes, and we must specify the source of the sound from the list of assets. Because we usually want to associate a sound with a specific virtual object, we can put the <a-sound> inside the primitive that represents the 3D object:

<a-assets>
  <audio id="musicbox" src="https://cdn.glitch.com/80978ab7-9db6-45ae-bc43-4fab16bdbb6e%2Fbaby-music-box_daniel-simion.mp3?1524832969017" ></audio>
</a-assets>

<a-box position="-1 1.6 -3" color="#ff0000" >
  <a-sound autoplay="true" loop="true" src="#musicbox"></a-sound>
</a-box>

Sounds are automatically spatialized. Try running the above example and moving through the virtual environment: notice that the sound will seem to come from different directions as you move relative to the red box.

Click to load.
Use keys 'w', 'a', 's', 'd' to move around.
Mouse to look around.

Moving sounds

By taking advantage of what we saw about animations, we can make sound move through the virtual environment. In this example, we are using a generic <a-entity> for the animation. This allows us to make the box, and associated sound, move in a circle:

<a-entity position="0 1.6 0" animation="property: rotation; to: 0 360 0; dur: 15000; easing:linear">
    <a-box position="0 0 -5" color="#ff0000" >
      <a-sound autoplay="true" src="#musicbox"></a-sound>
     </a-box>
</a-entity>

Click to load.
Use keys 'w', 'a', 's', 'd' to move around.
Mouse to look around.

Distance to sound source

The distance to the sound source influences the volume of the sound. We can additionally control the maximum volume by specifying the volume attribute. In addition, we can control how the distance to the sound source affects the volume. The rolloffFactor property defines how quickly the sound will fade away as you move farther from the source. The greater this value (the default is 1) the quicker the sound will fade away. The maxDistance property defines a distance from the source at which the sound will no longer fade away, i.e., even if you move farther then maxDistance you will hear the sound at the level it was at maxDistance.

      <a-box position="0 1.6 -1" color="#ff0000">
        <a-sound
          autoplay="true"
          loop="true"
          volume="0.5"
          sound="maxDistance:20;rolloffFactor:10"
          src="#sonar"
        ></a-sound>
      </a-box>

Notice how the sound becomes lower as you move away from the box and that it quicly fades away (rolloffFactor of 10!).

Click to load.
Use keys 'w', 'a', 's', 'd' to move around.
Mouse to look around.

Triggering sounds

We can also make sounds trigger in response to events over an object, by using the on attribute.
But for this we must invert how we position sounds.

One alternative is to, instead of putting a sound inside an object, put the object inside the sound! This will provide "content" to the sound, so that is can be "clicked", for example:

<a-sound position="0 1.6 -1" on="click" volume="0.5" src="#sonar">
  <a-box color="#ff0000" >  </a-box>
</a-sound>

Another alternative is to use the sound component directly on the visual object. Notice how in the following code, the <a-box> primitive has a sound component (attribute) that configures the sound:

<a-box
        position="1 1.6 -1"
        color="#00ff00"
        sound="src:#sonar; on: click; volume: 0.5"
      >
</a-box>

Click to load.
Use keys 'w', 'a', 's', 'd' to move around.
Mouse to look around.

Click to load.
Use keys 'w', 'a', 's', 'd' to move around.
Mouse to look around.

Click to load.
Use keys 'w', 'a', 's', 'd' to move around.
Mouse to look around.

Exercises

Sound-01

Search for an appropriate sound file on the Internet and add a sound source to represent the sound of the lake in exercise Environments-02.

References

• Media (Image, Sound, Text, Video)
  • <a-sound>: https://aframe.io/docs/0.8.0/primitives/a-sound.html#sidebar