sound

Note: This documentation is for the old 0.3.0 version of A-Frame. Check out the documentation for the current 1.6.0 version

The sound component defines the entity as a source of sound or audio. The sound component is positional and is therefore affected by the [components-position][position].

Example

<a-entity id="river" geometry="primitive: plane" material="color: blue"
          position="-10 0 0" sound="src: url(river.mp3); autoplay: true"></a-entity>

Properties

Property	Description	Default Value
autoplay	Whether to automatically play sound once set.	false
on	An event for the entity to listen to before playing sound.	null
loop	Whether to loop the sound once the sound finishes playing.	false
src	Selector to an asset `<audio>`or `url()`-enclosed path to sound file.	null
volume	How loud to play the sound.	1

Events

Event Name	Description
sound-ended	triggered when sound finishes playing

Playing on an Event

The sound component can also listen to an event before playing as well. For example, we might have a laughing sound play every time a monster is clicked:

<a-entity cursor position="0 0 -5"></a-entity>

<a-entity id="elmo" geometry="primitive: box" material="src: elmo.png"
          sound="src: url(ticklelaugh.mp3); on: click"></a-entity>

Preloading a Sound Asset

For performance, it is recommended to block the scene on the sound asset to preload and cache. We can do so through the asset management system:

<a-scene>
  <a-assets>
    <audio id="river" src="river.mp3">
  </a-assets>

  <a-entity sound="src: #river"></a-entity>
</a-scene>

Pause and Resume

To programmatically pause or resume a playing sound, we can tell the entity to pause or resume:

var entity = document.querySelector('[sound]');
entity.pause();

Or to pause only the sound:

entity.components.sound.pause();

Then call .play() on either the entity or the sound component to resume.