Note: This documentation is for the old 0.7.0 version of A-Frame. Check out the documentation for the current 1.2.0 version
The sound component defines the entity as a source of sound or audio. The sound
component is positional and is thus affected by the
NOTE: Playing sound on iOS — in any browser — requires a physical user interaction.
This is a browser limitation, and internal A-Frame events (like fusing cursors) do
not count as interaction. Ways to deal with this include using a Begin Experience
button to start ambient music, or creating audio sprites with libraries like
< a-entity id= "river" geometry= "primitive: plane" material= "color: blue" position= "-10 0 0" sound= "src: url(river.mp3); autoplay: true"> </ a-entity> Properties
Whether to automatically play sound once set.
Whether to loop the sound once the sound finishes playing.
Maximum distance between the audio source and the listener, after which the volume is not reduced any further.
An event for the entity to listen to before playing sound.
Numbers of simultaneous instances of this sound that can be playing at the same time
Reference distance for reducing volume as the audio source moves further from the listener.
Describes how quickly the volume is reduced as the source moves away from the listener.
Selector to an asset
url()-enclosed path to sound file.
How loud to play the sound.
Triggered when sound file is loaded.
Triggered when sound finishes playing.
Playing on an Event
sound component can also listen to an event before playing as well. For
example, we might have a laughing sound play every time we click a monster:
< 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, we recommend 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" preload= "auto"> </ audio> </ 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.components.sound.stopSound();
Or to pause only the sound:
And to play the sound: