# Starting audio

**URL:** <https://phaser.discourse.group/t/starting-audio/577>\
**Category:** Phaser 3\
**Created:** [January 3, 2019, 3:00am UTC](https://phaser.discourse.group/t/starting-audio/577 "2019-01-03T03:00:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![PappasBiology](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/pappasbiology/32/354_2.png) [@PappasBiology](https://phaser.discourse.group/u/PappasBiology)\
**Post date:** [January 3, 2019, 3:00am UTC](https://phaser.discourse.group/t/starting-audio/577/1 "2019-01-03T03:00:30Z")

</div>

I have a simple game I’ve put together, initially based on “Making your first Phaser 3 game”: [https://apbiologygame.netlify.com/](https://apbiologygame.netlify.com/) (I’m a teacher, this may get used as a recruitment piece for my AP class). When it initially opens, the audio does not start playing on Chrome or Edge (it seems to work on Firefox). However, it does play after a return to the intro scene (after playing the game or going to the instructions/credits scenes). It behaves as expected once it starts.

Here’s the code setting up the audio in the initial scene:

![audio](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/95cac8e748b761821cb2211c78d9c8f4ba96a56a.png)

and the code for the config:

![audio2](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/51eab8eb57d809df0171155da24070d7272f2c1c.png)

Anyone know what I’m missing?

---

<div class="post-metadata">

**Author:** ![PatrickP](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/patrickp/32/384_2.png) [@PatrickP](https://phaser.discourse.group/u/PatrickP)\
**Post date:** [January 3, 2019, 6:19am UTC](https://phaser.discourse.group/t/starting-audio/577/2 "2019-01-03T06:19:29Z")

</div>

I think it has to do with the document not being focused. I tried solving the focus problem, but window.focus doesn’t seem to do anything in Chrome.

[https://www.w3schools.com/jsref/met\_win\_focus.asp](https://www.w3schools.com/jsref/met_win_focus.asp)

I don’t see any difference in Chrome between the focus and blur ‘try it yourself’.

I noticed that while [https://apbiologygame.netlify.com/](https://apbiologygame.netlify.com/) is still loading if you click the canvas before it appears the music plays normally.

Perhaps include a intro scene just to load all assets, and request a click to start. This will focus the page, begin the next scene where the music is started, and I expect play normally.

---

<div class="post-metadata">

**Author:** ![Telinc1](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/telinc1/32/60_2.png) [@Telinc1](https://phaser.discourse.group/u/Telinc1)\
**Post date:** [January 3, 2019, 8:39am UTC](https://phaser.discourse.group/t/starting-audio/577/3 "2019-01-03T08:39:14Z")

</div>

Could this have something to do with Chrome’s audio autoplay policies? Recent versions of Chrome require the user to interact with the page in some way before they allow it to play audio. These new policies were introduced quite recently (maybe even in the latest version), so I haven’t had the chance to experiment with them and see how they behave, but your explanation makes it sound likely it’s related to that.

---

<div class="post-metadata">

**Author:** ![PappasBiology](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/pappasbiology/32/354_2.png) [@PappasBiology](https://phaser.discourse.group/u/PappasBiology)\
**Post date:** [January 3, 2019, 3:45pm UTC](https://phaser.discourse.group/t/starting-audio/577/4 "2019-01-03T15:45:55Z")

</div>

Adding a click to start scene took care of it. Thanks!

---

<div class="post-metadata">

**Author:** ![RockSoft\_Apps](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rocksoft_apps/32/393_2.png) [@RockSoft\_Apps](https://phaser.discourse.group/u/RockSoft_Apps)\
**Post date:** [January 4, 2019, 1:27am UTC](https://phaser.discourse.group/t/starting-audio/577/5 "2019-01-04T01:27:03Z")

</div>

I believe it’s a Chrome issue. You’ll want have to click first before sound will play. Not an issue on Safari or Firefox I believe.

---

<div class="post-metadata">

**Author:** ![drIP](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/drip/32/6262_2.png) [@drIP](https://phaser.discourse.group/u/drIP)\
**Post date:** [March 14, 2022, 6:08pm UTC](https://phaser.discourse.group/t/starting-audio/577/6 "2022-03-14T18:08:20Z")

</div>

I have faced the same problem, definitely Chrome makes issue. Here is a simple solution from Phaser 3 examples:  
Example [https://phaser.io/examples/v3/view/input/multitouch/multi-touch-test](https://phaser.io/examples/v3/view/input/multitouch/multi-touch-test)

```javascript
if (this.sound.locked)
    {
        var text = this.add.text(10, 10, 'Tap to unlock audio', { font: '16px Courier', fill: '#00ff00' });

        this.sound.once('unlocked', function ()
        {
            text.destroy();
            this.createPiano();
        }, this);
    }
    else
    {
        this.createPiano();
    }

```