{"_id":"5a06037234873d0010b3924e","category":{"_id":"5a06037134873d0010b39202","version":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-18T21:08:45.730Z","from_sync":false,"order":3,"slug":"develop","title":"Develop"},"parentDoc":null,"project":"578c4badbd223d2000cc1441","user":"578c4a62bd223d2000cc143e","version":{"_id":"5a06037134873d0010b391fe","project":"578c4badbd223d2000cc1441","__v":1,"createdAt":"2017-11-10T19:52:17.163Z","releaseDate":"2017-11-10T19:52:17.163Z","categories":["5a06037134873d0010b391ff","5a06037134873d0010b39200","5a06037134873d0010b39201","5a06037134873d0010b39202","5a06037134873d0010b39203","5a06037134873d0010b39204"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.1.0","version":"2.1.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-07-18T20:16:13.167Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":13,"body":"ViroReact supports three forms of audio: stereo sound, spatial sound, and ambisonic sound fields. Sprinkling environments with sound helps to add true immersion to your scenes; they draw the listener's attention and provide cues on where to look next. ViroReact supports three forms of sound.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Stereo Sound\"\n}\n[/block]\nMany scenes benefit from having a background sound track, either in the form of music or ambient noise like wind or ocean waves. You can add background audio to your scene by utilizing the ```<ViroSound>``` component. The audio to be played is specified via the ```source``` property, as in the following example. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroSound paused={false}\\n           muted={false}\\n           source={require('./res/sound.mp3'}\\n           loop={false}\\n           volume={1.0}\\n           onFinish={this.onFinishSound}\\n           onError={this.onErrorSound}/>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n```<ViroSound>``` can also be used for short sound effects. To replay such a sound, either set ```loop``` to true, or toggle ```paused``` off and on. Finally, these sounds also provide callbacks:\n\n* ```onFinish``` is invoked whenever the sound completes (if looping, this is invoked at the end of each loop\n* ```onError``` is invoked if a sound fails to load.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Spatial Sound\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Not supported on iOS\",\n  \"body\": \"Spatial sound is currently supported on Cardboard (Android), Daydream, and Gear VR\"\n}\n[/block]\n\nSpatial sound is positioned audio that can travel throughout a scene. For example, you can create a spatial sound that animates along with a bird, chirping as it flies through the scene. To create spatial sounds, use the ```<ViroSpatialSound>``` component. This component supports all the fields of ```<ViroSound>```, and adds new properties that define how the sound travels.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ViroSpatialSound rolloffModel=\\\"linear\\\"\\n                  paused={false}\\n                  muted={false}\\n                  minDistance={2}\\n                  maxDistance={5}\\n                  position={[0, 0, 5]}\\n                  source={require('./res/spatial_sound.mp3'}\\n                  loop={false}\\n                  volume={1.0}\\n                  onFinish={this.onFinishSpatial}\\n                  onError={this.onErrorSpatial}/>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe new properties are:\n\n* ```position``` indicates the position of the sound within the coordinate space of its parent node\n* ```minDistance``` specifies the distance from the sound at which it *starts* attenuating\n* ```maxDistance``` the maximum distance at which the sound can be heard; that is, when the sound attenuates to zero\n* ```rolloffModel``` defines the curve of the attenuation between ```minDistance``` and ```maxDistance```, and can be set to ```none```, ```linear```, or ```logarithmic```\n\nSpatial sounds are especially useful in that they can be animated along with visual objects in the scene graph. In the example below, the 'chirp' sound follows the bird 3D object. We can do this by adding both the sound and the 3D object to the same node, then simply animating the node as a whole.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var SoundAnimationTest = React.createClass({\\n  render: function() {\\n    <ViroScene>\\n    \\t<ViroAnimatedComponent animation='translate' run={true} loop={true}>\\n        <ViroNode>\\n      \\t  <Viro3DObject source={require('./res/bird.obj')}\\n                        resources={[require('./res/bird.mtl'),\\n                                    require('./res/bird.jpg')]}\\n                        position={[0, 0, 0]} />\\n          <ViroSpatialSound rolloffModel=\\\"linear\\\"\\n                  paused={false} muted={false}\\n                  minDistance={5} maxDistance={8}\\n                  position={[0, 0, 0]}\\n                  source={require('./res/chirp.mp3'}\\n                  loop={true}\\n                  volume={1.0} />\\n        </ViroNode>\\n   \\t </ViroAnimatedComponent> \\n   </ViroScene>\\n  }\\n});\\n\\nViroAnimations.registerAnimations({\\n  translate:{properties:{positionX:\\\"+=1.0\\\"}, duration:1000},\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Ambisonic Sound Fields\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Not supported on iOS\",\n  \"body\": \"Ambisonic sound fields are currently supported on Cardboard (Android), Daydream, and GearVR\"\n}\n[/block]\nAmbisonic sound fields emit environmental sound from every direction. They are the audio equivalent of a skybox or 360 image, providing atmospheric background noise. These sounds respond to the user's head rotation.\n\nProducing ambisonic sound is beyond the scope of this document, but if you have ambisonic sound files, you can load them into ViroReact via the ```<ViroSoundField>``` component. This component shares the same properties as ```<ViroSound>```, and can additionally be rotated about the Z axis with the ```rotation``` property. See the [<ViroSoundField>](doc:virosoundfield) reference for details.","excerpt":"Adding audio to your scenes","slug":"audio","type":"basic","title":"Sound"}

Sound

Adding audio to your scenes

ViroReact supports three forms of audio: stereo sound, spatial sound, and ambisonic sound fields. Sprinkling environments with sound helps to add true immersion to your scenes; they draw the listener's attention and provide cues on where to look next. ViroReact supports three forms of sound. [block:api-header] { "type": "basic", "title": "Stereo Sound" } [/block] Many scenes benefit from having a background sound track, either in the form of music or ambient noise like wind or ocean waves. You can add background audio to your scene by utilizing the ```<ViroSound>``` component. The audio to be played is specified via the ```source``` property, as in the following example. [block:code] { "codes": [ { "code": "<ViroSound paused={false}\n muted={false}\n source={require('./res/sound.mp3'}\n loop={false}\n volume={1.0}\n onFinish={this.onFinishSound}\n onError={this.onErrorSound}/>", "language": "javascript" } ] } [/block] ```<ViroSound>``` can also be used for short sound effects. To replay such a sound, either set ```loop``` to true, or toggle ```paused``` off and on. Finally, these sounds also provide callbacks: * ```onFinish``` is invoked whenever the sound completes (if looping, this is invoked at the end of each loop * ```onError``` is invoked if a sound fails to load. [block:api-header] { "type": "basic", "title": "Spatial Sound" } [/block] [block:callout] { "type": "info", "title": "Not supported on iOS", "body": "Spatial sound is currently supported on Cardboard (Android), Daydream, and Gear VR" } [/block] Spatial sound is positioned audio that can travel throughout a scene. For example, you can create a spatial sound that animates along with a bird, chirping as it flies through the scene. To create spatial sounds, use the ```<ViroSpatialSound>``` component. This component supports all the fields of ```<ViroSound>```, and adds new properties that define how the sound travels. [block:code] { "codes": [ { "code": "<ViroSpatialSound rolloffModel=\"linear\"\n paused={false}\n muted={false}\n minDistance={2}\n maxDistance={5}\n position={[0, 0, 5]}\n source={require('./res/spatial_sound.mp3'}\n loop={false}\n volume={1.0}\n onFinish={this.onFinishSpatial}\n onError={this.onErrorSpatial}/>", "language": "javascript" } ] } [/block] The new properties are: * ```position``` indicates the position of the sound within the coordinate space of its parent node * ```minDistance``` specifies the distance from the sound at which it *starts* attenuating * ```maxDistance``` the maximum distance at which the sound can be heard; that is, when the sound attenuates to zero * ```rolloffModel``` defines the curve of the attenuation between ```minDistance``` and ```maxDistance```, and can be set to ```none```, ```linear```, or ```logarithmic``` Spatial sounds are especially useful in that they can be animated along with visual objects in the scene graph. In the example below, the 'chirp' sound follows the bird 3D object. We can do this by adding both the sound and the 3D object to the same node, then simply animating the node as a whole. [block:code] { "codes": [ { "code": "var SoundAnimationTest = React.createClass({\n render: function() {\n <ViroScene>\n \t<ViroAnimatedComponent animation='translate' run={true} loop={true}>\n <ViroNode>\n \t <Viro3DObject source={require('./res/bird.obj')}\n resources={[require('./res/bird.mtl'),\n require('./res/bird.jpg')]}\n position={[0, 0, 0]} />\n <ViroSpatialSound rolloffModel=\"linear\"\n paused={false} muted={false}\n minDistance={5} maxDistance={8}\n position={[0, 0, 0]}\n source={require('./res/chirp.mp3'}\n loop={true}\n volume={1.0} />\n </ViroNode>\n \t </ViroAnimatedComponent> \n </ViroScene>\n }\n});\n\nViroAnimations.registerAnimations({\n translate:{properties:{positionX:\"+=1.0\"}, duration:1000},\n});", "language": "javascript" } ] } [/block] [block:api-header] { "title": "Ambisonic Sound Fields" } [/block] [block:callout] { "type": "info", "title": "Not supported on iOS", "body": "Ambisonic sound fields are currently supported on Cardboard (Android), Daydream, and GearVR" } [/block] Ambisonic sound fields emit environmental sound from every direction. They are the audio equivalent of a skybox or 360 image, providing atmospheric background noise. These sounds respond to the user's head rotation. Producing ambisonic sound is beyond the scope of this document, but if you have ambisonic sound files, you can load them into ViroReact via the ```<ViroSoundField>``` component. This component shares the same properties as ```<ViroSound>```, and can additionally be rotated about the Z axis with the ```rotation``` property. See the [<ViroSoundField>](doc:virosoundfield) reference for details.