
# Getting Started - Sound

## Adding Sound

Adding sounds to your world is very easy.

First, create an audio engine and unlock it. Note that we're using `await` to wait for the promises to resolve, so this needs to be done in an `async` function, for example:

```javascript
async function initAudio() {
  const audioEngine = await BABYLON.CreateAudioEngineAsync();
  await audioEngine.unlockAsync();

  // Audio engine is ready to play sounds ...
}
```


For continuously looping background music we use a streaming sound:

```javascript
BABYLON.CreateStreamingSoundAsync("name", "<sound file URL>", { loop: true, autoplay: true }, audioEngine);
```

<Playground id="#SFCC74#773" title="Adding Sound To Your Scene" description="A playground showing how easy it is to add sound to your scene." image="/img/playgroundsAndNMEs/gettingStartedGround.jpg"/>


To play a short sound once we can use a sound that plays from a fully downloaded buffer:

```javascript
const sound = await BABYLON.CreateSoundAsync("sound", "<sound file URL>");
sound.play();
```

In the example below *setInterval* is used to play the sound every 3 seconds

<Playground id="#SFCC74#776" title="Playing Sound Every 3 Seconds" description="Set an interval to play a sound every 3 seconds." image="/img/playgroundsAndNMEs/gettingStartedGround.jpg"/>

Since you probably prefer listening to your own music as you work, and repeated sounds can get annoying, the above playground examples are the only ones in this tutorial that load sounds.

Now back to making our world and the developing our buildings! Buildings come in varied sizes, positions and orientations and this will be true for the world we are creating.



# Getting Started - Mesh Placement

## Place and Scale a Mesh

### Size
Some meshes, such as box, have properties that you can set to change during their creation.

```javascript
const box = BABYLON.MeshBuilder.CreateBox("box", {width: 2, height: 1.5, depth: 3})
```

After creation, and for meshes that do not have sizing options, changes in size are achieved by scaling the mesh.

```javascript
const box = BABYLON.MeshBuilder.CreateBox("box", {}); //unit cube
box.scaling.x = 2;
box.scaling.y = 1.5;
box.scaling.z = 3;
```

```javascript
const box = BABYLON.MeshBuilder.CreateBox("box", {}); //unit cube
box.scaling = new BABYLON.Vector3(2, 1.5, 3);
```

As you can see, from the above codes, scaling is a vector object with properties x, y, and z.

All three of the above sets of codes will produce boxes of the same size

## Position
For the majority of meshes the [position](/features/featuresDeepDive/mesh/transforms/center_origin/position) property places the center of the mesh at that position. Position is also a vector object with properties x, y, and z, so that the following two sets of codes position the box in the same place.

```javascript
box.position.x = -2;
box.position.y = 4.2;
box.position.z = 0.1;
```

```javascript
box.position = new BABYLON.Vector3(-2, 4.2, 0.1);
```

We can now use positions to place the boxes sized in three different ways in one playground. In each case the height of a box is 1.5 and therefore for each box position.y = 0.75 to place it on the ground.

<Playground id="#KBS9I5#68" title="Positioning Meshes" description="A playground demonstrating different ways to position a mesh in your scene." image="/img/playgroundsAndNMEs/gettingStartedMeshPlacement.jpg"/>

### Orientation
As for scaling and position the [rotation](/features/featuresDeepDive/mesh/transforms/center_origin/rotation) property of a mesh is a vector object with properties x, y and z. However when building our first world we will only consider rotation about one axis since setting a rotation about all three axes can be surprisingly confusing.

Rotations are given in radians. If you prefer working in degrees Babylon.js provides a conversion tool. Both these lines of code will produce the same rotation.

```javascript
box.rotation.y = Math.PI / 4;
box.rotation.y = BABYLON.Tools.ToRadians(45);
```

<Playground id="#KBS9I5#69" title="Rotating Meshes" description="A playground demonstrating how to rotate a mesh in your scene." image="/img/playgroundsAndNMEs/gettingStartedRotatingMeshes.jpg"/>

We can now change the size, position and orientate a mesh adding a little more variation to the box as a building. Before we place more boxes in the scene let us see if we can make them a little more building like.



# Getting Started - Ground

## Grounding the World
At the moment we have a box floating in space. To make the scene more world like let's add ground and think of our box as a building set on the ground.

Adding a ground is simple using

```javascript
const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:10, height:10});
```
As we need to create a ground large enough, to put some buildings (boxes) on, the options parameter has two properties set, width in the x direction and height in the z direction. (Yes, we agree, since y is vertical it would make more sense for the properties to be width and depth.)

<Playground id="#KBS9I5#67" title="Adding a Ground Playground" description="A playground showing how to add a basic ground plane to your scene." image="/img/playgroundsAndNMEs/gettingStartedGround.jpg"/>

The immediate thing to note is that  the ground cuts through the middle of the box. This is because when they are created meshes are positioned at the origin.

![ground](/img/getstarted/ground.png)

We need to move the box up half its height using

```javascript
box.position.y = 0.5;  //box created with default size so height is 1
```

<Playground id="#KBS9I5#66" title="Adjusting the Box position." description="A playground showing how to adjust the position of the box." image="/img/playgroundsAndNMEs/gettingStartedGround.jpg"/>

![house 0](/img/getstarted/house0.png)

Currently our world is silent. Let's add some sound.
