# Loading Audio

**URL:** <https://phaser.discourse.group/t/loading-audio/1306>\
**Category:** Phaser 3\
**Created:** [February 19, 2019, 6:55pm UTC](https://phaser.discourse.group/t/loading-audio/1306 "2019-02-19T18:55:14Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![gregmax17](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/gregmax17/32/751_2.png) [@gregmax17](https://phaser.discourse.group/u/gregmax17)\
**Post date:** [February 19, 2019, 6:55pm UTC](https://phaser.discourse.group/t/loading-audio/1306/1 "2019-02-19T18:55:14Z")

</div>

I can’t seem to load audio outside of the scenes’ `preload` method. If I want to manually load assets, like images, outside of the `preload` method I’m able to do so. But with sound, it throws an error when trying to play that audio by the key I specified.

Something I’m missing?

---

<div class="post-metadata">

**Author:** ![theNeedle](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/theneedle/32/745_2.png) [@theNeedle](https://phaser.discourse.group/u/theNeedle)\
**Post date:** [February 19, 2019, 7:11pm UTC](https://phaser.discourse.group/t/loading-audio/1306/2 "2019-02-19T19:11:22Z")

</div>

What’s the error?

First, you need to load audio in preload function.

```
preload() {
    this.load.audio('mySound', 'beep.mp3');`
}

```

Then you can play that audio with key `mySound` in `create` function.

```
create() {
    let sfx = this.sound.add('mySound');
    sfx.play();
}

```

Check out [this example.](https://labs.phaser.io/edit.html?src=src%5Caudio%5CWeb%20Audio%5Cplay%20audio%20file.js)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 19, 2019, 7:39pm UTC](https://phaser.discourse.group/t/loading-audio/1306/3 "2019-02-19T19:39:38Z")

</div>

> If you call any `this.load` methods from outside of `Scene.preload` then you need to start the Loader going yourself by calling `Loader.start()` . It’s only automatically started during the Scene preload.

[Phaser.Loader.LoaderPlugin](https://photonstorm.github.io/phaser3-docs/Phaser.Loader.LoaderPlugin.html)

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [February 19, 2019, 8:09pm UTC](https://phaser.discourse.group/t/loading-audio/1306/4 "2019-02-19T20:09:13Z")

</div>

If you load an audio file outside of `preload()`, it will not instantly be available. You have to wait for the `filecomplete` event.

```javascript
create() {
  let songLoader = this.load.audio('song', ['assets/sounds/0781.ogg'])
  songLoader.on('filecomplete', () => this.sound.add('song').play())
  songLoader.start()
}

```

Or if you want to use **async/await** :

```javascript
async create() {

  const asyncLoader = loaderPlugin => {
    return new Promise(resolve => {
      loaderPlugin.on('filecomplete', () => resolve()).on('loaderror', () => resolve())
      loaderPlugin.start()
    })
  }

  await asyncLoader(this.load.audio('song', ['assets/sounds/0781.ogg']))
  this.sound.add('song').play()
}

```

---

<div class="post-metadata">

**Author:** ![gregmax17](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/gregmax17/32/751_2.png) [@gregmax17](https://phaser.discourse.group/u/gregmax17)\
**Post date:** [February 19, 2019, 9:23pm UTC](https://phaser.discourse.group/t/loading-audio/1306/5 "2019-02-19T21:23:32Z")

</div>

Oh, I just found out something interesting. I’m making a “Loader” scene, it comes into view on top when transitioning between scenes. What my Loader scene was doing was checking the progress of the loader, and when it was \>= 1 it would init the next scene (Title scene for example), and in that scene it would start the audio. Something internally isn’t ready to play the audio even though the load progress value is \>= 1, you have to wait for the `complete` event.

Here is some sample code to replicate:

```
class Test extends Phaser.Scene {
    constructor() {
        super({ key: 'Test' })
    }

    create() {
        this.load.progress = 0;

        this.load.audio('music', ['./some-bg-music.ogg', './some-bg-music.mp3']);
        this.load.once('complete', () => {
            // this will play just fine
            // this.sound.play('music', { loop: -1 });
        });
        this.load.start();
    }

    update() {
        // this will not work
        if (this.load.progress >= 1) {
            this.load.progress = 0;

            // can't do it like this, something internal going on is preventing me from playing this sound asap
            this.sound.play('music', { loop: -1 });
        }
    }
}

let game = new Phaser.Game({
    type: Phaser.AUTO,
    width: 480,
    height: 320,
    parent: 'game-wrapper',
    loader: {
        path: './assets/'
    },
    scene: [Test]
});
```

---

<div class="post-metadata">

**Author:** ![yannick](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yannick/32/732_2.png) [@yannick](https://phaser.discourse.group/u/yannick)\
**Post date:** [February 19, 2019, 9:59pm UTC](https://phaser.discourse.group/t/loading-audio/1306/6 "2019-02-19T21:59:29Z")

</div>

You can use `!this.load.isLoading()` instead

```javascript
playing = false

create() {
  this.load.audio('song', ['assets/sounds/0781.ogg'])
  this.load.start()
}

update() {
  if (!this.playing && !this.load.isLoading()) {
    this.playing = true
    this.sound.play('song') // this works
  }

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 19, 2019, 10:46pm UTC](https://phaser.discourse.group/t/loading-audio/1306/7 "2019-02-19T22:46:56Z")

</div>

Also, the `load.*()` methods don’t load _anything_ immediately, regardless of asset type, whether called in `preload()` or not.